HTML与CSS的基础知识

　　

 

一、代码的注意事项

1. 文件，文件夹，命名统一使用英文；
2. 文件夹，文件命名精良不要出现特殊符号；
3. 尽可能望文知意，列如测试（test），核心（main）。。一般文件夹下核心入口文件名用index；
4. HTML是结构，对应的是.html 后缀名；
5. Css是样式，对应的是.css后缀名。

二、HTML总结

1. 一般我们采用谷歌浏览器浏览
2. Html里面有注释和元素
3. <--这里面的表示注释内容-->
4. 元素包括了起始标记（起始标记名，属性【属性名，属性值】），内容和结束标记
5. html文档结构中拥有一些元素，元素之间也有一些关系，如“html”是head的父元素，同理，head是html的子元素；“html”是link的祖先元素。
6. 在我们书写html文件时，不可以让元素相互包含。

三、CSS总结

1. Css里面有注释和规则，注释标记格式为（/*注释内容*/）
2. 规则里面包括了选择器和声明块
3. 选择器包括了：元素选择器（标记名{声明块}）、类选择器（.类名{声明块}）、ID选择器（#id值{声明块}）
4. 声明快包括了：声明（属性）
5. 有三种方式将css样式引用到页面中：使用外部样式表；使用内部样式表；使用行内样式表

     在开发时，可以使用CSS Reset重置样式，消除浏览器默认样式的差异。

四、什么是语义化：

1. HTML中不同的元素代表不同的含义；
2. 使用具有含义的元素来书写HTML文档，即语义化；
3. 写HTML文档最重要的，即为不同的内容选择合适的元素；
4. 语义化属于HTML范畴，与样式无关；
5. 目前，HTML的最新版本是HTML5，引入了更多的语义化元素。

五、语义化的作用：

1. 有利于浏览器理解HTML文档；
2. <strong>
3. 重要的内容，浏览器在阅读模式下不应该忽略该内容；
4. 若浏览器有语音阅读功能，应该重读该元素中的内容；
5. <i>
6. 若浏览器有语音阅读功能，应该用一种特别的语调来阅读该元素的内容；
7. 有利于搜索引擎理解HTML文档
8. 百度、谷歌、bing等
9. 搜索引擎通过互联网访问页面，搜索引擎会阅读这些页面的HTML代码，更好的语义化会帮助搜索引擎理解页面中每一段内容的含义有助于提升站点的排名。

       10.HTML5元素表列出了各种元素，并进行了颜色分类，相同颜色归为一类。

六、超链接：

1. 超链接<a>元素
2. 点击超链接后会跳转到另一个页面；
3. <a>元素书写格式：
4. <a href="目标"> 内容 </a>
5. <a target="页面打开位置" href="目标"> 内容 </a>
6. href属性：
7. 页面地址(路径)、
8. 锚点、
9. 功能链接；
10. _blank 新窗口中打开、
11. _self 默认值，当前窗口中打开；
12. 绝对路径和相对路径：
13. 绝对路径：
14. 当网站部署到服务器后，网站中的所有资源都可以通过一个地址(路径)访问。
15. 该地址(路径)的书写格式为：协议://域名/目录
16. 示例：http://www.google.com/
17. 协议：http
18. 域名：www.google.com
19. 目录：根目录
20. 示例：http://meyerweb.com/eric/tools/css/reset/reset.css
21. 协议：http
22. 域名：meyerweb.com
23. 目录：根目录/eric/tools/css/reset/reset.css
24. 种格式书写的路径，叫做绝对路径。
25. 绝对路径的使用场景：
26. 访问站外资源时，只能使用绝对路径；
27. 访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名。

七、相对路径：

1. 对路径是相对于当前资源的位置，只能用于访问站内资源；
2. 相对路径的书写格式为：
3. ./路径
4. 表示当前资源所在的目录，必须作为相对路径的开始，可省略；
5. ../
6. 表示返回上一级目录；
7. 综合示例：
8. <link rel="stylesheet" href="/css/main.css">
9. 绝对路径（省略了协议和域名）
10. <link rel="stylesheet" href="css/main.css">
11. 相对路径（省略了./）
12. <a href="http://www.google.com/">...</a>
13. 绝对路径
14. <a href="../u/account/login.html">...</a>
15. 相对路径（省略了./）
16. <a href="/u/account/login.html">...</a>
17. 绝对路径（省略了协议和域名）
18. <a href="u/account/login.html">...</a>
19. 相对路径（省略了./）
20. <a href="./u/account/login.html">...</a>
21. 相对路径
22. 站外资源：绝对路径
23. 站内资源：绝对路径（网站已部署，可省略协议和域名）、相对路径

八、文本元素：

1. h1～h6：1级标题~6级标题
2. p：段落
3. blockquote：整段的引用
4. cite：对参考文献的引用
5. q:小段文本的引用
6. abbr：对缩写词的引用
7. strong：重要的文本
8. em：强调的文本
9. b:应突出显示的文本
10. i:应区别对待的文本

九、结构元素：

1. div元素：
2. 它是一个非常常见的元素，它没有任何的语义，它仅仅表示一个容器，用于包含其他元素，在网站布局时，它通常用于表示页面的区域。
3. 实体字符的书写格式为：&实体名称;或&#实体编号;
4. 空格：实体名称&nbsp； 实体编号&#160；
5. (小于符号＜）：实体名称&lt<实体编号 &#60<；
6. (大于符号>)实体名称&gt； 实体编码&#62；
7. （并且符号&）实体名称&amp； 实体编码&#38；
8. （版权符号@）实体名称&copy； 实体编码&#169；