HTML

 

一、 语义化概述

1. 什么是语义化：

a) HTML种不同的元素代表不同的含义。

b) 使用就有含义的元素来书写HTML文档，即语义化。

c) 书写HTML文档最重要的，即为不同的内容选择合适的元素

d) 语义化属于HTML范畴，与样式无关。

1. 语义化作用：

a) 有利于浏览器理解HTML文档。

b) 有利于搜索引擎理解HTML文档。

1. HTML5元素表：

 

二、 超链接

   书写格式：<a target=”页面打开位置” href=”目标”>内容</a>

Herf属性：页面地址（路径）;锚点；功能连接

Terget属性：_blank新窗口打开；_self默认值，当前窗口打开。

三、 相对路径和绝对路径

1. 绝对路径：当网站部署到服务器后，网站中的所有资源都可以通过一个地址(路径)访问该地址(路径)的书写格式为：协议://域名/目录

http://meyerweb.com/eric/tools/css/reset/reset.css

协议：http域名：meyerweb.com目录：根目录/eric/tools/css/reset/reset.css 

1. 绝对路径的使用场景：访问站外资源时，只能使用绝对路径；访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名。
2. 相对路径：相对路径是相对于当前资源的位置，只能用于访问站内资源；相对路径的书写格式为：./路径。

./表示当前资源所在的目录，必须作为相对路径的开始，可省略；

../表示返回上一级目录 

四、 文本元素：

      H1—h6:1级标题-6级标题             p：段落

      Strong:重要的文本                   em:强调的文本

       B  ：突出显示的文本                 I :应区别对待的文字

      Blockquote:整段的引用                cite:对所写词的应用

       Q   ：小段文本的应用                abbr:对缩写次的引用

 

五、 块级元素 行内元素与行内块级元素 分类等（相互之间可以转换）

块级元素

1. 宽高可以自行设置，与内容 无绝对 关系
2. 默认独占一行，与其他元素不能共存一行
3. 对应的css属性是 display：block
4. 常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer

行内元素

1. 宽高不可以设置，设置无效，由内容决定宽高
2. 默认能与其他元素共存一行
3. 对应的css属性是display:inline
4. 常见的行内元素有：a、 span 、 strong、 I、 b 、td

行内块级元素

1. 宽高可以设置，与内容无绝对关系
2. 默认不独占一行，可与其它元素共存一行
3. 对应的CSS属性是：display:inline-block
4. 常见的元素： img 、 td 、 table 、video 、audio 、 表单 、 。。。

六、 结构元素Div

  Div元素：它是一个非常常见的元素；它没有任何的语义；它仅仅表示一个容器，用于包含其他元素；在网站布局时，它通常用于表示页面的区域。

七、 语义化结构元素语义化结构元素：在HTML5出现之前，一直使用div来划分页面区域；但div无法明确表示该区域的内容的含义HTML5中新增了一系列带有语义的结构元素；它们和div没有本质的区别，只不过它们有语义。<header>:用于表示页面或某个区域的头部。

<nav>:用于表示导航栏；

<aside>:用于表示跟周围主题相关的附加信息。

<article>:用于表示文章或其他独立页面存在的内容。

<section>:用于表示一个整体的一部分主题。

<footer>:用于表示页面或某个区域的脚注。

八、 实体字符

实体字符书写格式：&实体名称；或&#实体编号；

常见的实体字符：

显示结果	描述	实体名称	实体编号
	空格	 	 
<	小于符号	&lt;	&#60;
>	大于符号	&gt;	&#62;
&	并且符号	&amp;	&#38;
c	版权符号	&copy;	&#169;