这篇文章主要介绍平时写代码过程中常用的HTML标签、常用的属性以及它们的使用场景，对于标签的分类我是根据自己平时使用习惯来分类的，所以与标准分类可能有些不同。至于其他标签与属性，可以查阅文末的参考链接。

文章标签

主要包含标题标签、段落标签以及换行标签和分割线标签

标题标签

<h1>-<h6>

图片

段落标签

<p>用来存放大段文字</p>

换行标签

单标签，常用来处理文章换行

<br>

分割线标签

单标签，常用来将标题与文章内容分隔开

【标签】<hr>
【属性】
        size：尺寸，取值单位为 px（像素），可以省略
        width：宽度，取值单位为px（像素）可以省略或百分比
        color：颜色，取值自然颜色值
        align：水平对齐方式，取值：left/center/right

文章示例代码

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4	<meta charset="UTF-8">
 5	<title>文章</title>
 6</head>
 7<body>
 8	<h1>主标题</h1>
 9	<h2>副标题</h2>
10	<hr>
11	<p>大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本	<br>	  
12    大段文本大段文本大段文本大段文本大段文本大段文本大段文本<br>
13	   大段文本大段文本大段文本大段文本大段文本大段文本大段文本</p>
14	<p>大段文本大段文本大段文本大段文本大段文本大段文本</p>
15</body>
16

内容标签

列表标签

有序列表：ol+li  默认样式：1. 2. 3.
无序列表：ul+li  默认样式：实心圆点
描述列表：dl+dt+dd

预格式标签

<pre></pre>  保留空格换行

图像标签

单标签，常用属性有：alt/height/width/src

属性值 作用
alt 文字 图片无法展示时用于说明的文字
height px 定义图片的高度，只写高度则宽度自适应
width px 定义图片的宽度，只写宽度则高度自适应
src 图片的地址 指定图片来源

注意： 永远不要让图片变形（即同时改变宽度和高度）

与图片相关的事件
  • 事件：onload/onerror
    • 用于监听图片是否加载成功，加载成功调用onload，不成功调用onerror
  • 代码示例
 1<img src="dog.png" id="xxx" alt="dog">
 2<script>
 3    xxx.onload = function() {
 4        console.log("图片加载成功");
 5    }
 6    xxx.onerror = function() {
 7        console.log("图片加载失败");
 8        xxx.src = "./404.png"; //挽救图片
 9    }
10</script>
  • 图片响应式：max-width:100%

超链接标签

对于a标签，重点需要掌握href取值和target常用值(_self/_blank)

【href 的取值】
    网址
        1.https://google.com
        2.http://google.com
        3.//google.com (无协议网址：自动选择http还是https)
    路径
        1./a/b/c 以及 a/b/c
            注意：如果开启了http服务，则在哪里开启服务那里就是根目录
        2.index.html 以及 ./index.html
    锚点
        href="#xxx"  xxx为元素id
    伪协议
        javascript:代码;
        点击 a 标签执行代码
        常用空的代码：href="javascript: ;"
        如果href=""，点击a标签时页面会刷新
        如果href="#"，点击a标签时页面会自动滚动到顶部
    mailto:邮箱
    tel:手机号

锚点定位（重点）

步骤一：使用相应的id名标注跳转目标的位置
<h3 id="two">目标</h3>
步骤二：<a href="#two"></a>

表格标签

由table标签定义。


【标签】<table></table>
【属性】
        width ：设置表格的宽度px
        height：设置表格的高度px
        align：设置表格的对齐方式，取值: left/center/right
        border：设置表格边框宽度
        cellpadding：内边距（单元格边框与内容之间的距离）默认为1px
        cellspacing：外边距（单元格之间的距离）默认为2px
        bgcolor：设置表格的背景颜色

一图胜千言

<table></table>中包含的子元素：
    【标签】<tr></tr> （创建表行）
        【属性】
            align：该行内容水平对齐方式，取值: left/center/right
            valign：该行内容的垂直对齐方式，取值: top/middle/bottom
            bgcolor：设置表格的背景颜色
    【标签】<td></td> （创建单元格）
        【属性】
            align：内容水平对齐方式
            valign：内容垂直对齐方式
            width ：宽度
            height ：高度
    【标签】<caption></caption> （表格标题），必须紧随<table>标签
    【标签】<th></th> （列标题）
        行标题或列标题，字体有加粗的效果，放在tr中
    【标签】<thead></thead> （表头）
    【标签】<tbody></tbody> 表主体）
    【标签】<tfoot></tfoot> （表尾）

合并单元格（重点）

 跨行合并：rowspan = "合并单元格的个数"

 跨列合并：colspan = "合并单元格的个数"
合并单元格三部曲
1.确认跨行还是跨列

2.根据先上后下、先左后右的原则找到目标单元格

3.删除多余的单元格

备注

对于复杂的表格，又将表格分为三部分：题头（thead）、正文(tbody)、脚注(tfoot)，其中thead中必须有tr标签

完整的表格代码

 1<table>
 2    <caption>标题文本</caption>
 3    <thead>
 4        <tr>
 5            <th>姓名</th>
 6            <th>性别</th>
 7        </tr>
 8    </thead>
 9    <tbody>
10        <tr>
11            <td>张三</td>
12            <td>男</td>
13        </tr>
14        <tr>
15            <td>李四</td>
16            <td>女</td>
17        </tr>
18    </tbody>
19    <tfoot>
20        <tr>
21            <td>统计</td>
22            <td>分数</td>
23        </tr>
24    </tfoot>
25</table>

表单标签

由form标签定义，将用户输入的数据提交给后台。

【常见属性】
        action：提交的服务器地址
        method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
        name：定义表单名称，JS用到的比较多
        id： 独一无二的标识
如：<form action="url" method="get/post"> </form>

input元素

【语法】
    <input type="text" value="hhh"> 
    #value表示显示在文本框中的值，用户输入的时候需要删除

【主要属性】
        type：根据不同的type属性值可以创建各种类型的输入字段
        value：最终提交给服务器的值
        name：控件的名称，提供给服务器使用，没有name，控件则无法提交
        id：唯一标识，只能在当前页面使用，服务器不能用
        disabled：禁用，不能被提交
常用的表单控件
（1）文本框：<input type="text">
（2）密码框：<input type="password">
    【专有属性】
        maxlength：限制输入的字符数，取值：数字
        readonly：设置文本控件只读
（3）单选按钮：<input type="radio">
（4）复选框：<input type="checkbox">
        【专有属性】
        checked，设置默认被选中
（5）提交按钮：<input type="submit">
（6）重置按钮：<input type="reset">
（7）普通按钮：<input type="button">
（8）图片按钮：<input type="image" src=""> 
（9）隐藏域：<input type="hidden">
（10）文件选择框：<input type="file">
按钮（提交按钮）
<button>内容</button>
下拉选择框select 和 option
<section name="">
  <option value="" selected></option>
</section>

注意： 只要存在selected便表示选中，不管后面的值是什么

label标签(理解)

作用： 当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面

第一种用法： 用label直接包括input表单(适合单个表单选择)

<label> 用户名： 
        <input type="radio" name="usename" value="请输入用户名">  
</label>

第二种用法： for 属性规定 label 与哪个表单元素绑定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

textarea控件(文本域)

<textarea>多行文本输入框</textarea>

    cols="每行中的字符数" rows="显示的行数"

    用resize: none;来控制文本域不能被用户拉伸，避免破坏页面布局

全局属性

所有标签都具有的属性

image-20200602111949596

参考链接