HTML标签的学习和查阅可以通过 w3school 来学习，这里我记录下学习HTML中常用的标签。
1.标题标签<h1> -- <h6>
格式：
<h1> 我是一级标题 </h1>
标签语义：作为标题使用，并且依据重要性递减。代码示例如下：
image.png
2. 段落和换行标签
格式：
<p> 我是一个段落标签 </p>
标签语义：可以把HTML文档分割为若干段落。代码示例如下：
image.png
【 特点: 】
①.文本在一个段落中会根据浏览器窗口的大小自动换行；
②. 段落和段落之间保有空隙。//换行标签 <br />
标签语义：强制换行。【 特点: 】
① <br /> 是个单标签
② <br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3. 文本格式话标签
语义 标签 说明 加粗 <strong> </strong> 或<b> </b> 更推荐使用<strong>标签加粗 语义更强烈 倾斜 <em> </em> 或<i> </i> 更推荐使用<em>标签倾斜 语义更强烈 删除线 <del> </del> 或 <s> </s> 更推荐使用<del>标签设置删除线 语义更强烈 下划线 <ins> </ins> 或<u> </u> 更推荐使用<ins>标签设置下划线 语义更强烈
标签语义：突出重要性，比普通文字更重要。示例代码：
<body> 我是<strong>加粗</strong>文字1 我是<b>加粗</b>文字2 我是<em>倾斜</em>的文字1 我是<i>倾斜</i>的文字2 我是<del>删除线</del>1 我是<s>删除线</s>2 我是<ins>下划线</ins>1 我是<u>下划线</u>2 </body>加上<br />后查看效果如下所示：
image.png
4. <div>和<span>标签
格式：
<div>这是div盒子</div> <span>这是span盒子</span>
标签语义：无语义，它们就是一个盒子，是用来装内容的。
代码示例如下：<div>这是div盒子</div> <div>这是div盒子02</div> <div>这是div盒子03</div> <span>这是span盒子</span> <span>这是span盒子02</span> <span>这是span盒子03</span>运行效果如下所示：
image.png
【 特点: 】
① <div>标签用来布局，但是独占一行，只能放一个<div> ；大盒子
② <span>标签用来布局，一行可以多个<span>。小盒子
5. 图像标签
格式：
<img src="图像地址">
标签语义：它是一个图像标签，用来展示图片。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时，展示的文字 title 文本 提示文本。鼠标放到图像上，显示的文字 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细 示例代码：
<body> <p>图像标签的使用</p> <img src="source/image.png" /> <p>图像标签的alt属性</p> <img src="source/xxxx.png" alt="替换文本。图像不能显示时，展示的文字"/> <p>图像标签的title属性</p> <img src="source/image.png" title="提示文本。鼠标放到图像上，显示的文字 "/> <p>图像标签的width属性</p> <img src="source/image.png" width="100"/> <p>图像标签的height属性</p> <img src="source/image.png" height="100"/> <p>图像标签的border属性</p> <img src="source/image.png" border="15"/> </body>【 特点: 】
① 图像标签可以拥有多个属性，必须写在标签名的后面；
② 属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开；
③ 属性采取键值对的格式，即key = "value" 的格式，属性= "属性值"。
6. 超链接标签
格式：
<a href="跳转目标" target="目标窗口的弹出方式"> 百度一下，你就知道 </a>
标签语义：用户定义超链接，作用是从一个页面链接到另一个页面 。
属性 作用 href 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它具有了超链接的功能。 target 用于指定链接页面的打开方式，其中_self 为默认值，_blank为在新窗口中打开方式。 代码示例如下：
<a href="https://www.baidu.com" target="_self"> 百度一下，你就知道 </a> <a href="https://www.qq.com" target="_blank"> 腾讯 </a> <a href="公司简介.html" target="_blank"> 内部连接跳转 </a> <a href="#"> 空连接 </a> <a href="image1.zip"> 下载链接 </a> <a href="https://www.baidu.com"> <img src="image1.png"/> </a> <a href="#education-experience"> 求学经历 </a> <h4 id="education-experience"> 求学经历 </h4>【 链接分类 : 】
① 外部链接： 如<a href="https://www.baidu.com" target="_self"> 百度一下，你就知道 </a>
② 内部连接：网站内部页面直接的相互连接，直接连接内部页面名称即可，如：<a href="公司简介.html" target="_blank"> 内部连接跳转 </a>
③ 空连接：未确定连接目标时 ，如：<a href="#"> 空连接 </a>
④ 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。如：<a href="image1.zip"> 下载链接 </a>
⑤ 网页元素连接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。如：<a href="https://www.baidu.com"> <img src="image1.png"/> </a>
⑥ 锚点连接：点击链接，可以快速定位到当前页面中的某个位置。
- 在连接文本的href属性中，设置属性值为
#名字的形式，如：<a href="#education-experience"> 求学经历 </a>- 找到目标位置标签，里面添加一个id属性=刚才设置的名字，如：
<h4 id="education-experience"> 求学经历 </h4>
注意
相对路径 符号 说明 同一级路径 图像文件维护HTML文件同一级 如: <img src="image1.png" /> 下一级路径 / 图像文件位于HTML文件下一级 如: <img src="source/image.png" /> 上一级路径 ../ 图像文件文娱HTML文件上一级 如: <img src="../image.png" />
7. 注释标签
格式：
<!-- 我是注释文本 -->
标签语义：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。
【 特点: 】 快捷键：command/ctr + /
8.特殊字符
标签语义：在HTML中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的特殊字符来替代 。
特殊字符 描述 字符的代码 空格符 < 小于号 <> 大于号 >& 和号 &¥ 人民币 ¥© 版权 ©® 注册商标 ®º 摄氏度 °± 正负号 ±× 乘号 ×÷ 除号 ÷² 平方2(上标2) ²³ 立方3(上标3) ³代码示例如下：
空 格 段落标签<p>
9.表格标签
格式：
<table> <tr> <td>单元格内的文字</td> </tr> </table>
标签语义：表格是用来展示数据的。
【 特点: 】
①<table> </table>是用于定义表格的标签；
②<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>表标签中；
③<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>行标签中；
④ 字母td指表格数据(table data)，即数据单元格的内容。【 属性:(实际开发不常用，通常是通过css开设置表格属性) 】
属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。 border 1或“” 规定表格是否拥有边框，默认为“”，表示没有边框。 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格之间的空白，默认2像素。 width 像素值或百分比 规定表格的宽度。 代码示例如下：
<table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>西施</td> <td>女</td> <td>20</td> </tr> <tr> <td>王昭君</td> <td>女</td> <td>18</td> </tr> <tr> <td>貂蝉</td> <td>女</td> <td>16</td> </tr> <tr> <td>杨玉环</td> <td>女</td> <td>22</td> </tr> </table>运行效果如下：
image.png
【 扩展: 表格的其它常用属性 】
①<tr> </tr>表格的头部行，默认加粗显示；
②<thead> </thead>表格的头部区域；
③<tbody> </table>表格的主体区域；【 表格的合并操作 】
image.png
image.png
- 合并单元格三部曲：
① 先确定是跨行还是跨列合并；
② 找到目标单元格，写到合并方式 = 合并的单元格数量；
③ 删除多余的单元格。
合并单元格示例代码：<table align="center" border="1" cellpadding="10" cellspacing="0" width="500" height="200"> <tr> <td></td> <td colspan="2"></td> <!-- <td></td> --> </tr> <tr> <td rowspan="2"></td> <td ></td> <td></td> </tr> <tr> <!-- <td></td> --> <td></td> <td></td> </tr> </table>
10. 列表标签
表是用来展示数据的，那么列表是用来布局的。
列表最大特点是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类，有序列表、无序列表 和 自定义列表。(1). 无序列表(重点)
英文叫做unordered list ，所以标签是取取这个词组的首字母ul来表示无序列表。格式：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
标签语义：<ul>一般会以项目符号呈现列表项，而列表项使用<li>标签定义 。代码示例如下：
<ul> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> </ul>【 特点: 】
① 无序列表的各个列表项之间没有顺序级别之分，是并列的。
②<ul> </ul>中只能嵌套<li> </li>，直接在<ul> </ul>标签中输入其它标签或者文字的做法是不被允许的。
③<li> 与 </li>之间相当于一个容器，可以容纳所有元素。
④ 无序列表会带有自己的央视属性，但在实际使用时，我们会用CSS来设置。(2). 有序列表(理解)
英文叫做 ordered list，所以标签也是取这个词组的首字母ol，有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。格式：
<ol> <li>有序列表项1</li> <li>有序列表项2</li> <li>有序列表项3</li> ...... </ol>代码示例如下：
<ol> <li>刘德华</li> <li>张学友</li> <li>黎明</li> <li>郭富城</li> </ol>【 特点: 】
①<ol> </ol>中只能嵌套<li> </li>，直接在<ol> </ol>标签中输入其他标签或者文字的做法是不被允许的；
②<li> </li>之间相当于一个容器，可以容纳所有元素；
③ 有序列表会滴啊有自己央视属性，但在实际使用时，我们会使用CSS来设置。(3). 自定义列表（重点）
英文叫做definition list，所以标签也是去这个词组的首字母dl来表示自定义列表。格式：
<dl> <dt>名词1</dt> <dd>名词1 解释1</dd> <dd>名词2 解释2</dd> </dl>
标签语义：<dl>标签用于定义描述列表，该标签会与<dt>和<dd>一起使用。代码示例：
<dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl>【 特点: 】
①<dl> </dl>里面只能包含<dt>和</dd>;
②<dt>和</dd>个数没有限制，经常是一个<dt>对应多个<dd>。
小结
标签名 定义 说明 <ul> </ul> 无序标签 里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签 <ol> </ol> 有序标签 里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签 <dl> </dl> 自定义列表 里面只能包含dt和dd，dt和dd里面可以放任何标签
11.表单标签
格式：
表单域是一个包含表单元素的区域。在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
标签语义：<form>会把它范围内的表单元素信息提交给服务器。常用属性：
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址。 method get/post 用于设置表单数据的提交方式，其取值为get或post name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。 代码示例如下：
<form action="demo.php" method="post" name="name1"> </form>
12.表单控件- input输入表单元素
格式：
<input type="属性值" />
标签语义：<input>标签用于收集用户信息。代码示例如下：
<form> 用户名：<input type="text"> <br> 密码： <input type="password"> <br> </form>【 特点: 】
① <input/>标签为单标签；
② type属性设置不同的属性值，用来指定不同的控件类型；type常用属性值：
属性值 描述 button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。 checkbox 定义复选框。 file 定义输入字段和”浏览“按钮，供文件上传 。 hidden 定义隐藏的输入字段。 image 定义图像形式的提交按钮 。 password 定义密码字段，该字段中的字符被掩码。 radio 定义单选按钮。 reset 定义重置按钮。重置按钮会清除表单中的所有数据。 submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 示例代码：
<form action="xxx.php" method="get"> 用户名：<input type="text" name="username" value="请输入用户名"> <br> 密码： <input type="password" name="password"> <br> <!-- type=radio 必须有相同名字的name,才可以实现多选一 --> 性别： 男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br> 爱好：体育 <input type="checkbox" name="hobby" value="体育"> 新闻 <input type="checkbox" name="hobby" value="新闻" checked="checked"> <br> <!-- 提交按钮，把表单域form里面的表单元素里面的值，提交给后台服务器 --> <input type="submit" value="提交"> <!-- 重置按钮可以还原表单元素初始的默认状态 --> <input type="reset" value="重写"> <!-- 普通按钮 --> <input type="button" value="获取验证码"> <br> <!-- 文件域 上传文件使用 --> 上传头像：<input type="file"> </form>input标签其它属性值：
属性 属性值 描述 name 用户自定义 定义input元素的名称。 value 用户自定义 规定input 元素的值。 checked checked 规定此input元素首次加载时应当被选中。 maxlength 正整数 规定输入字段中的字符的最大长度。 示例代码：
<form> 用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br> 密码： <input type="password" name="password"> <br> <!-- type=radio 必须有相同名字的name,才可以实现多选一 --> 性别： 男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br> 爱好：体育 <input type="checkbox" name="hobby" value="体育"> 新闻 <input type="checkbox" name="hobby" value="新闻" checked="checked"> </form>
小结
① name和value是每个表单元素都有的属性值，主要是给后台人员使用。
② name表单元素的名字，要求单选按钮 和 复选框要有相同的name值。
③ checked属性主要针对单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素。
④ maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
13.表单控件- label标签 表单元素
格式：
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)跳转到对应的表单元素上，用来增加用户体验。<label for="sex">男 </label> <input type="radio" id="sex">代码示例如下：
<label for="male">男 </label> <input type="radio" name="sex" id="male"> <label for="female">女 </label> <input type="radio" name="sex" id="female">【 核心: 】
<label>标签的for属性应当与相关元素的id属性相同。
14.表单控件- select下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
语法：<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>代码示例如下：
<form> <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option selected="selected">选项4(默认选中)</option> </select> </form>【 特点: 】
① <select> 中至少包含一对<option>
② 在<option>中定义selected=”selected“时，当前项即为默认选中项。
15.表单控件- textarea文本域表单元素
使用场景：当用户输入内容较多的情况下，我们需要使用<textarea>标签。该控件常见于留言板，评论等。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
语法：<textarea rows="3" cols="20"> 文本内容 </textarea>代码示例如下：
<form> 今日反馈： <textarea rows="3" cols="20"> </textarea> </form>【 特点: 】
① 通过 <textarea>标签可以轻松地创建多行文本输入框。
② cols = ”每行中的字符数“，rows=”显示的行数“，我们实际开发中不会使用，都是CSS来改变大小。
......
网友评论