标签HTML

1. 标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

备注：标题标签加粗字体变大，随数字增加而递减

2. 段落标签

<p>段落标签</p>

备注：文字成段显示，上一段和下一段默认之间是搁一行

标题标签内可以嵌套段落标签

段落标签内不能嵌套标题标签

3. 图片标签

<img src="../img/web01.webp" alt="鸡你太美" title="唱跳rap篮球">

备注：属性---是在开始标签内，使用空格隔开，添加一个单词或字母，使其具有一定的功能

属性与属性之间是用空格隔开的

原有属性：标签自带的属性

非原有属性：程序员为了实现某一个功能，程序员自己起名添加的属性

备注：容器标签div也是作为布局当中最主要的标签

src：图片的路径，按照这个路径找到图片，并显示到页面上

alt：当图片无法显示的时候，替代显示的文本内容

title：鼠标悬停在图片上时显示的文本内容

4. 超链接标签

自带默认属性href，代表将要跳转的位置

特点：超链接中的文字是默认蓝色字体，在字体下面有下划线，鼠标会变成小手的形状

<a href="./4-文章案例.html">跳转到第四个页面</a>

​

<a href="./html/5-图片标签.html">

<img src="./img/1.webp" alt="">

</a>

备注：标签之间的文本内容是超链接显示的文本内容

<a href="#p1">标题一</a>

<p id="p1">内容</p>

锚点跳转功能：只能在当前页面使用，跳转的相应的位置

id的写法：＃号＋id 例：#id

超链接根据href中id的名字，在当前页面中找到对应的id的名字，然后显示内容（跳转到对应位置）

路径说明

绝对路径：当前页面相对于父级得到位置，地址里面没有https，没有磁盘名

相对路径：地址中含有https，有磁盘名，一般在服务器中会使用绝对路径

// 绝对路径

<img src="C:\Users\17611\Desktop\1.webp" alt="">

<a href="https://www.baidu.com">百度</a>

// 相对路径

<a href="./4-文章案例.html">跳转到第四个页面</a>

​

// 标签的嵌套

<a href="./html/5-图片标签.html">

<img src="./img/1.webp" alt="">

</a>

5. 容器标签

<div>内容</div>

备注：容器标签里可以嵌套任何标签，也是页面布局的主要标签

6. 无序列表

<ul>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

备注：无序列表是没有顺序的，默认样式前面带黑色圆点（可消除），遵循写的时候的顺序，是ul双标签，有子元素li标签

7. 有序列表

<ol start="6">

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

备注：有序列表是有顺序的，默认样式是带数字的，是ol双标签，有子元素li标签

8. 自定义列表

<dl>

<dt>标题或者服务的综合标题</dt>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

​

<dt>标题或者服务的综合标题</dt>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

<dd>是对dd标题的解释或者说明</dd>

​

</dl>

9.span文本标签

<span>文本内容</span>

10.换行标签

<br />

11.水平线标签

<hr />

备注：一般不使用

12.table表格标签

<tableborder="1"cellpadding="10">

<!-- thead代表表头 -->

<thead>

<!-- tr代表的是行 -->

<tr>

<!-- th代表的是表头的每一项，会有加粗的效果 -->

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th>爱好</th>

</tr>

</thead>

<!-- tbody代表的是表身 也就是表格的具体数据 -->

<tbody>

<tr>

<!-- td代表对应的表头的具体数据 -->

<td>张三</td>

<td>20</td>

<td>女</td>

<td>铅球</td>

</tr>

​

<tr>

<td>李四</td>

<td>90</td>

<td>男</td>

<td>足球</td>

</tr>

​

</tbody>

</table>

13.表单标签

<formaction=""method="get"value=""></form>

备注：form双标签 action表示数据上传的地址 method表示上传的方式 添加value属性，可以把input的属性传递给后台

用户名：<inputtype="text"placeholder="请输入用户名">

备注：type的括号内输入不同的属性实现不同的功能

text表示文本输入框 placeholder实现的功能是文本框内给用户提示信息

密码：<inputtype="password"placeholder="请输入密码">

备注：输入的密码会自动加密无法可见

性别：男<inputtype="radio"name="1"checked> 女<inputtype="radio"name="1">

备注：radio是单选属性

给到name属性产生互斥，从而使得两个选项只能同时选中一个

加了checked可以实现默认选中

爱好：篮球<inputtype="checkbox"checked> 足球<inputtype="checkbox"> 羽毛球<inputtype="checkbox">

备注：checkbox是复选属性，多个选项可以同时被选中

邮箱：<inputtype="email">

网址：<inputtype="url">

颜色: <inputtype="color">

日期: <inputtype="date">

数字：<inputtype="number">

<inputtype="reset"value="重置">

<inputtype="submit"value="提交">

备注：重置按钮和提交按钮

<selectname=""id="">

<optionvalue="唱">唱</option>

<optionvalue="跳">跳</option>

<optionvalue="Rap">Rap</option>

<optionvalue="篮球">篮球</option>

</select>

备注：下拉框，value是输出值，标签之间写显示的值

文本域：

<textareaname=""id=""cols="40"rows="10"></textarea>

备注：不常用