day03常见的基础标签使用

文章目录

1.标题字体的使用

1)标签的名称:h1-h6(默认样式的)

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

 

2)快捷生成的方法(适用于其他标签)

①快捷选中标签添加文本

原理:利用标签相同的部分进行快捷选中,例如h1-h6标签中,相同的部分为“<h”
day03常见的基础标签使用

  • 利用鼠标从左往右拖动,选中标签的共有部分→→ <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;&nbsp;恍恍惚惚&lt;&gt;&copy;&amp;
  • &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.练习题目:
day03常见的基础标签使用
2.完成情况:
day03常见的基础标签使用
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>
上一篇:JavaScript求99乘法表+求梯形面积


下一篇:html-day-36