HTML5网页结构和基本标签

html网页结构

目录

html网页结构

实体的概念

html语法规范

html常用标签（部分）

块元素、行内元素、行内块元素三者的比较

---

注释 ctrl+/
	1、注释不能嵌套
	2、养成注释的习惯
	3、注释要简单明了

        HTML由head标签和body标签组成，head标签保存一些元信息，里面内容不会页面中展示，只是辅助浏览器编译页面，其中里面一般都会有一个title标题标签，title 默认情况显示在浏览器的标题栏中，它最重要的作用帮助推广部门做SEO/SEM优化。body标签书写网页的主体内容。

<meta charset="utf-8" />

meta 自结束标签 设置一些元信息 辅助浏览器编译代码

charset 字符集

utf-8 万国码

GB2312 中国

GBK 中国扩展版

        实体的概念

浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号用一些额外的字符来表示，这些额外的字符，就叫实体。

常用的实体
 	空格
>	大于号
<	小于号
©	版权符号

html语法规范

• html 不区分大小写 但一般用小写
• 注释不能嵌套
• 浏览器的纠错一定要避免
• html标签规范，要么成双成对，要么自结束
• 标签可以嵌套，但不能交叉

html常用标签（部分）

1、标题标签

        六个标题标签，常用h1-h3，从样式看，h1->h6,逐步变小，语义也是逐渐变小的，标题标签也是辅助推广部门做推广的。

2、段落标签<p>

        p标签也是块元素，会独占一行，从样式上看，段落和段落之间有间距，一般用来包裹文字和图片。

3、标题分组标签<hgroup>

4、强调标签

        em标签和strong标签，他们都是强调标签，不会独占一样，是行内元素。<em>标签的作用是文本内容斜体，<strong>标签作用是文本内容加粗。

5、换行标签<br>

6、自结束标签<hr>

        分割线

7、居中标签<center>

8、div标签

        块元素（占满一行）

9、span标签

        行内元素（不换行）

10、del标签

        删除线

块元素、行内元素、行内块元素三者的比较

块元素：一般是用来布局

特点:1、默认会占满一行

        2、块元素的宽度默认是父元素的百分百

        3、块元素的高度默认是被内容撑开

行内元素：一般用来包裹文字

特点:1、不会独占一行

        2、行内元素宽高都是被内容撑开的，不可以自定义宽度

行内块元素：兼具块元素，行内元素的特点

布局的注意点

•         块元素里面什么都能放，能放块元素，能放行内，能放行内块
•         行内元素里面不能放块元素
•          p标签是一个特殊的块元素，里面不能放块元素

结构布局标签 

header 表示头部
main	表示主体
footer	表示底部
nav	表示导航
aside	一般表示跟主体相关的内容
article	文章相关的内容