他的回复:
#### 华为云 ID: hw95161552 ## 第二章初识 HTML #### 1、Web 开发 1.1 前端开发和后端开发 前端开发：侧重于页面的展示及用户交互，涉及 HTML/CSS/JavaScript 后端开发：侧重于数据的处理与服务的访问，涉及数据库/服务器层面 1.2 开发模式演进过程 ``` C/S 架构：客户端/服务器架构 B/S 架构：浏览器/服务器架构 静态页面 -> 复杂页面 -> 前后端分离 -> 前端组件/模块化开发 ``` 1.3 前端开发三大件 ``` 1、HTML: 网页骨架 2、CSS: 网页样式 3、JS: 网页功能与交互 ``` #### 2、WEB 标准 WEB 开发标准：Web 应用开发需要遵循的标准，是一系列标准的集合 2.1 网页的三个标准 ``` 1、结构标准 XML/HTML/XHTML HTML: 定义网页的内容，例如文字/图片/视频等等 2、表现标准 CSS CSS: 定义网页内容的表现形式，例如字体的颜色/背景/标题大小等等 3、行为标准 DOM/JavaScript JavaScript: 定义网页上的交互，控制网页的行为，例如弹出弹框/页面打开、关闭/输入内容提示等等 ``` 2.2 标准制定 由 W3C 联盟制定 参考： [HTML 5.1 2nd Edition 标准](https://w3.org/TR/html51/) [HTML 5.2 标准](https://w3.org/TR/html52/) [HTML 5.3 标准](https://w3.org/TR/html53/) 2.3 标准制定流程 参考: [6.1.1 Recommendations and Notes](https://www.w3.org/2019/Process-20190301/#recs-and-notes) ``` WD(Working Draft/工作草案) -> CR(Candidate Recommendation/候选推荐标准) -> PR(Proposed Recommendation/建议推荐标准) -> REC(Recommendation/推荐标准) ``` 2.4 标准实现 由浏览器厂商，开发支持这些标准的浏览器 #### 3、开发工具 3.1 编辑器 推荐 VSCode: [Visual Studio Code 官网](https://code.visualstudio.com) 推荐汉化插件：`Chinese(Simplified) Language Pack for Visual Studio Code` #### 4、HTML 发展史 HTML(HyperText Markup Language) 超文本标记语言，用来构建网页的一种标记语言 4.1 历史 ``` * 1993 年由互联网工程小组 (IETF) 发布工作草案 * 1995 年发布 HTML 2.0 版本 * 1997/1/14 由 W3C 发布 HTML 3.2 版本 * 1997/12/18 由 W3C 发布 HTML 4.0 版本 * 1999 年由 W3C 发布 HTML 4.01 版本 * 2000 年由 W3C 发布 XHTML 1.0 版本，他是一种更严格的 HTML 代码 * 2014/10 W3C 发布 HTML5 ... ``` 4.2 HTML vs XHTML XHTML: 可扩展超文本标记语言，是一种更严格/更纯洁的 HTML 语言 主要不同点: ``` 1、XHTML 元素必须被正确地嵌套 2、XHTML 元素必须被关闭 3、标签名必须用小写字母 4、XHTML 文档必须拥有根元素 ``` 验证 html 文件是否符合标准: [Nu Html Checker](javascript:;) 4.3 HTML 语义化 HTML 5 中新增了很多语义化标签，不同的 HTML 标签代表了不同的内容 优势 ``` 1、使 HTML 结构变得清晰，有利于代码的维护 2、有利于搜索引擎抓取 3、语义化使代码仍具可读性 4、使 HTML 代码变得更简洁，提高页面加载速度 5、有助于屏幕阅读器等设备的识别 ``` #### 5、HTML 标签 5.1 标签 HTML 是由一系列标签组成的，每个标签以 `` 和 `>` 包裹单词 5.2 标签种类 单标签：只有一个标签就能表达完整含义，例如 ``、`` 双标签：由开始和结束标签一起组成，例如 ``、`` 5.3 元素 一对标签包含的所有内容，例如 `Hello, World!` 5.4 属性 标签可以有很多属性，属性总是在开始标签中定义，以名值对的形式出现，其中属性值以双引号包裹 例如：`姓名`，其中 `class` 属性的值为 `name` ## 第三章常用标签 #### 1、基本结构 1.1 `HTML` 文件的基本结构 由最前面的文档声明标签 `` 及一个 `` 内包含一个文档头标签 `` 和一个文档主体标签 `` 组成 ```DocumentThis is a document.``` 1.2 重要的标签 ``` 1、 文档类型声明，确保浏览器按照最佳的相关规范进行渲染 2、头部标签，规定文档相关的配置信息（元数据） 包括文档的标题，引用的文档样式和脚本等 3、定义文档的标题，显示在浏览器的标题栏或标签页上。 它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 4、 定义文档的元数据信息 例如： 声明文档使用的编码 5、 内容主体标签，表示文档的内容 ``` 1.3 元素的组成部分  #### 2、标题 2.1 标题元素 ``` 1、~标签用于定义标题，其中的重要性最高，而的重要性最低 2、标签通常用于最顶层的标题 3、一个 HTML 文档一般只有一个标签 ```  #### 3、段落 3.1 `` 段落元素 ``` 1、用于定义段落，浏览器会自动在其前后创建一些空白 2、文字行数取决于浏览器窗口的宽度 3、标签中的连续空格最终都将解析成一个空格，可使用 特殊字符代表空格 4、是块级元素 ``` #### 4、结构标签 4.1 `div` 标签 ``` 1、div 是 division 的含义，用来划分区域，代表网页中的块，所以一般把它叫做块标签 2、div 标签通常用于包围大块内容，它没有任何特殊的含义 3、div 适合作为最通用的页面容器 4、div 是块级元素 ``` 4.2 `span` 标签 ``` 1、span 是内联标签，用在一行文本中，用来修饰文字 2、span 是内联元素 ``` 4.3 块级元素 vs 内联元素 块级元素（block level element） 内联元素（inline element） 二者的区别如下： ``` 1. 块级元素独占一行，内联元素在一行内显示； 2. 块级元素可以设置 width、height 属性，而内联元素设置这些属性无效； 3. 块级元素的默认 width 为 100%，而内联元素的的 width 是根据其内容或子元素确定的。 ``` ##### 5、链接 5.1 链接标签 `` 标签是 anchor 的缩写，用于定义网页链接 5.2 链接属性： ``` 1、href 属性表示链接的地址，可以是相对地址或绝对地址 2、target 属性表示点击链接后打开的方式 默认值为 _self，表示在当前窗口打开新链接 设置成 _blank，表示在新窗口中打开 ``` 5.3 空链接：点击不做任何跳转 之前主要作为按钮实现，目前不推荐 ``` 空链接 空链2 ``` 5.4 `` 标签 为页面上的所有链接规定默认地址或默认目标。 ``` ``` 例如： ```DocumentAnker在 元素内设置 元素内有链接 Anker 此时点击该链接，会在新窗口中打开 https://example.com/#anchor 网页地址 ``` #### 6、图片 6.1 `img` 图片标签 ``` 1、用于定义一张图片，属于单标签结果，它有两个属性，src 代表图片的地址，alt 属性代表当图片无法显示时的替代文本 2、图片地址可以使用相对或绝对路径 3、alt 属性不要省略，目的是为了更好的兼容无图浏览器 4、可设置 height 和 width 属性来设置图片的宽度和高度 ``` 示例 ``` ``` #### 7、列表 7.1 无序列表 (Unordered List) ``` 1、使用标签定义无序列表，标签定义列表项 无序列表的含义是列表项内容没有前后顺序 2、ul 标签上可使用 type 属性定义图形符号的样式 属性值为 disc 时，显示为点 属性值为 square 时，显示为方块 属性值为 circle 时，显示为圆 ``` 效果如下： ```列表项1列表项2列表项3``` ○ 列表项1 ○ 列表项2 ○ 列表项3 7.2 有序列表 (Ordered List) ``` 1、使用标签定义有序列表，标签定义列表项 有序列表的每一项有顺序含义 2、有序列表的前缀通常为数字或者字母 3、ol 标签上可使用 type 属性定义编号的类型 a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认） 4、ul 标签上可使用 start 属性定义列表编号的起始值, 是一个整数值属性 ``` 效果如下： ```列表项1列表项2列表项3``` d. 列表项1 e. 列表项2 f. 列表项3 7.3 自定义列表 (Definition List) ``` 1、使用标签定义自定义列表，内部可有多个列表项 2、每个列表项用 定义标题 3、用 定义列表项 ``` 效果如下： ```上海市普陀区浦东新区静安区``` 上海市 普陀区 浦东新区 静安区 #### 8、参考学习网站 [MDN HTML（超文本标记语言）](https://developer.mozilla.org/zh-CN/docs/Web/HTML) [W3C HTML 系列教程](javascript:;) ## 第四章表格标签 #### 1、表格标签 1.1 表格元素 ``` 1、表格用 标签定义，里面由若干行和列的单元格组成 2、在表格元素中，使用表示表格中的一行，使用表示列 3、使用标签定义标题 ``` ``` 表格标题张三李四王五``` 1.2 表格结构 ``` 1、: 定义表格的头部 2、: 定义表格的主体 3、: 定义表格的底部 ``` #### 2 行 2.1 表格的行 ``` 1、使用标签定义表格的行 2、标签内部使用标签表示一个单元格 ``` 2.2 相关属性 table 的属性 ``` border: 规定表格边框的宽度 width: 规定表格的宽度 height: 规定表格的高度 cellspacing: 规定单元格之间的空白 cellpadding: 规定单元边沿与其内容之间的空白 ``` #### 3、列 3.1 表格的列 ``` 1、标签定义表格的列 2、常用的属性 colspan 定义单元格跨列的数目 rowspan 定义单元格跨行的数目 align 横向内容对齐方式 valign 纵向内容对齐方式 3、标签定义表格的表头 大多数浏览器会把表头显示为粗体居中的文本 ``` 3.2 `` 标签 为表格中一个或多个列定义属性值 ``` 1、align: 规定与 col 元素相关的内容的水平对齐方式 2、span: 规定 col 元素应该横跨的列数 3、width: 规定 col 元素的宽度 ``` 3.3 `` 标签 标签用于对表格中的列进行组合，以便对其进行格式化。 ``` 1、如需对全部列应用样式， 标签很有用， 这样就不需要对各个单元和各行重复应用样式了 2、 标签只能在 table 元素中使用 3、 标签用来存放 col 标签。 ``` 相关属性 ``` 1、align: 定义在列组合中内容的水平对齐方 2、span: 规定列组应该横跨的列数 3、width: 规定列组合的宽度 ``` #### 4、表格案例 ```Table 华为手机清单型号图片价格数量P4050002Mate4040003nova30005总计: 37000```
