标签：hhhh day03 标签 常见 默认 li nbsp 列表

文章目录

• • 1.标题字体的使用
  • • • 1）标签的名称：h1-h6（默认样式的）
      • 2）快捷生成的方法（适用于其他标签）
      • • ①快捷选中标签添加文本
        • ②快速生成法
  • 2.段落标签的使用（双标签）
  • • • 1）段落标签p
      • 2）编辑器中常用设置
      • • ①.自动换行设置 word wrap
        • ②修改编辑器中字体的大小 fontsize
  • 3.加粗和倾斜标签的使用
  • • • 1）加粗标签 b、strong都可以表示加粗效果
      • 2）倾斜标签 i、em 都可以表示倾斜
  • 4.下划线标签u
  • 5.常用的单标签hr、br
  • 6.字符实体
  • 7.无&有序列表的使用
  • • • 1）无序列表ul>li
      • • ①标签名称
        • ②默认样式
        • ③作用：表示新闻列表
      • 2）无序列表ol>li
      • • ①标签名称
        • ②默认样式
        • ③作用：实现有序号的轮播图
        • ④拓展：有序列表的属性
  • 8.自定义列表的使用
  • • • 1）标签名称
      • 2）标签的使用
  • 9.作业

1.标题字体的使用

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

• h1默认字体变大和加粗，在项目中经常用来表示网页中最重要的部分，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>

标签：hhhh,day03,标签,常见,默认,li,nbsp,列表
来源： https://blog.csdn.net/Fend1/article/details/121181370

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。