HTML——标签和属性
- 特殊字符
- 注释标签<!- - 注释- ->
- 标题标签<h1></h1>
- 段落标签<p></p>
- 换行标签<br />
- 加粗标签<strong></strong>或<b></b>
- 倾斜标签<em></em>或<i></i>
- 删除线标签<del></del>或<s></s>
- 下划线标签<ins></ins>或<u></u>
- 盒子标签<div>和<span>
- 图像标签<img>
- 超链接标签<a></a>
- 表格标签<table></table>
- 表头单元格标签<th></th>
- 表格结构标签<thead></thead>、<tbody></tbody>
- 无序列表标签<ul>、<li>
- 有序列表标签<ol>、<li>
- 自定义列表标签<dl></dl>、<dt></dt>、<dd></dd>
- 表单域标签<form></form>
- 输入表单元素标签<input />
- 标注标签<label></label>
- 下拉表单元素标签<select></select>
- 文本域元素标签<textarea></textarea>
特殊字符
在HTML中，一些特殊的符号很难或不方便直接使用，可以用下面的字符替代
注释标签<!- - 注释- ->
不显示在网页页面上（VSCODE快捷键Ctrl+/)
标题标签<h1></h1>
作为标题使用，h1-h6依次变小，重要性降低。
注释：标题独占一行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
</body>
</html>
段落标签<p></p>
可以把HTML文档分割为若干段落：
可根据浏览器大小自动换行、段落与段落间保有空隙。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
<p>辜鸿铭（1857年7月18日—1928年4月30日），名汤生，字鸿铭，号立诚，自称慵人、东西南北人，又别署为汉滨读易者、冬烘先生，英文名字Tomson。祖籍福建省惠安县,生于南洋英属马来西亚槟榔屿。学博中西，号称“清末怪杰”，精通英、法、德、拉丁、希腊、马来西亚等9种语言，获13个博士学位，是满清时代精通西洋科学、语言兼及东方华学的中国第一人。</p>
<p>他翻译了中国“四书”中的三部——《论语》《中庸》和《大学》，创获甚巨；并著有《中国的牛津运动》（原名《清流传》）和《中国人的精神》（原名《春秋大义》）等英文书，热衷向西方人宣传东方的文化和精神，并产生了重大的影响，西方人曾流传一句话：到中国可以不看三大殿，不可不看辜鸿铭。 </p>
</body>
</html>
换行标签<br />
使某段文字强制换行显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
辜鸿铭早在1884年发表的《中国学》一文中就指出：<br />理雅各翻译《中国经典》的工作不过是应时之需，虽然数量惊人，但并不都令人满意。
</body>
</html>
加粗标签<strong></strong>或<b></b>
加粗文字（前者比后者语义更强烈）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
这行是<strong>加粗</strong>的演示
<br />这行是<b>加粗</b>的演示
</body>
</html>
倾斜标签<em></em>或<i></i>
使文字倾斜（前者比后者语义更强烈）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
这行是<em>倾斜</em>的演示<br />
这行是<i>倾斜</i>的演示
</body>
</html>
删除线标签<del></del>或<s></s>
在文字上添加删除线（前者比后者语义更强烈）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
这行是<del>删除线</del>的演示<br />
这行是<s>删除线</s>的演示
</body>
</html>
下划线标签<ins></ins>或<u></u>
给文字添加下划线（前者比后者语义更强烈）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
这行是<ins>下划线</ins>的演示<br />
这行是<u>下划线</u>的演示
</body>
</html>
盒子标签<div>和<span>
没有语义，他们是一个盒子，用来装内容的
<div>标签用来布局，但是一行只能放一个。大盒子
<span>标签一行里可以有多个。小盒子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
<div>这是一个div标签，单独占一行</div>123<br />
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
图像标签<img>
定义HTML页面的图像
①可以有多个属性，但要写在标签名后面
②属性之间不分先后顺序，属性与属性之间空格分开
③格式：属性=“属性值”
src属性（图片路径）
src是<img>标签的必须属性，用于指定图像文件的路径和文件名，加上“/”是单标签使用习惯
语法：<img src=“图像URL” />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="1.jpg" />
</body>
</html>
相对路径
以引用文件所在位置为参考基础，而建立出的目录路径
绝对路径
目录下的绝对位置，通常是从盘符开始的路径，或完整的网络地址（右击图片可以复制图片地址）
alt属性（替换文本）
图像显示不出来的时候用文字替换
语法：<img src=“图像URL” alt=“替换文字” />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>图像标签的使用1</h4>
<img src="1.jpg" />
<h4>图像标签的使用——alt属性</h4>
<img src="1.jpg" alt="这里是一张图片" />
</body>
</html>
title属性（提示文本）
鼠标放在图片上显示的文字
语法：<img src=“图像URL” title=“提示文字” />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>图像标签的使用1</h4>
<img src="1.jpg" />
<h4>图像标签的使用——title属性</h4>
<img src="1.jpg" title="这是一张图片" />
</body>
</html>
width属性（设置宽度）
给图片设置宽度
语法：<img src=“图像URL” width=“像素值” />
注意：在没有设置高度的属性时是等比例缩放的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>图像标签的使用1</h4>
<img src="1.jpg" />
<h4>图像标签的使用——title属性</h4>
<img src="1.jpg" width="200" />
</body>
</html>
height属性（设置高度）
给图片设置高度
语法：<img src=“图像URL” height=“像素值” />
注意：在没有设置宽度的属性时是等比例缩放的
border属性（边框粗细）
设置图片边框粗细
语法：<img src=“图像URL” border=“像素值” />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>图像标签的使用1</h4>
<img src="1.jpg" />
<h4>图像标签的使用——border属性</h4>
<img src="1.jpg" border="15" />
</body>
</html>
超链接标签<a></a>
从一个页面链接到另一个页面
语法：<a href=“跳转目标” target=“目标窗口弹出方式”>文本或图像</a>
href属性（地址）
用于指定链接目标的URL地址（必须属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>超链接标签的使用</h4>
<a href="https://www.baidu.com/">百度链接</a>
</body>
</html>
外部链接
外部网站的链接
例如：https://www.baidu.com/
内部链接
网站内部页面之间的相互链接，直接链接内部页面名称即可
例如：index.html（和主页面处于同一级的html文件）
空链接
当前没有确定链接目标时使用
例如：<a href="#" >另一页</a>
下载链接
如果href里面地址是一个压缩包或文件，会下载这个文件
例如：<a href=“img.zip” >下载文件</a>
网页元素链接
在网页中的各种网页元素如文本、图像、表格、音频等都可以添加超链接
例如：<a href="https://www.baidu.com/" target="_blank"><img src=images/1.jpg></a>
锚点链接
快速定位到页面的某个位置
语法：在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">演艺经历</a>
注意：找到目标位置标签，里面添加一个id属性=名字，如<h4 id="two">演艺经历</h4>
target属性（打开方式）
用于指定链接页面打开方式，其中 _self为当前窗口打开（默认值) ，_blank为在新窗口打开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>超链接标签的使用</h4>
<a href="https://www.baidu.com/" target="_blank">百度链接</a>
</body>
</html>
表格标签<table></table>
基本语法：
<table><!-- 用于定义表格的标签 -->
<tr><!-- 用于定义表格中的行 -->
<td>单元格中的文字</td><!-- 用于定义表格中的单元格 -->
</tr>
</table>
使用实例：
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>张三</td><td>男</td><td>22</td></tr>
<tr><td>李四</td><td>女</td><td>16</td></tr>
</table>
属性（不常用）
这些属性要写到table标签里去，使用方法和前面标签的属性使用方法一样
rowspan属性（单元格跨行合并）
rowspan=“合并单元格的个数”
注意：最上侧单元格为目标单元格，写合并代码
步骤：①找到目标单元格写上合并方式=合并的单元格数量
②删除多余单元格
colspan属性（单元格跨列合并）
colspan=“合并单元格的个数”
注意：最左侧单元格为目标单元格，写合并代码
步骤：①找到目标单元格写上合并方式=合并的单元格数量
②删除多余单元格
使用实例：
<table width="500" height="250" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表头单元格标签<th></th>
一般，表头单元格位于表头的第一行或第一列，表头单元格中的文本内容加粗居中显示
单元格里面可以放任何元素，文字链接图片等都可以
使用实例：
<table>
<tr><th>姓名</th><th>性别</th><th>电话</th></tr>
<tr><td>张三</td><td>男</td><td>1234512345</td></tr>
<tr><td>李四</td><td>女</td><td>6789067890</td></tr>
</table>
表格结构标签<thead></thead>、<tbody></tbody>
使用场景：
表格可能很长，为了更好地表示表格的语义，可将表格分割成表格头部和表格主体两大部分。
注意：
①<thead></thead>用于定义表格的头部，<thead>标签内部必须要有<tr>标签，一般是位于第一行。
②<tbody></tbody>用于定义表格的主体。
③这两个标签是放在<table>标签中的
<body>
<table>
<thead>
<tr>
<th>姓名</th><th>性别</th><th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td><td>男</td><td>1234512345</td>
</tr>
<tr>
<td>李四</td><td>女</td><td>6789067890</td>
</tr>
</tbody>
</table>
</body>
无序列表标签<ul>、<li>
无序列表的各个列表项没有顺序之分，是并列的
基本语法格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意：<ul>标签中只能出现<li>标签，不能有其他标签；<li>标签中可以放任何标签
有序列表标签<ol>、<li>
有排列顺序的列表
基本语法格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
注意：与无序列表注意事项一致
自定义列表标签<dl></dl>、<dt></dt>、<dd></dd>
自定义列表常用于对术语或名词进行解释和描述
基本语法格式：
<dl> <!--用于定义列表-->
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意：<dl></dl>里面只能包含<dt></dt>、<dd></dd>
表单域标签<form></form>
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分组成。
<form>标签用于定义表单域，以实现用户信息的收集和传递
基本语法格式：
<form action="URL地址" method="提交方式" name="表单域名称">
<!--各种表单元素控件-->
</form>
action属性（地址）
用于指定接收并处理表单数据的服务器程序的URL地址
method属性（提交方式）
用于设置表单数据的提交方式，其取值为get或post
name属性（名称）
用于指定表单的名称，以区分同一个页面中多个表单域
输入表单元素标签<input />
用于收集用户信息
在<input />标签中，包含一个type属性，根据不同的属性值，输入字段拥有很多种形式
<input type="属性值" />
type属性（控件类型）
设置不同的属性值来指定不同的控件类型
type属性值及其描述：
注意：①name和value是每个表单元素都有的属性值，主要给后台人员使用
②单选按钮和复选框都要有相同的name值
使用实例：
<form>
<!-- 文本框 用户可以在里面输入任何文字 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- 密码框 用户看不见输入的密码 -->
密码：<input type="password" name="password"><br>
<!-- 单选按钮 可以实现多选一 -->
<!-- 单选按钮必须有相同的name才能实现多选一 -->
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br>
<!-- 复选框 可以实现多选-->
爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打游戏<input type="checkbox" name="hobby"><br>
手机号：<input type="text">
<!-- 普通按钮 完成一个动作，不提交数据，和JS搭配使用-->
<input type="button" value="获取验证码"><br>
<!-- 文件域 上传文件 -->
上传头像：<input type="file"><br>
<!-- checked 首次加载时被选中 -->
<input type="checkbox" checked="checked">我同意《XX协议》<br/>
<!-- 提交按钮 可以通过value改变上面的字 -->
<input type="submit" value="注册">
<!-- 重置按钮 还原默认状态，可以通过value改变上面的字 -->
<input type="reset" value="重新填写">
</form>
标注标签<label></label>
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
使用方法：
<form>
<!-- for属性应当与相关元素的id属性相同 -->
<input type="checkbox" name="sex" id="sex"><label for="sex">男</label>
</form>
下拉表单元素标签<select></select>
在页面中，如果有多个选项让用户选择，并且想节约页面空间时，可以使用<select>定义下拉列表
基本语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意：①<select>中至少包含一对<option>
②在<option>中定义selected="selected"时，当前项即为默认选择项
文本域元素标签<textarea></textarea>
<textarea>标签用于定义多行文本输入的控件
个人介绍：<br>
<textarea rows="3" cols="20">请输入个人介绍</textarea>
注意：①cols=“每行中的字符数”，rows=“显示的行数”
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
