1.常用的HTML标签
层级标签:span strong img a em
块级标签:div h1 ul li p
以上10个标签可以做出大部分网页
ul,li,p会自带浏览器样式(所以在实际开发中,使用以下方式去掉样式)
<!--一般0不用写成0px,写成0px不规范-->
ul,li,p{
padding:0;
margin:0;
}
而不是以下方式
*{
padding:0;
margin:0;
}
<!DOCTYPE html>
<!--网页的类型为HTML5-->
<html lang="en">
<!--根元素,head和body的父元素-->
<head>
<!--指定字符集-->
<!--HTML属性attribute 如charset,属性值-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<img>
HTML元素=开始标签+内容+结束标签
语义:标题
SEO:搜索引擎优化
<ul>
<li>
ul的子元素只能是li
</li>
</ul>
<h2>静夜思</h2>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头<strong>望</strong>明月</p>
<p>低头思<b>故乡</b></p>
<!--strong语义是强调,表现效果是加粗 -->
<!--b表现效果是,违背了html与样式相分离-->
<!---->
<!--div没有自带样式,px是像素-->
<div style="width:300px;height:300px;background-color:blue">
<span style="color:red">盒</span><span style="color:green">子</span>
</div>
<!--没有自带样式,内嵌css不推荐使用-->
<!--不能用table,br-->
<!--p ul h存在默认样式-->
<!--不要使用li的默认小圆点,有浏览器兼容性问题-->
<a href="http://www.baidu.com">百度</a>
<a href="#">空链接</a>
<a href="javascript:void(0)"></a>
<!--a必须有href属性,title与搜索引擎(SEO)相关-->
<a href="images/img1.png" title="this is title">图片资源</a>
<!--title属性与SEO优化相关联-->
<img src="images/img2.png" alt="this is alt" title="this is title" width="400px"/>
<!--层级标签:span img a strong em-->
<dl>
<dt>辽宁</dt>
<dd>省会沈阳,简称辽</dd>
dt与dd有着天生的对应关系
</dl>
<!--table用来表示数据-->
<!--#334455可以表示为#345,rgba(232,232,56,0.5) rgb
字符实体:<不推荐使用
不推荐使用的标签:br hr table font
-->
</body>
</html>
结构层(HTML)、表示层(CSS)、行为层(Javascript)。
面试题:strong与b的区别?
em:
Indicates emphasis.(表示强调)
strong:
Indicates stronger emphasis.(表示更强的强调)
所以strong和em是两种级别的强调。例如,一个单词或者短语需要显得更加响亮、更高调、更快速……总之,要比一般文本更加突出。这里我们就引出了strong和em在SEO中的应用了,可以对目标关键词或者长尾关键词等加上该标签,然搜索引擎知道我们的内容中强调的是什么!
W3C还继续做了如下说明:
“短语元素的外观呈现效果取决于用户代理程序。—般情况下,图形界面的用户代理会将用em标记的文本显示为斜体,将strong标记的文本显示为粗体。语音合成器的用户代理则可能会相应地改变参数,例如音量、音高以及节奏。”
作为替代,使用b和i仅仅是简单的外观指令(违背了html与css相分离的规范,因为通过一个标签就可以加粗)。如果我们的目标是将结构和外观尽可能彻底地分离,那么当使用strong和em是不二的选择。我们可以把对文本的加粗和加斜工作留给CSS去完成。
如果我们在网页中不需要强调某个词语,但是又想使用加粗或者斜体,我们可以使用CSS,以下两条分别是字体加粗和斜体的CSS规则:
{font-weight: bold;}{font-style: italic;}
2.实际开发中不推荐使用
<!--没有自带样式,内嵌css不推荐使用-->
<!--不能用br hr table font-->
<!--不要使用li的默认小圆点,有浏览器兼容性问题-->
3.搜索引擎优化
<a href="http://www.baidu.com">百度</a>
<a href="#">空链接</a>
<a href="javascript:void(0)"></a>
<!--a必须有href属性,title与搜索引擎(SEO)相关-->
<a href="images/img1.png" title="this is title">图片资源</a>
<!--title属性与SEO优化相关联-->
<img src="images/img2.png" alt="this is alt" title="this is title" width="400px"/>
4.规范化
#334455可以表示为#345