html 以及html5 的一些属性

1：HTML概述
HTML: 超文本标记语言 Hyper Text Markuop Language
简单理解为我们常见的网页，HTML也被叫做网页
Html是一种语言，由大量的标签组成，文件的后缀名是XX.html
Html文件运行在浏览器上，
超文本：文本，图片，视频，音频。流媒体等等、
标记：html语法标签<标签>
2：html与其他语言之间的关系

四：html基础：
1：标签书写
<标签名>用尖括号包裹标签名
1：双标签：成对出现的标签<标签名></标签名> 开始标签和结束标签组成
2：单标签：只有一个标签<标签名> html5版本之后单标签可以不加斜线
单标签需要标签属性搭配完成的功能，个别可以单独使用
2：页面的创建规则：

3：html文件中的注释

既可以注释单一标签，又可以注释很多标签
在vscode中提供了快捷注释方法 ctrl+? 第一次可以注释，第二次消除注释

4：标签和元素
标签：<标签名></标签名>
元素：增加了功能属性或者内容的标签就是元素

5：元素的分类

5:基础标签
1：标题标签

2：段落标签

3：换行标签br

4：按钮标签button

5：div标签

6：span标签

7：加粗和斜体

8:html的其他规则
1：原则上，块级元素可以包裹文字和内联元素，有特例：h1~h6，p，dt…
2: 缩进在编辑器中，出现嵌套元素，子元素在父级元素内缩进，vscode有格式化方式
3：在编辑器上书写多个空格或者回车，都代表页面上的一个空格，因此，需使用转移字符串表示被占用的符号，也叫做html实体符号

五：html标签属性
一个元素是由标签+属性+内容组成的
属性分为全局属性，特殊属性，自定义属性
1：全局属性值-----style 样式属性
相同的属性名在一个标签中只能出现一次，但是他可以是多个值，值要写在=后面的双引号中，需要写css属性

2：id属性
Id属性在一个页面中（html文件）一个元素，只能有唯一一个id属性和属性值，该表示在当前文件中不能重复，命名尽量有意义，值不能以数字开头

3：class类属性
类属性的值，可以很多元素共用，共用的元素具有相同的类属性
一个元素可以有多个类，class属性后引号里可以放置多个类名，用空格分开
类名不允许数字开头
类属性常用于css样式获取元素使用

六：功能标签和URL
1：超链接标签

2：锚点：
通过a标签的href，在同一个页面上找元素
要找一个元素，需要通过元素的ID属性找
通过锚点找id必须在id前加#
a

锚点

3：空连接
a标签存在默认事件就是跳转，如果不想让a标签出现默认跳转，必须写空连接阻止跳转事件

4：新建窗口

七：
图像嵌入标签
Img标签：

Src：图片文件的路径,img,png,gif,jpeg…
路径和a标签路径一样可以使用绝对路径和相对路径
Alt属性是对图片的描述，该属性便于图片的抓取，可以不写
Img属于行内块元素，可以通过独立的宽度属性来设置自己的图片宽度，设置宽度后，高度会自动按比例放大缩小

八：列表标签
列表标签应用非常广泛
分为三种：有序，无序，自定义
1：有序列表

在列表标签内部的第一层，也就是列表标签的直接子元素，只能是LI标签

2：无序列表

Ul和ol都有自定义的间距，需要去除 Ul和ol列表项前都带有标识可去除 3：自定义列表 标题和列表项都在列表标签中

![

标题智能放文字 标题

1

列表项

2

3

](https://img-blog.csdnimg.cn/f67ba367d7e34b8b9bb157416be1614b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_16,color_FFFFFF,t_70,g_se,x_16)

嵌套列表
列表的嵌套使用，使用ul和ol都可以，没规定谁先谁后

九：表格
Table 表格：常用pc端界面，多种表的展示，如：购物车，后台人员名单，后台商品管理
Table 标签内部有自己的组合方式
1：简单组合
表格中只分行tr和列td
行是包着列的
Table>tr>td 实际的内容写在列里面
2：带表头的表格
table border = “1px”
边框：数字代表像素
Table中有间隙，因此在table中使用
style = “border-collapse:collapse”
可以去除间隙

3：可合并单元格的表格
合并列的属性，既然写给单元格，属性都应该给列（单元格），是第一个列将后面多个列给了自己｛横着合并｝

![
讲台
//合并行

过道 //合并列](https://img-blog.csdnimg.cn/46a3f126114c444d977b255b3db6c4f0.png)

十：表单：

2：文本框
Input：行内块元素，可以由用户输入各种数据，可以通过宽度高度调整自身样式，文本框是input标签type类型为text

3：密码输入框
输入密码文字，会有隐化效果，不会让旁边的人知道密码

4：单选框
单选框必须做到多选其一，

5：多选：

6：文件上传

7：表单的相关按钮：

H5：
8：数字输入框

9：范围空值：

10:颜色控件

11：日期控件

12：标记标签

13：菜单标签：
![

菜单项一 菜单项二 菜单标签不能单独存在，在select内要有多个菜单项 想多选，给select加multiple属性，按住ctrl多项选择](https://img-blog.csdnimg.cn/e99d770b3d304986b555a488a2f48490.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_15,color_FFFFFF,t_70,g_se,x_16)

14：文本域
![<textarea name="" id="" cols=“30” rows=“10” style=“resize:none”

一般用于聊天室输入，评论文字，文章录入等，
和一般的input文本框的区别是：文本域可以写多行
右下角可以默认由用户进行大小的拖拽，破坏页面布局
如果不需要用户进行大小拖拽，文本域需要进行样式属性：style=“resize:none”
Cols和rows可以不写，直接使用宽度高度设置](https://img-blog.csdnimg.cn/3d1229e0c3d84720bad901d904d9423d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_20,color_FFFFFF,t_70,g_se,x_16)

十一：内联框架：程序调用静态页面时比较方便，不是所有页面都能嵌入，有额外的连接，请求次数增加，样式不好控制

十二：结构化标签：
1：语义化功能
大多数标签都有语义化的功能，便于搜索引擎抓取页面内容，
Html5：新增的内容，新增的标签，语义化的结构标签，
功能标签，视屏标签，音频标签，画面标签

2：部分新增的语义化结构标签

导航标签

页头标签

页尾标签 以上三种没有任何样式，普通的块级标签