day03常见的基础标签使用

1.标题字体的使用

1）标签的名称：h1-h6（默认样式的）

• h1不可以嵌套p标签
• 默认字体变大和加粗，在项目中经常用来表示网页中最重要的部分，logo唯一性
• h2到h6没有固定用法
• 在html语言中 例如h7写错不报错，只是没有默认样式（h1-h6）

 

2）快捷生成的方法（适用于其他标签）

①快捷选中标签添加文本

原理：利用标签相同的部分进行快捷选中，例如h1-h6标签中，相同的部分为“<h”

• 利用鼠标从左往右拖动，选中标签的共有部分→→ <h1 不能是< h1 >
• 快捷键Ctrl+D 还需要几个就按几次D（向下选择，向下选择没有相同的部分后，会重新从代码的第一行开始上往下检索）
• 再按键盘的左右按键，移动光标到想要修改或添加的位置进行操作即可

②快速生成法

示例： h$*6{文本}+回车

• 由于h1到h6标签共有部分是h
• 符号$ 表示序号，序号默认是从1开始的
• 符号* 表示前面的标签要出现多少次
• 数字6 表示出现的次数n
• 符号{}输入要生成的文本
• 当这个放法不奏效时，就删除最后的 } 再重新输入一次 } 回车即可

 

2.段落标签的使用（双标签）

1）段落标签p

默认样式：

• 段落标签默认是独占一行,会在下一行显示
• 段落标签默认是上下有间距的
• 在编辑器和浏览器中文本过多时,默认会折行到一下行进行显示

2）编辑器中常用设置

①.自动换行设置 word wrap

• win7:先点击左下角的设置按钮
• win10:下拉选择即可

②修改编辑器中字体的大小 fontsize

 

3.加粗和倾斜标签的使用

1）加粗标签 b、strong都可以表示加粗效果

<b>hhhhh</b>
<strong>hhhhh</strong>

• b、strong虽然之间有区别,但是肉眼不可见,浏览器区分不明显
• b简单 stong 表示语气加重,可以任意使用
• 官方推荐 strong

2）倾斜标签 i、em 都可以表示倾斜

<i>哈哈哈</i>
<em>哈哈哈哈</em>

都可以倾斜,有区别,但肉眼不可见浏览器区分不明显

 

4.下划线标签u

<u>下划线</u>

下划线

 

5.常用的单标签hr、br

11111 <hr>
222<br>3333

• hr 横线
• br 强制性的换行

 

6.字符实体

HTML中，符号 ; 可以省略

红红火火  恍恍惚惚<>©&

• &nbsp ; 不换行空格（;可不写 效果一样） 重要
• &gt ; >右尖括号
• &lt ; <左尖括号
• &cop ; 备案中图标
• &amp ; &

 

7.无&有序列表的使用

-由两个双标签进行嵌套组合而成的
-快捷写法（有序无序同理）：

<!--  ul>li*5 -->
    ul>li*5{hhhh}
    (ul>li*5{hhhh})*3

1）无序列表ul>li

①标签名称

• 父级标签 ul 整个列表的盒子
• 子级标签 li 表示列表条数

<ul>
      <li>hhhh</li>
</ul>

②默认样式

• 黑色实心圆
• 独占一行并换行

③作用：表示新闻列表

2）无序列表ol>li

①标签名称

• 父级标签 ol 整个列表的盒子
• 子级标签 li 表示列表条数

②默认样式

• 数字序号 从1开始
• 独占一行并换行

③作用：实现有序号的轮播图

④拓展：有序列表的属性

• type 类型 默认属性值是1 表示有序列表的序号是 a、A、i、I
• stat 序号从第几个开始 属性值是数字

<!-- 从第10开始 -->
<ol start="10">
        <li>hhhh</li>
        <li>hhhh</li>
</ol>

<!-- 表示用a、b、c这种顺序，A、i、I同理。注意！不可以从任意顺序开始，比如b、ii等，浏览器会会默认显示为数字1开始 -->
<ol type="a">
        <li>hhhh</li>
        <li>hhhh</li>
</ol>

 

8.自定义列表的使用

1）标签名称

• dl>dt+dd + 表示同级元素
• 父级标签 dl
• 第一个子级标签 dt
• 第二个子级标签 dd
• 如果有多个名词需要进行解释 不可以在一个dl 下面复制多个dt 和dd

2）标签的使用

 <dl>
        <dt>图片或者名词</dt>
        <dd>图片的解释或者名词的解释</dd>
</dl>

9.作业

1.练习题目：

2.完成情况：

3.代码：

<h3>《悯农》</h3>
    <p>&nbsp&nbsp&nbsp锄禾日当午，</p>
    <p>&nbsp&nbsp&nbsp汗滴禾下土。</p>
    <p>&nbsp&nbsp&nbsp谁知盘中餐，</p>
    <p>&nbsp&nbsp&nbsp粒粒皆辛苦。</p>

    <hr/>

    <h3>《静夜思》</h3>
    <p>&nbsp&nbsp&nbsp床前明月光，</p>
    <p>&nbsp&nbsp&nbsp疑似地上霜。</p>
    <p>&nbsp&nbsp&nbsp举头望明月，</p>
    <p>&nbsp&nbsp&nbsp低头思故乡。</p>