掌握HTML元素属性：打造个性化网页体验

一、HTML介绍

1、HTML是网络的骨架

HTML 是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建网页结构的标记语言。

2.HTML的作用

实现网页文本、图像、链接等元素的排版和展示。

二、前端开发工具

1、解释器

• 各样的浏览器。

前端代码（HTML、CSS、JavaScript）是在浏览器中解释和执行的，浏览器会将这些代码转换成网页内容，并在用户的浏览器上运行。

2、编辑器

• 各种各样的文本编辑器都可以。

前端开发中的编辑器通常指的是用于编写HTML、CSS和JavaScript等前端代码的工具。

1. 常用：

2. VSCode：强大的拓展能力；可以用于各种编辑语言的开发；只需要安装 对应的插件。

3. 安装好后可安装simple chinese汉化。

4. 插件live server是前端轻量服务器，用于展示HTML页面，可以热更新，保存之后效果立马更改，不需要重新运行。

三、HTML标签

1、基础标签

1. html：根标签
2. head：头标签
3. body：身体标签

2、行块标签

1. div：块标签，铺满多行
2. h1~h6：一级到六级标题；行级元素，铺满一行；表现：字体大小变化、加粗、加黑、有行距。
3. p：段落；行级元素；表现：有行距。
4. span：隔离标签；行内元素。
5. br：强制换行。
6. hr：水平分割线。

3、文本标签

1. b/strong：粗体。
2. i/em：斜体。
3. del：删除线。
4. u：下划线。
5. sub：下标。
6. sup：上标。

4、列表标签

1. ol：有序标签；块级标签；表现：内部多使用li、有序号、铺满一行、有上下行距、左侧有内补。
2. ul：无序列表；块级标签。
3. li：列表项目；一般不会单独存在。
4. dl：自定义列表；块级元素。
5. dt：自定义列表项。
6. dd：自定义列表项说明；与dt同级，一般写在dd下方；缩进出现；可以没有。

5、表格标签

1. table：表格标签；外框架；行内元素；支持嵌套。
   • table的标签属性：
   • border：外边框
   • cellspacing：单元格之间大小
   • cellpadding：单元格中字体与单元格之间的距离
   • width：表的宽度，可用%或px为单位
   • align：表的位置，例：center、right
2. tr：每一行；外框架的下一层。
3. th：表头单元格；表现：加粗。
4. td：普通单元格。th与td同级。
   • th/td的标签属性：
   • rowspan：列合并
   • colspan：行合并
   • align：位置

6、媒体标签

1. a：超级链接；点击其中内容，跳转到其他网址。
   • herf：连接地址：支持外部服务器和内部服务器。
   • target：
     • _blank：新空白页打开
     • _self：默认空白页打开
   • id：锚点；herf要以#开头，内容和目标元素上的id属性一致。
2. img：图片。
   • src：图片来源
     • 图片地址
     • 本地地址
     • 其他服务器地址
   • alt：图片加载失败信息
3. audio：音频
   • src：音频地址；网络地址；本地地址
   • controls：控件
   • autoplay：自动播放
4. video：视频
   • src：视频地址；本地地址；网络视频
   • controls：控件；显示。

7、iframe：内联框架

1. 嵌入其他页面：网络地址；本地地址。
2. src：地址路径。
3. 第一次请求原始页面，第二次请求iframe页面。
4. 有width、height属性

8、表单标签

可以将用户输入的数据提交到服务器。

1. 表单域：form
   • action：服务器地址
   • method：提交方式
     • get： 默认是get，参数是以？key=value&key=value......的形式拼接；测试地址：http://httpbin.org/get；提交内容会显示在预览数据的args中，且会显示在网址上；
     • post：参数是以表单数据进行提交；测试地址：http://httpbin.org/post；提交内容会显示在预览数据的form中，不会显示在网址上。

表单标签：

2. 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：口令；
3. select：下拉选项
   • name写在option上
   • 结合option，value写在option上
4. textarea：多行输入框。
5. input的value就是需要提交给服务器的值
   当type等于text、password之类可以输入内容，不需要写value
   radio、checkbox需要写value
6. 表单按钮：input
   • submit：提交
   • reset：重置

9、语义化标签

1. header：头部
2. nav：导航栏
3. footer：底部栏
4. main：主体
5. section：区域
6. artical：文章
7. aside：侧边栏

四、html的标准属性

所有标签都可以使用的属性

1. id:单个html文件内部一定要唯一
2. class:一个标签可以有多个签名;多个类名可以使用空格隔开
3. style:样式;使用字典格式，每个style之间使用；结束
4. title: 鼠标划入提示信息

五、html结构快速生成

1. / >：嵌套
2. *：重复
3. +:后续;拼接与上一个同级的标签
4. {}:内容
5. : 出现在 中，一个 :出现在{}中，一个 :出现在中，一个代表一位数，多个$代表多位数
6. （）:代表分组;不能出现在最后一个
7. lorem:随机段落内容
   • lorem5:随机5个单词
   • lorem5-10:随机5-10个单词