首先我们先直观的认识一下html的基本结构：
<!doctype html>`
<html>`
<head>
<title></title>
<meta charset="utf-8" />
<meta name="keywords" content="关于网页的关键词" />
<meta name="description" content="关于网页内容的描述" />
<meta http-equiv="refresh" content="5,url=http://baidu.com" />
</head>
<body>
网页主体内容
</body>
</html>然后我们根据这个html的基本结构进行分析：
1、<!doctype html>
这个意思是声明当前编辑的页面版本为html5，不同的html版本声明语句不同，其中!必须为英文。
2、是网页的根标签，所有内容都要写在这个标签里面
3、****head标签中的内容都是源数据，不会在网页中显示，但是对搜索引擎和其他地方都有很大的作用
①title标签可以设置为网页标题，搜索引擎会检索该字段。
②meta标签中的charset属性是来设置字符集的，代码编辑器相当于编码，浏览器相当于解码，如果编码和解码的字符集不一致，就造成了乱码问题，通常我们都是用utf-8，常见的字符集有gbk、gb2312等等
③meta标签中的keywords和description值，是用来设置有关编写网站的信息，以便于搜索引擎更好的抓取。
4、body标签是网页中的可见内容，都可以在浏览器中看到。
5、标签分类
标签又叫元素，分为双标签和单标签。
①双标签是有开始有结束的标签，例如等
②单标签是自结束标签，例如
6、标签属性：
每个标签都有自己的属性以及属性值，例如，其中charset是属性，utf-8是属性值，这样一对简称为名值对或键值对
7、标签关系：
①父元素
②子元素
③兄弟元素
④祖先元素
⑤后代元素
8、常见基本标签：
结构标签：html、head、title、meta、body
标题标签：h1—–h6，其中h1标签的重要性仅次于页面的title，且一个页面中只会使用一个h1标签。一般标题标签我们只会使用到h3。
段落标签：p
换行标签：br
水平线标签：hr
图片标签：img，其中img标签的属性alt一般都要设置，因为可以被搜索引擎抓取到
超链接标签：a
其他标签：span、div、ul、li、table、td、tr、th、caption等等
9、标签分类：可以分为块级元素和行内元素
块级元素可以在网页中独占一行，例如div、p、h1—h6等等
行内元素根据自身内容来决定宽高，例如a、img、span等等
10、常见的文本标签
<em></em>着重
<strong></strong>强调
<b></b>和<i></i>没有语义
<cite></cite>引用书名、电影名等等
<small></small>比父元素文字小
<big></big>比父元素大，但是没有语义
<sup></sup>上标
<sub></sub>下标
<del></del>删除文字
<ins></ins>插入文字
<q></q>引用短句子
<blockquote></blockquote>引用长句子
<pre></pre>预先格式
<code></code>一般与pre一起使用
例：<pre>
<code>代码段</code>
</pre>11、标签属性
每个标签都有自己的属性，可以通过css设置属性来设置样式。常用的属性有id 、class、title、等等。
1、id属性具有唯一性，不能重复
2、class属性可以一个元素拥有多个class，同时一个class值可以给多个元素设置
3、title属性设置后，鼠标放在页面上，可以显示title的值
例：<p id="" class="" title=""></p>
常用标签的属性：
1、<a href="" target="">链接文字</a>
href常用的值：
①将要链接的地址的路径，一般使用相对路径
②#id值，可以跳转到当前页面的指定位置
③mailto:邮箱地址，可以打开当前使用系统安装的邮箱客户端
target常用的值有：
①_self，在原来页面打开
②_blank，在新页面打开
③iframename的name值，在指定的框架中打开
2、<img src="" alt="">
src的值是图片的路径地址
alt值必须设置，搜索引擎可以抓取到
3、iframe内联框架
<iframe src="" width="" height="" name=""></iframe>
ifranme不推荐使用，因为不会被搜索引擎检索到
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
