文本格式化

标签

1. 标题标签

  • h1~h6字体依次变小,都有加粗的样式。
  • h1为主标题，一个文档中出现一次。

代码：

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果：

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2. 段落标签

1
<p>这是一段段落</p>

效果：

这是一段段落

3. 文本格式化标签

（1）strong / b

1
2
<strong>文本加粗，有强调作用</strong>
<b>文本加粗</b>

效果：
文本加粗，有强调作用
文本加粗

（2）em / i

1
2
<em>文本倾斜，具有强调作用</em>
<i>文本倾斜</i>

效果：
文本倾斜，具有强调作用
文本倾斜

（3）mark

1
<mark>表示被标记或者高亮的文本</mark>

效果：
表示被标记或者高亮的文本

（4）del/s ins/u

1
2
<ins>标记插入字，下划线</ins>
<u>标记插入字，下划线(html5不建议使用)</u>

效果：
标记插入字，下划线
标记插入字，下划线(html5不建议使用)

1
2
<del>标记删除字</del>
<s>标记删除字(html5不建议使用)</s>

效果：
标记删除字
标记删除字(html5不建议使用)

（5）sub / sup

1
2
下标 H<sub>2</sub>O
上标 10<sup>2</sup>

效果：
下标 H2O
上标 102

（6）br

1
<p>换行自闭合<br />标签(单标签)</p>

效果：

换行自闭合
标签(单标签)

### 4.图片 
1
<img src="https://img-blog.csdnimg.cn/20200222221223793.jpg" width="198" height="198" alt="嗨嗨，醒醒，敲代码了！" title="这是一张表情包" >
效果： 嗨嗨，醒醒，敲代码了！

(手写五角星，并且标红了)图片四要素：

  • src（图片路径）
  • width（原始宽度）
  • height（原始高度）
  • alt（在图片无法加载时所代替的文本）
  • title（用于图片描述）

提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。

提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

5.路径url

1. 绝对路径

1.相对于项目

  • (1)/ html页面所在的文件夹。
  • (2) ./ html页面所在的文件夹内部。
  • (3) ../ html页面所在文件夹的外面一层。

2.相对于文件夹

  • （1） ./ 同级文件夹
  • （2） ../ 上级文件夹
  • （3） / 从根目录出发
  • 相对路径相对灵活，但易出错，切记将其输入正确。

6.a标签

1
<a href="http://www.w3school.com.cn" target="_blank">W3School</a>

效果：
W3School

target属性规定在何处打开链接，_self是它的默认属性即在本页面中打开,_blank是新建一个网页打开。

7. 列表

无序列表 ul

1
2
3
4
5
6
7
8
<ul>
    <li>英雄联盟</li>
    <li>地下城勇士</li>
    <li>王者荣耀</li>
    <li>穿越火线</li>
    <li>绝地求生</li>
    <li>GTAV</li>
</ul>

效果：

有序列表 ol

1
2
3
4
5
6
7
8
<ol>
    <li>英雄联盟</li>
    <li>地下城勇士</li>
    <li>王者荣耀</li>
    <li>穿越火线</li>
    <li>绝地求生</li>
    <li>GTAV</li>
</ol>

效果：

自定义列表 dl

1
2
3
4
<dl>
	<dt>表头</dt>
	<dd>内容</dd>
</dl>

type属性在html5中不赞成使用，我们在之后会用css样式来取代它

8. demo

demo1

1
2
3
4
5
6
<h1 align="center">静夜思</h1>
<hr/>
<h3 align="center"><i>李白</i></h3>
<p align="center">窗前<span style="color:#0000FF">明月光</span>，<br/>疑是<mark>地上霜</mark>。</p>
<p align="center"><ins>举头</ins>望明月，<br/>
<del>低头</del>思故乡。</p>

效果：

静夜思

李白

窗前明月光，
疑是地上霜。

举头望明月，
低头思故乡。

demo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>
                <dl>
                    <dt><h2>同志们</h2><dt>
                    <dd>
                    	<img src="https://img-blog.csdnimg.cn/20200222221223793.jpg" width="198" height="198" alt="嗨嗨，醒醒，敲代码了！" title="这是一张表情包" >
                    <dd>
                </dl>
                <dl>
                    <dt><h2>化学</h2><dt>
                  <dd>2H<sub>2</sub>+O<sub>2</sub>=2H<sub>2</sub>O</dd>
                </dl>
            </li>
            <li>有序列表</li>
        </ol>
    </li>
    <li>无序列表</li>
</ul>

效果：

  • 无序列表
  • 无序列表
    1. 有序列表
    2. 有序列表

    3. 同志们

      嗨嗨，醒醒，敲代码了！

      化学

      2H2+O2=2H2O
    4. 有序列表
  • 无序列表