常用的标签

最新推荐文章于 2023-08-20 11:26:25 发布

我是打工人

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量1.5k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/szydqq/article/details/123289854

版权

1.文本标题标签

标签名称: h1~h6 双标签

默认样式

- 文字会越来越小

- 文字的加粗效果越来越弱

- 文本默认独占一行下一个标签会在下一行显示

标签作用

- h1用来存放网站中最为重要的部分 logo 唯一性

- h2到h6标签可以用来存放文本内容没有什么固定用法

我是一只大灰狼

效果图：

2.加粗和倾斜

加粗和倾斜标签的使用

1.加粗标签的使用

- 标签名称 b、strong 之间是有区别的 strong效果会明显一些但是肉眼不可见浏览器区分不明显

- 两个标签都是表示加粗的可以任意使用官方建议使用strong 表示强调

2.倾斜标签的使用

- 标签名称 i、em 之间是有区别的 em效果会明显一些但是肉眼不可见浏览器区分不明显

- 两个标签都是表示倾斜的可以任意使用官方建议使用em 表示强调

效果图：

3.列表标签

列表标签的使用: 无序列表、有序列表、自定义列表

1.无序列表

标签名称:

- 父级标签 ul 表示列表盒子

- 子级标签 li 表示列表

默认样式

- 有黑色的实心圆是父级ul的继承给子级li的

- 默认独占一行并且会换行显示

- 缩进效果

作用: 新闻列表

2.有序列表

标签名称

- 父级标签 ol

- 子级标签 li

默认样式

- 有序号是父级ol的继承给子级li的

- 默认独占一行并且会换行显示

- 缩进效果

作用:轮播图

拓展:常见的属性(只有有序列表才有)

- type 类型可以设置列表前面的符号是怎样的 1/a/A/i/I

- start 表示从第几个开始的属性值必须是数字

3.自定义列表

标签名称

- 父级标签 dl

- 子级标签

- dt

- dd

<body>
    <ul>
        <li>今天是周一 </li>
        <li>今天是周二</li>
        <li>今天是周三 </li>
        <li>今天是周四 </li>
        <li>今天是周五 </li>
    </ul>
    <!-- 快捷写法 ul>li*5{文本内容} -->
    <hr>
    <ol type="a" start="10">
        <li>这是一段有序的列表标签</li>
        <li>这是一段有序的列表标签</li>
        <li>这是一段有序的列表标签</li>
        <li>这是一段有序的列表标签</li>
        <li>这是一段有序的列表标签</li>
    </ol>
    <hr>
    <dl>
        <dt>图片或者是名词</dt>
        <dd>图片和名词的解释</dd>
    </dl>
    <!-- 快捷写法 dl>dt+dd -->
    <dl>
        <dt>哈哈</dt>
        <dd>rap篮球</dd>
    </dl>
</body>

效果图：

4.超链接标签

网页: 由后缀名.html文件构成的

网站: 由若干个网页拼接在一起组成的

超链接标签的使用(点击可以跳转到新的页面)

标签名称: a

默认样式

- 超链接标签默认有下划线

- 默认字体是有颜色的

- 鼠标指针移上去的时候会变成手型(引导用户点击)

属性

- href 跳转地址路径

- title 提示文本鼠标移入当前文本时候会出现一段提示

- target 打开新窗口的方式

- _self 默认值打开窗口覆盖原窗口

- _blank 打开一个新的窗口

<body>
    <!-- http 协议 合同 -->
    <a href="http://www.baidu.com" title="点击你会跳转到百度首页">点击跳转到百度首页</a>
    <a href="http://www.1000phone.com">千锋</a>
</body>

效果图：

5.图片标签

图片标签的使用

标签名称: img

属性

- src 图片引入的路径

- alt 表示当图片加载失败的时候一段提示文本

- title 提示文本

了解的属性(html属性的单位是可以省略的-web中的单位是像素px)

- width 宽度

- height 高度

- border 边框

<body>
    <img src="https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ed21bc3a9f79fba6eddc451da9201?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto" alt="当前图片是xx 网络状态不佳 加载失败.." title="这是一张好看的图片" width="100" height="200" border="1">
</body>

效果图：

6.span和div标签

html+css 就是div+span组成

div:没有任何实际的含义，只是一个盒子，用来做网页布局

span:没有任何实际的含义，只是一个盒子，用来包裹文本内容

7.标签之间的嵌套关系

标签之间的嵌套关系

- 常见的嵌套关系加粗和倾斜、ul>li>ol>li

- p和h标签之间的嵌套

- p和p标签不可

- h和h标签不可

- p和h标签 h1可以嵌套p

- a>img

- 总结: div(块级元素) 可以嵌套一切

8.表格标签：table，tr，td

- table 表示表格

- tr 表示表格中的行

- td 表格表格中的列(行与列相交部分的单元格)

4.其他标签

下划线标签 u

强制性换行 br

水平线/横线 hr

上标注册商标 sup

下标水的化学方程式 sub

常见的转义字符

  不换行空格

> > 右尖括号

< < 左尖括号

® 注册商标 ®

<body>
    <u>表示  <br/>    当前文本会有下划线</u>
    <!-- 编辑器中写很多空格和换行符号默认只会解析一次 -->
    <hr>
    你好<sup>TM</sup>
    H<sub>2</sub>O
    <p>同学改天一起打游戏    &nbsp;&nbsp;&nbsp;&nbsp;     你玩石头人 我亚索贼6</p>
    &lt;&gt;《》
    &copy;©
    &reg;
</body>