1.结构介绍
1.标签的分类
<单词> ：元素标签 <元素 单词>：首先<>中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签
2.文本元素
- 段落元素 1. 段落元素
- 换行标签 br
- 水平线标签 1. ---标签会在页面上产生一个水平线2. 常用属性 1. align：可取值有left right center 代表水平线位置2. size： 代 表 水 平 线 厚 度 （ 粗 细 ）3. width：代表水平线宽度4. color：水平线的颜色
- 分区标签 1. div是一个块标签，用来进行布局的；独占一行！2. div与span都是“容器”的作用，具体区别: 1. div会自动换行，我们也叫这样的标签为块级元素2. span标签它不会自动换行，我们也叫它为行内元素3. div：整体划分区块4. span：局部划分
3.字体标签
- 字体标签 1. 标签可以设置字体，字的大小及颜色，常用属性： 1. face:用于设置字体2. size:用于设置字的大小3. color:用于设置字的颜色 1. 英文：red，blue等2. 十六进制：#000000-#FFFFFF3. RGB颜色表示
- 标题标签 1-6号大小不同
- 格式化标签 1. ：字体加粗2. ：字体倾斜3. ：删除线4. ：下划线
4.列表标记 ol：有序列表 1. type='A'：字母排序2. type='I'：罗马排序3. start=“3” 序列从几开始
- ul：无序列表 1. type="disc"：默认，实心圆2. type="square"：方块3. type="circle"：空心圆
5.多媒体元素
- 图片标签：image 1. 的常用属性
- src的三种类型 1. 文件地址2. data URL3. object URL2. width 图片的宽度3. height 图片的高度4. border 用于设置图片的边框5. alt 默认显示的文本信息6. title 鼠标悬停，默认显示的文本信息7. align 图片附件文字的对齐 1. left：2. right3. middle4. top5. bottom
- 视频标签：video width 宽 controls 进度条
- 音频标签：audio 与视频标签类似
6超链接标签
- 锚，超链接（anchor） 1. 超链接文本2. 图片标签3. target属性：规定在何处打开连接 1. _blank 新窗口打开2. _self，默认，在本窗口打开4. 地址分为 1. 本地网址2. 互联网网址3. 页面内锚点
7.表格
- ：定义一个表格1. border：边框，取值是像素为单位2. width 代表的表格的宽度3. align 代表表格的对齐方式 1. left2. right3. center4. cellspacing：单元格间距（通常设置0表示单线表格)
- align2. left3. right4. center
- colspan 指示列的合并
- rowspan 指示行的合并
：表格中的行 （Table Row）：表格中的数据单元格 （Table DataCell)
8表单标签
- 负责向后端提交数据 - 登录- 注册
- action：整个表单提交的目的地
- method：表单提交的方式 1. get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）2. post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
- enctype：数据格式
9.表单中的元素(控件)
- 元 素 的 type 属 性 1. text：默认值，普通的文本输入框 1. placeholder属性：提示文本2. maxlength属性：最多能输入字符数量2. password：密码输入框3. checkbox：多选框/复选框1. checked：默认选中4. radio：单选按钮5. file：上传文件6. reset：重置按钮7. submit：提交按钮8. button：普通按钮
- ：下拉列表/下拉框 1. 1. selected：默认选中
- ：文本域 1. 可以通过 cols 和 rows 属性来规定行数和列数
- ：按钮 1. 在form表单中，作用和submit一样2. 不在form表单中，就是普通按钮
- : 元素标签 1. 与控件形成关联，为 input 元素定义标注（标记）2. for中的内容与控件中的id关联。
- 小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="" method="POST"> <label for="">账号：</label> <input type="text" name="account"> <br><br> <label for="">密码：</label> <input type="password" name="password"> <br><br> <label for="">性别：</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <br><br> <label for="">爱好：</label> <input type="checkbox" checked name="hobby" value="lanqiu">篮球 <input type="checkbox" name="hobby" value="zuqiu">足球 <input type="checkbox" name="hobby" value="paobu">跑步 <br><br> <label for="">生日：</label> <input type="date" name="brithday"> <br><br> <label for="">邮箱地址：</label> <input type="email" name="email"> <br><br> <label for="">电话：</label> <input type="tel" name="tel"> <br><br> <label for="">地址：</label> <select> <option value="shanxi">山西省</option> <option value="jiangsu">江苏省</option> <option value="shanghai">上海市</option> </select> <label for="">验证码：</label> <input type="text"><button>获取验证码</button> <br><br> <!-- <input type="button"> --> <label for="">备注：</label> <textarea name="description" id="" cols="30" rows="10"></textarea> <br><br> <input type="checkbox">同意<a href="#">《隐私条款》</a>和<a href="#">《隐私权相关政策》</a> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <br><br></form></body></html>
10.HTML5新特性
10.1新特性
- 大小写不敏感 1. 对于标签、属性、属性的值大小写都可以，没有影响
- 引号可省略
<input type="password"> <input type=password>
- 省略了结尾标签 1. html是自动补全了
10.2 新增语义化标签
html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此 新增许多语义化标签，让div“见名知意”
- section标签：表示页面中的内容区域，部分，页面的主体部分
- article标签：文章
- aside标签：文章内容之外的，标题
- header标签：头部，页眉，页面的顶部
- hgroup标签：内容与标题的组合
- nav标签：导航
- figure标签：图文并茂
- foot：页脚，页面的底部
10.3媒体标签
于3.0多媒体标签中，这里补充一下属性
- autoplay：自动播放（谷歌失效，360浏览器可以）
- loop：循环播放
10.3新增表单空间
- ，修改type属性 1. color：调色板2. date：日历3. month：月历4. week：周历5. number：数值域 1. min：最小值（默认值是1）2. max：最大值（默认值无上限）3. step：递增量6. range：滑块7. search：搜索框 1. （带×号，可一键删除框中内容） 进度条2. 高亮3. 模糊查找
本文转载自: https://blog.csdn.net/weixin_51721783/article/details/141365478
版权归原作者 为美好的生活献上中指 所有， 如有侵权，请联系我们删除。
版权归原作者 为美好的生活献上中指 所有， 如有侵权，请联系我们删除。