一、HTML介绍
1、HTML是网络的骨架
HTML 是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建网页结构的标记语言。
2.HTML的作用
实现网页文本、图像、链接等元素的排版和展示。
二、前端开发工具
1、解释器
- 各样的浏览器。
前端代码（HTML、CSS、JavaScript）是在浏览器中解释和执行的，浏览器会将这些代码转换成网页内容，并在用户的浏览器上运行。
2、编辑器
- 各种各样的文本编辑器都可以。
前端开发中的编辑器通常指的是用于编写HTML、CSS和JavaScript等前端代码的工具。
-
常用：
-
VSCode：强大的拓展能力；可以用于各种编辑语言的开发；只需要安装 对应的插件。
-
安装好后可安装simple chinese汉化。
-
插件live server是前端轻量服务器，用于展示HTML页面，可以热更新，保存之后效果立马更改，不需要重新运行。
三、HTML标签
1、基础标签
- html：根标签
- head：头标签
- body：身体标签
2、行块标签
- div：块标签，铺满多行
- h1~h6：一级到六级标题；行级元素，铺满一行；表现：字体大小变化、加粗、加黑、有行距。
- p：段落；行级元素；表现：有行距。
- span：隔离标签；行内元素。
- br：强制换行。
- hr：水平分割线。
3、文本标签
- b/strong：粗体。
- i/em：斜体。
- del：删除线。
- u：下划线。
- sub：下标。
- sup：上标。
4、列表标签
- ol：有序标签；块级标签；表现：内部多使用li、有序号、铺满一行、有上下行距、左侧有内补。
- ul：无序列表；块级标签。
- li：列表项目；一般不会单独存在。
- dl：自定义列表；块级元素。
- dt：自定义列表项。
- dd：自定义列表项说明；与dt同级，一般写在dd下方；缩进出现；可以没有。
5、表格标签
- table：表格标签；外框架；行内元素；支持嵌套。
- table的标签属性：
- border：外边框
- cellspacing：单元格之间大小
- cellpadding：单元格中字体与单元格之间的距离
- width：表的宽度，可用%或px为单位
- align：表的位置，例：center、right
- tr：每一行；外框架的下一层。
- th：表头单元格；表现：加粗。
- td：普通单元格。th与td同级。
- th/td的标签属性：
- rowspan：列合并
- colspan：行合并
- align：位置
6、媒体标签
- a：超级链接；点击其中内容，跳转到其他网址。
- herf：连接地址：支持外部服务器和内部服务器。
- target：
- _blank：新空白页打开
- _self：默认空白页打开
- id：锚点；herf要以#开头，内容和目标元素上的id属性一致。
- img：图片。
- src：图片来源
- 图片地址
- 本地地址
- 其他服务器地址
- alt：图片加载失败信息
- src：图片来源
- audio：音频
- src：音频地址；网络地址；本地地址
- controls：控件
- autoplay：自动播放
- video：视频
- src：视频地址；本地地址；网络视频
- controls：控件；显示。
7、iframe：内联框架
- 嵌入其他页面：网络地址；本地地址。
- src：地址路径。
- 第一次请求原始页面，第二次请求iframe页面。
- 有width、height属性
8、表单标签
可以将用户输入的数据提交到服务器。- 表单域：form
- action：服务器地址
- method：提交方式
- get： 默认是get，参数是以？key=value&key=value......的形式拼接；测试地址：http://httpbin.org/get；提交内容会显示在预览数据的args中，且会显示在网址上；
- post：参数是以表单数据进行提交；测试地址：http://httpbin.org/post；提交内容会显示在预览数据的form中，不会显示在网址上。
表单标签：
- input：一般配合lable使用，lable的for参数需要和input的id一致。
- type：
- text：文本
- password：密码
- submit：提交
- reset：重置
- radio：单选
- checkbox：多选
- color：颜色
- file：文件
- input的属性
- placeholder：提示信息
- require：必填项目
- checked：默认选中，单选和多选都可
- selected：下拉默认选中
- 隐藏项：看不见的也会递交到服务器上
- type为hidden；name：csrf_token; value：口令；
- type：
- select：下拉选项
- name写在option上
- 结合option，value写在option上
- textarea：多行输入框。
- input的value就是需要提交给服务器的值
当type等于text、password之类可以输入内容，不需要写value
radio、checkbox需要写value - 表单按钮：input
- submit：提交
- reset：重置
9、语义化标签
- header：头部
- nav：导航栏
- footer：底部栏
- main：主体
- section：区域
- artical：文章
- aside：侧边栏
四、html的标准属性
所有标签都可以使用的属性- id:单个html文件内部一定要唯一
- class:一个标签可以有多个签名;多个类名可以使用空格隔开
- style:样式;使用字典格式，每个style之间使用；结束
- title: 鼠标划入提示信息
五、html结构快速生成
- / >：嵌套
- *：重复
- +:后续;拼接与上一个同级的标签
- {}:内容
- : 出现在 中，一个 :出现在{}中，一个 :出现在中，一个代表一位数，多个$代表多位数
- （）:代表分组;不能出现在最后一个
- lorem:随机段落内容
- lorem5:随机5个单词
- lorem5-10:随机5-10个单词