HTML
一、HTML和CSS概述
- W3C： 万维网联盟，是目前web技术领域最具权威和影响的技术标准机构。目前已发布200多项标准。 其官网地址：w3.org
- WHATWG：超文本应用技术工作组，全称是Web Hypertext Application Technology Working Group。
- HTML：超文本标记语言，全称是Hypertext Markup Language。该语言用于定义文档内容结构，即网页的结构或者说是生成的网页的标签；该语言书写的代码通常通过浏览器解析执行。
- Hypertext：超文本，即不只是包括文本，也包括图片、链接、音频、视频等非文本元素。
- Markuo Language：标记语言，即是一套标记标签。
- CSS：层叠样式表，全称是Cascading Style Sheets。用于定义HTML文档的样式（外观），即美化HTML。是页面表现的基础，可以控制标签位置、控制元素的渲染，从而控制布局。
总结：HTML决定文档结构，CSS决定文档样式。即HTML+CSS→通过浏览器解析、渲染→生成网页
二、HTML术语
- HTML注释：用于描述代码功能。 浏览器在解析代码时会忽略注释内容。
书写格式：< ! - - 注 释 内 容 - - > - HTML元素（又叫标记、记标、标签）：一个HTML由大量元素组成，HTML的所有内容结构，都是靠元素组织到页面中的。
- h3元素：< h 3 >元素内容< / h 3 > —>其中h3元素代表三级标题，< h 3 >代表起始标签，< / h 3>代表结束标签。
- a元素：< a href=”/classroom/17” >元素内容< /a> —>其中①href=”/classroom/17”为属性，且属性只能写在开始标签里，且可以有多个属性存在，代表了附加功能，如链接、跳转等。②a为标记名。③href为属性名。④”/classroom/17”为属性值（要加双引号）。
- 空元素：只有开始标记才有空元素存在，表示在开始标签里存放链接、展示图片等，没有元素内容和结束标记。又称只闭合元素。书写方式为：<标记名 属性>或<标记名 属性/>
- 元素的层次结构：一个元素的内容中，可以包含其他元素，形成嵌套的层次结构，但是两个元素间不能相互嵌套。①若A元素直接包含B：则A为B的父元素，B为A的子元素。②若两个元素有同一个父元素，则他们互为兄弟元素。③若A直接或间接包含B，A是B的祖先元素，B是A的后代元素。
三、HTML的文档结构
- 文档声明：它既不是元素、也不是注释，总出现在HTML代码的第一行，主要用于告诉浏览器使用正确版本HTML的解析器来解析代码。
书写：< ! DOCTYPE html > →告诉浏览器是HTML5的版本
若不写该声明，则浏览器渲染页面时会进入怪异模式，即只能展示内容，无法解析标签（主要由于当浏览器不知道使用哪种版本的时候会默认选择最低版本解析，而浏览器的兼容性可以显示文本内容，却不能识别标签）。- html元素又叫根元素、根标记，他是所有其他元素的祖先元素，文档中所有的元素都要放在它的元素内容中。
- 相关属性：lang （该属性指定文档中的文字是何种自然语言书写的，可能会影响浏览器的语音阅读和翻译行为）
- head元素：
- 又叫文档头，他是HTML元素的第一个子元素。
- 文档头中可以包含一些其他元素，用于描述页面的附加信息。
- head元素中的内容都不会显示在页面上，而是显示在标签页上，一般显示的是标题、描述、链接地址等。
- 包含的元素有：
①< title >标识文档标题，显示在标签页上。
②< meta >标识页面的其他元数据（页面相关附加信息），该元素为空元素。例如：< meta charset=”UTG-8” > 该语言用来解析元素内容，全称是 字符编码集。
- body元素
- 又叫文档体，网页中所有可见的内容都放置在该元素内。
- html元素又叫根元素、根标记，他是所有其他元素的祖先元素，文档中所有的元素都要放在它的元素内容中。
四、绝对路径和相对路径
- 绝对路径：
- 书写格式：协议：//域名/目录 → 例如：http://www.google.com/
- 使用场景：访问站外资源时，只能使用绝对路径；访问站内资源是，若网站已部署，则可以用绝对路径，且协议和域名可省略，省略后以/作为开头。
- 相对路径：
- 相对当前资源的位置，只能用于访问站内资源。
- 书写： ./路径
- ./表示当前资源所在目录，必须作为相对路径的开始，也可以省略，省略后仅以目录名称开头。
- ../ 表示返回上一级目录。
CSS
一、SCC引用
- 使用外部样式表：CSS代码独立文件，在html中通过link元素引入到页面中。
- 引用规则：在html中 < link href=”样式地址”>。< link >元素存在于< head >内，一般不建议与< head >直接相连。
- 特点：代码分离，方便复用和维护
- 其他：ctrl+？ ：注释光标所在行。 再按一次ctrl+？ 则取消注释。
- 使用内部样式表：将CSS代码写到HTML文档的style元素中。
- 书写：< style> < /style> 写到head里面。
- 注意：一般进行调试时使用，可以先写在内部调试、然后粘到外部。
- 特点：①没有了样式表文件，在某些时候可以提升效率。②多个页面难以共享样式，不利于代码效率。③HTML和CSS代码混杂，不利于程序员和搜索引擎阅读。④在某些对效率要去苛刻或测试的场景下使用。
- 使用行内样式表：CSS代码写在元素的style中，而style写在起始标签的属性里。
- 注意：行内样式不写选择器。
- 特点：①没有了样式表文件，在某些时候可以提升效率。②多个页面难以共享样式，不利于代码效率。③HTML和CSS代码混杂，不利于程序员和搜索引擎阅读。④JavaScript操作的是行内样式，在测试的场景下使用。
优先级划分：行内样式表权重最大，优先级最高
二、CSS术语
- CSS注释：
- 书写格式： / * 注释内容 */
- 用于描述代码功能，浏览器解析代码时会忽略。
- CSS规则：
- CSS代码由一个一个的规则组成，每个规则都指定了对那些元素应用什么样式。
- 例如： h1{color: red；} ：整句叫规则；其中h1是选择器（主要作用是指出该样式规则应用到哪些元素上）；{color：red；}为声明块（指出有哪些样式规则）。
- 选择器分类：
- ①元素选择器：
- 书写格式：标记名{声明块}
- 所有与该标记名匹配的元素，都将应用声明块中的规则。
- ②类选择器：
- 书写格式： .类名{/* 声明块 */} （其中类名自行定义）
- 所有class属性为指定类名的元素，都将应用声明块中的规则。
- 类选择器引用写到起始标签里；两个样式间用空格隔开。
如：< h1 class=”bigfont redcolor”>
- ③ID选择器：
- 书写： #id值{/* 声明块 */} （其中id值自行命名）
- 属性id为指定值的元素，都将应用声明块中的规则。
- 注意：同一个HTML元素的id值必须唯一，即同一页面id值唯一。
- ①元素选择器：
优先级：ID选择器>类选择器>元素选择器