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>>&glt;&...</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>标签:为表格添加标题和摘要。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。