前端学习03实体转义块级元素行级元素W3C语义化标签

HTML实体转义

块级元素（相当执行了display：block操作）
行级元素（内联元素）（相当执行了display：line操作）

<p style=" width:300px;height:50px;background:gray;display: inline; ">
块级标签转化为行级标签</p>
<span style=" width:300px;height:50px;background:gray;display: block; ">块级标签转化为行级标签</span>

w3c(World Wide Web)
结构（HTML）、表现（css）、行为 （javascript）三部分组成
（1）定义语言代码

 <meta charset="UTF-8">

（2）JavaScript 定义

<script language="javascript" type="text/javascript">
    //脚本代码
</script>

（3）css定义

<style type="text/css">
 </style>

(4)注释中不用–
（5）所有标签和属性的名字必须小写
（6）属性值用引号
（7）如果文档中要输出>,<和&等 用实际转义符

<p>&gt;&glt;&amp;...</p>

（8）要给所有的属性附一个值，如果不赋值，默认他的值是属性名本身

<img src="..." alt"..."/>

（9）所有的标签要有一个结束标记 ,要闭合 />
（10）嵌套规则
1.
块元素可以包含内联元素或某些块元素

<div><p></p></div>

行级元素只能包含其他行级

<a herf="#"> <span></span></a>

2.<p不能放块级元素
3.特殊的块级元素只能包含内嵌元素，不能再包含块级元素：
h1\h2\h3\h4\h5\h6、p、dt
4.块级元素与块级元素并列，行与行级并列

（11）图片中加有意义的alt
（12）在form中加label，增加用户体验

项目开发时，项目中文件或目录名中不能出汉字和空格。一般字母下划线开头
目录名：taobaopro images/img/pic video music file web/sites…
文件名：index.html(首页) product.htmll(产品页) order.html(订单页)

HTML语义化标签

什么情况用什么标签
为什么使用：
更容易被搜索引擎收录；让屏幕阅读器读出网页内容；更好的体现页面的主题；兼容性好。
1）a>标签：实现超链接。
强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很
大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。
2）p>标签：文章段落放到p>标签中。
3）hx>标签：文章标题，栏目标题用hx>表示。
标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题，并且依据重要性递减， h1是最高的等级。
4)strong和em标签：特别强调某几个文字。
但两者在强调的语气上有区别: em>表示强调，strong 表示更强烈的强调。并且在浏览器中<em
默认用 斜体 表示，strong>用 粗体 表示。
两个标签相比，目前国内前端程序员更喜欢使用strong>表示强调。
5）q>标签：短文本引用。
注意要引用的文本不用加 双引号 ，浏览器会对q标签自动添加双引号。
6）address>标签：为网页加入地址信息。
7）ul>标签：无序列表。
8）ol>标签：有序列表。
9）caption>标签：为表格添加标题和摘要。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。