前端知识1html

VScode一些快捷键

·Ctrl+/------注释

·!------生成html框架元素

·*n------生成n个标签

·直接书写html的名字回车生成对应的标签

常见标签

span:

html 复制代码
<span style="color: red;">hello</span>
<span>demo</span>

span实现:

标题标签:

html 复制代码
<h1>标题标签</h1>

<h2>标题标签</h2>

<h3>标题标签</h3>

<h4>标题标签</h4>

<h5>标题标签</h5>

<h6>标题标签</h6>

标题标签实现:

div:

html 复制代码
<div>文本信息</div>
<div>文本信息</div>
<div>文本信息</div>

div实现:

p:

html 复制代码
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>

p实现:

a:

html 复制代码
 <!-- 超链接标签 href跳转的资源
 target设置资源打开窗口的方式
 _self本窗口打开
 _blank新窗口打开 窗口名 指定窗口打开-->
<a href="https://google.com/" target="aa">点击跳转</a>

a实现:

列表标签:

html 复制代码
<ul>
    <li>代办事项1</li>
    <li>代办事项1</li>
    <li>代办事项1</li>
    <li>代办事项1</li>
</ul>

列表标签实现:

表格标签:

html 复制代码
<!-- tr行 -->
<!-- td单元格 th加粗居中-->
<!-- thead 头 tbody身子 tfoot脚-->
<!-- border="1"表示表格有边框 cellspacing="0"单元格之间的间距为0-->
    <table border="1" cellspacing="0" cellpadding="10px" width="500px" height="200px">
        <tfoot>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
            </tr>
        </tfoot>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
            <td>女</td>
        </tr>
        <thead>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>25</td>
                <td>男</td>
            </tr>
        </thead>
    </table>

表格标签实现:

窗口标签:

html 复制代码
<!-- 窗口标签  嵌套其他页面 frameborder="0"把任意页面更加逼真的嵌入到当前窗口 name表示窗口的名字 -->
<iframe src="https://xilazimu.net/" name="aa" height="600px" width="900px" frameborder="0"></iframe>

窗口标签实现:

form标签:

html 复制代码
<form action="">
    <input type="text">单行文本框<br>
    <input type="password">密码框<br>
    <input type="radio" name="sex">男<input type="radio" name="sex">女<br>
    <input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">橄榄球<br>
    <select name="" id="">
        <option value="">计算机学院</option>
        <option value="">工学院</option>
        <option value="">神学院</option>
        <option value="">法学院</option>
    </select>
    <input type="file">
    <input type="date">日期<br><br>
    <input type="datetime-local">时间<br><br>
    <!-- rows行 cols宽度-->
    <textarea rows="10" cols="40"></textarea>多行文本域 <br><br>
    <input type="button" value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
</form>
相关推荐
white-persist21 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm