lesson-4 段落标记

lesson-4 段落标记

基本段落标记

段落标记

基本语法:

<p align="right|center|left">...</p> 
注：大部分的块级标记都会有align属性，但<p>中应用比较少

p标记的嵌套：p标记里不能嵌套块级标记。（可以理解为p标签为最基本的块级标记。）

p标记也不能嵌套p标记。

p标签嵌套p标签时，文章会被切割的七零八落，因为浏览器会在从前到后自动为p标签进行配

对，如果没发现尾标记，则会自动添加一个p的尾标记。

段间距默认18px。

换行标记

对文字进行强制换行

基本语法：

<br> 
单标记 没有属性 与之对应的是<nobr>，强制不换行。
内容超出时，网页就会出现水平滚动条

注：这里的换行不是另起一段，而仅仅是简单的换行。（换行后由于仍然属于同一段，因此间距还是行

间距）

单标记属于空标记，和块级标记和行内标记并列。

居中标记

可以对任何东西居中（图片、表格等）

基本语法：

<center>...</center> 没有属性

水平分割线

单标记

作为段落与段落的分割线

基本语法：

<hr width="" size="" align="" noshade> 

-- width 宽度（默认为100%，此时铺满界面，也可以用像素表示） 
-- size 粗细 
-- color 颜色 
-- align 水平对齐方式（在线没有充满是使用，默认居中） 
-- noshade 去掉阴影，在设置颜色后自动失效（noshade="noshade"）

预格式化标记

默认是空格和回车会自动压缩为一个空格，进行预格式化处理后会进行原样输出（空格就显示空格，回

车就是换行）

基本语法：

<pre>...</pre> 

pre套p出现于就近原则冲突问题。

段落缩进

基本语法：

<blockquote>...</blockquote> 
用来表示引用内容，整体缩进5个字符。如果嵌套，则缩进距离叠加。

总结：

标记	属性	作用
<p >....</p>	align	段落标记	块级
<br/>	无	换行	单标记
<center>.../center>	无	居中	块级
<hr>	width size color align noshade	分割线	单标记
<pre>...</pre>	无	预格式化处理	块级
<blockquote>...</blockquote>	无	段落缩进	块级

结构性标记（容器）

旧版本容器

<div>和<span>

div作用：相当于一个容器，里面可以写段落、标题、表格、图片等，可以把里面的内容看成一个独立

的对象，用css控制，整体的样式都会改变。

div是块级容器，span是行内容器。

注：div与span的区别

H5新增容器

H5新增容器（通过细分，使其更加的语义化）：

• <article> 用于指定页面上独立、完整的一片文章或区域。

• <section> 对页面元素进行分块（UI版嵌套在article里面） section侧重于文章分块，article侧重

  于整片文章。

• <nav> 用于定义导航

• <aside> 用于定义当前页面的附属信息。（即网页的侧边栏）

• <header> 用于定义article元素文章头部信息

• <footer> 用于定义脚注部分（包含文章的版权作者等）