1. HTML的基本组成文档结构
1.1. 网页的基本组成
| 内容 | 备注 | 举例 |
|---|---|---|
| 文本内容 | 用户可以看到的，呈现在网页的文本内容 | <p>z这里是文本</P> |
| 其他文件的引用 | 图片，音频，视频，CSS,JS等 | <img width="200" alt="" src="timg.jpg"> |
| 标记 | 对文本及引用文件的描述备注 | 标签<p></p>,<input></input>等 |
1.2. HTML的文档结构
<!-- 告诉浏览器这是一个html5的文档 --><!DOCTYPE html><!-- <html>....</html>: 根标签，根元素,代表整个html文档 --><!-- lang="en"： 属性, 表示当前页面的主要语言 --><html lang="en"><!-- 头元素: 它的内容不在页面中显示，这是给浏览器和搜索引擎使用 --><head><!-- 当前文档字符编码集 --><meta charset="UTF-8" /><!-- viewport： 视口,当前文档在浏览器中可以被用户看到的部分 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我的第一个页面</title></head><!-- 主体元素: 这才是用户正在看到和感兴趣--><body><h2 style="color: red;">欢迎大家选择php中文网来学习Web开发技术</h2><!-- 1. 所有标签全部小写,html不区分大小写标签 --></body></html>
2. 元素与属性的关系
每一个类似于<p></p>的闭合标签称为元素，每个元素里面可以定义属性 如：<P class="mydear"></P>中，class=”mydear”就是元素的属性
元素中有3大通用属性：style, id, class
3. 传统的结构元素和HTML5的语义化结构元素
3.1. 传统的结构元素，一般采用div标签，然后利用class属性定义网页的头部，导航，侧边栏等，如：
<body><!-- 页眉 --><div id="header"><!-- 导航 --><ul><li><a href="">index</a></li><li><a href="">about</a></li><li><a href="">news</a></li><li><a href="">concant</a></li></ul></div><!-- 主体 --><div id="main"><div class="left">广告</div><div class="content">内容区</div><div class="right">推荐</div></div><!-- 页脚 --><div id="footer"><!-- 导航 --><ul><li><a href="">baidu.com</a></li><li><a href="">taobao.com</a></li></ul></div></body>
3.2. HTML5的语义化标签，设置了很多一目了然的标签，如：
<body><!-- 页眉 --><header><!-- 导航 --><nav><a href="">index</a><a href="">about</a><a href="">news</a><a href="">concant</a></nav></header><!-- 主体 --><main><section class="ads">广告</section><article class="content">内容区</article><section class="recommend">推荐</section></main><!-- 页脚 --><footer><!-- 导航 --><nav><a href="">baidu.com</a><a href="">taobao.com</a></nav></footer></body>
其他语义化标签
<abbr title="中华人民共和国">定义缩写</abbr><address>定义地址</address><article>定义文章</article><caption>定义表格标题，放在table中</caption><code>定义计算机代码文本</code><mark>定义记号文本，包在便签的文本会有黄色底色</mark><progress>定义进度条</progress>