113 lines
3.6 KiB
Markdown
113 lines
3.6 KiB
Markdown
# html 主要标签
|
||
## 文字相关的标签
|
||
|
||
### 标题和段落
|
||
**标题标签（hn）**
|
||
* h1
|
||
* h2
|
||
* h3
|
||
* h4
|
||
* h5
|
||
* h6
|
||
> h1~h6标用来声明标题，h1定义最大的标题，h6定义最小的标题，注意不要用来改变同一行的文字大小，这种样式需求应使用层叠样式表（css）实现
|
||
|
||
实例：
|
||
<h1>这是h1</h1>
|
||
<h2>这是h2</h2>
|
||
<h3>这是h3</h3>
|
||
<h4>这是h4</h4>
|
||
<h5>这是h5</h5>
|
||
<h6>这是h6</h6>
|
||
|
||
**段落标签**
|
||
* p
|
||
> 在html中，每个段落是通过<p> 标签进行定义的。
|
||
|
||
实例：
|
||
|
||
```
|
||
<p>我是一个段落标签</p>
|
||
```
|
||
|
||
阅读下面的代码体会合理的结构层次
|
||
效果：
|
||
|
||
<h1>三国演义</h1>
|
||
|
||
<p>罗贯中</p>
|
||
|
||
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
|
||
|
||
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
|
||
|
||
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
|
||
|
||
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>
|
||
|
||
<h3>却说张飞</h3>
|
||
|
||
<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>
|
||
```
|
||
<h1>三国演义</h1>
|
||
|
||
<p>罗贯中</p>
|
||
|
||
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
|
||
|
||
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
|
||
|
||
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
|
||
|
||
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>
|
||
|
||
<h3>却说张飞</h3>
|
||
|
||
<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>
|
||
```
|
||
|
||
> 结构层次原则：
|
||
> 1.您应该最好只对每个页面使用一次\<h1> — 这是顶级标题，所有其他标题位于层次结构中的下方。
|
||
>2.请确保在层次结构中以正确的顺序使用标题。不要使用\<h3>来表示副标题，后面跟\<h2>来表示副副标题 - 这是没有意义的，会导致奇怪的结果。
|
||
>3. 在可用的六个标题级别中，您应该只在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。
|
||
|
||
## 列表 list
|
||
### 无序列表 ul-li
|
||
<ul style="list-style:none">
|
||
<li>香菱</li>
|
||
<li>皇女</li>
|
||
<li>旅行者</li>
|
||
<li>派蒙</li>
|
||
</ul>
|
||
|
||
```
|
||
<ul style="list-style:none>
|
||
<li>香菱</li>
|
||
<li>皇女</li>
|
||
<li>旅行者</li>
|
||
<li>派蒙</li>
|
||
</ul>
|
||
```
|
||
|
||
<ol style="list-style:none">
|
||
<li>锅巴</li>
|
||
<li>奥兹</li>
|
||
<li>丘丘人</li>
|
||
<li>应急食品</li>
|
||
</ol>
|
||
|
||
```
|
||
<ol style="list-style:none">
|
||
<li>锅巴</li>
|
||
<li>奥兹</li>
|
||
<li>丘丘人</li>
|
||
<li>应急食品</li>
|
||
</ol>
|
||
```
|
||
|
||
> 这里的ul和ol 都会在列表前面自带一个符号或者数字 为了去掉这个数字或者改变无序列表前面的符号 请不要在html 的ul标签中使用type属性改变符号，推荐使用css属性 list-style属性来改变 前面的标志或数字
|
||
|
||
|
||
|
||
阅读上面的文档，完成以下练习
|
||
|
||
1. 新建一个html页面， |