在网页中 HTML负责结构,CSS负责表现
所以在使用 html标签的时候,因当关注的是标签的语义,而不是标签的表现样式
块元素 (block element)在网页中使用块元素进行布局
行内元素(inline element)行内元素主要用来包裹文字
会在块元素中放行内元素,但是不会在行内元素中放块元素
块元素中基本上什么都能放,p元素中不能放任何块元素。
浏览器在解析网页中,会自动对网页中不符合规范的内容进行修正,会在内存中纠正错误,在开发者工具中查看(右键检查 或 f12)
比如:标签写在根元素外面、p元素中嵌套了块元素、根元素中出现了除了head 或 body之外的子元素
块元素(block element)独占一行,并且有自动填满父元素,可以设置 margin 和 padding 以及宽度和高度
行内元素(inline element)不会独占一行,widthh 和 heighth会失效,并且在垂直方向上的 paddingy 与 margin 会失效
标题标签:
h1~ h6 一共有六级标题,独占一行(块元素)
从 h1~h6 重要性递减,h1最重要,h6最不重要
h1在网页中的重要性进次于 title 标签,一般情况下一个页面中只会有一个 h1
一般情况下页面中的标题标签只会用到 h1~h3,h4~h6很少用到(重要性基本上可忽略不计了)
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
标题分组 hgroup:
hgroup 标签用来为标题分组,可以将一组相关的标题同时放入到 hgroup。
<hgroup> <h2>title 1</h2> <h2>title 2</h2> </hgroup>
段落标签
p 标签表示页面中的一个段落,p元素也会独占一行,p元素也是块元素
<p>段落</p>
其他语义标签
语义 | 标签 | 说明 |
加粗 | <strong></strong> 或者 <b></b> | strong 标签加粗,语义更加强烈 |
倾斜 | <em></em> 或者 <i></i> | em 标签加粗,语义更强烈 |
删除线 | <del></del> 或者 <s></s> | del 标签加粗,语义更强烈 |
下划线 | <ins></ins> 或者 <u></u> | ins 标签加粗,语义更强烈 |
em 标签:表示语音语调的加重突出重点,表现为斜体,行内元素
<em>em 加重语气,表现为斜体</em><br> <i>i 斜体</i>
strong 标签:表示强调,重要内容,表现为加粗效果,行内元素
<strong>strong 表示语气加强</strong><br> <b>b 加粗字体</b>
ins 下划线,语气更强烈
<ins>ins 下划线语气更强烈</ins><br> <u>u 下划线</u>
del 删除线,语义上表示强调
<del>del 删除线语气更强烈</del><br> <s>s 删除线</s>
blockquote 便签:表示长引用,表现为另起一行的缩进,块元素
<blockquote>blockquote 便签表示长引用,表现为另起一行的缩进</blockquote>
q 标签:短引用,表现为双引号将内容引起来,行内元素
短引用 <q>q 表现为双引号将内容引起来</q>
br 标签:换行标签
布局标签【结构化语义标签】content sectioning
HTML5 定义了8个新的HTML 语义标签(semantic),这些元素都是块级元素。(不常用)
header 标签表示网页的头部,在网页中可以有很多头部,也可以表示网页中某一部分的头部,H5新增标签
main 表示网页的主体部分,一个页面中只会有一个main,H5
footer 表示网页(网页某一部分)的底部
nav 表示网页中的导航
side 表示和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
footer 表示网页脚部
最常用的
div 没有语义表示一个区块,div是主流布局元素
span 行内元素,无语义,一般用于在网页中选中文字
列表:
有序列表:ul
使用ul创建有序列表
li是列表项
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
无序列表:ol
使用ol创建无序列表
li是列表项
<ol> <li>one</li> <li>two</li> <li>three</li> </ol>
定义列表:
使用dl创建定义列表
使用dt表示定义的内容
使用dd对内容进行解释说明
<dl> <dt>1</dt> <dd>这是第一个列表项</dd> <dt>2</dt> <dd>这是第二个列表项</dd> <dt>3</dt> <dd>这是第三个列表项</dd> </dl>
嵌套的列表,项目符号会发生改变,还会自动向内缩进
<ul> <li>1</li> <li>2</li> <ol> <li>one</li> </ol> </ul>