HTML常用标签

注释标签

：vscode快捷键ctrl+/

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即<h1>到<h6>

特点：

加了标题的文字会变得加粗，字号也会依次变大
一个标题独占一行

    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果自己看</h6>

段落标签和换行标签

<p>标签用于定义段落

标签语义：可以把HTML文档分割为若干段落

特点:文本在一个段落中会根据浏览器窗口的大小自动换行

换行标签<br/> 强制换行

特点：<br/> 是一个单标签

    <p>这是一个段落标签</p>
    <br/>
    <p>这也是一个段落，不过换行了</p>

文本格式化标签

为文字设置粗体，倾斜或者下划线，~~删除线~~等效果时，这个时候就需要文本格式化标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	`<strong> </strong>`或`<b> </b>`	`string` 标签加粗语义更强烈
倾斜	`<em> </em>`或`<i> </i>`	`em`标签加粗语义更强烈
删除线	`<del> </del>` 或`<s> </s>`	`del`标签加粗语义更强烈
下划线	`<ins> </ins>` 或`<u> </u>`	`ins`标签加粗语义更强烈

    <h1>文本格式化标签</h1>
    <b>加粗文字</b>
    <strong>语义更强烈的加粗文字</strong>
    <br>
    <i>倾斜</i>
    <em>语义更强烈的倾斜文字</em>
    <br>
    <s>删除线</s>
    <del>语义更强烈的删除线</del>
    <br>
    <u>下划线</u>
    <ins>语义更强烈的下划线</ins>

`<div>`和`<span>`标签

布局需要的知识，不懂忽略，往下看

<div>和<span>标签是没有语义的，他们就是一个盒子，用来装内容的

div是一个division的缩写，表示分割，分区。span意为跨度，跨距

特点：

<div>标签用来布局，但是一行只能放一个<div>。大盒子
<span>标签用来布局，一行上可以有多个<span>。小盒子

        <div>div标签独占一行，不懂往下看</div>
        <div>div标签独占一行，不懂往下看</div>
        <span>百度</span>
        <span>哔哩哔哩</span>
        <span>搜狐</span>

图像标签

HTML图像是通过<img>标签进行定义的
- src属性:表示图片的文件路径或URL地址
- alt属性:用于定义图片的描述性文本，当图片无法加载时，会显示alt属性的文本内容（替换文本）
- width和height属性:控制图片的宽高(设置任意一个另一个等比例缩放)
- 使用title属性来设置图片标题。title属性可以在用户鼠标悬停在图片上时显示。(提示文本)
- border设置图像边框
- <img src="4.png" alt="图片加载未成功！！！" width="200px" head="200px" title="我是title" border="15">

注意点：

图像标签可以拥有多个属性，必须写在在标签名的后面
属性之间不分先后顺序但是要用空格分开
属性采用键值对的格式，即key="vakue"的格式
1. 如：属性=“属性值”

路径

路径分为：1. 相对路径 2. 绝对路径

相对路径

从当前文件开始出发找目标文件的过程

相对路径分类	符号	说明
同级目录	`目标图片.gif` `./目标图片.gif`	1. `<img src="目标图片.gif">` 2. `<img src="./目标图片.gif">`
下级目录	/	`<img src="images/目标图片.gif" alt="">`
上级目录	../	`<img src="../sucai/1.jpg">`

		<!-- 同级目录 -->
        <img src="./1.jpg" alt="">
		<!-- 下级目录 -->
        <img src="./sucai/1.jpg" alt="">
		<!-- 上级目录-->
        <img src="../sucai/1.jpg" alt="">

绝对路径

目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

<!-- 绝对路径 -->
    <img src="C:/Users/Liming/Desktop/day1/imgages/map.jpg" alt="">
网络中的绝对路径
<img src="https://cdn.jsdelivr.net/gh/yuechuya/Pictures@master/img/%E6%B5%8B%E8%AF%95.jpg" alt="">

超链接标签

语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>

href：用于指定链接目标的url地址(必须属性)当为标签应用href属性时，它就具有了超链接的功能

target：用于指定链接的打开方式。其中_self为默认值 当前窗口打开，_blank为在新窗口中打开方式

链接的分类：

外部链接：<a href="https://www.qq.com">腾讯</a>
内部链接：<a href="yue.html">内部链接</a>
空链接：<a href="#">空链接</a>
下载链接：<a href="yue.zip">内部链接</a>
网页元素链接：在网页中的各种元素，如：文本，图像，表格，音频，视频等都可以添加超链接
锚点链接：当我们点击链接，可以快速定位到页面的某个位置
1. 在链接文本的href属性中，设置属性值为#名字的形式，如：<a href="#two">标签2</a>
2. 找到目标标签，里面添加一个id属性=刚才的名字，如：<h1 id="two">标签2</h1>

       <!-- 外部链接 -->
        <a href="https://www.qq.com" target="_self">腾讯 当前窗口打开</a>
        <a href="https://www.qq.com" target="_blank">腾讯 新窗口打开</a>
        <!-- 空链接 -->
        <a href="#"></a>
        <!-- 内部链接 -->
        <a href="01-HTML语法规范.html"></a>
        <!-- 网页元素链接 -->
        <a href="https://www.qq.com"><img src="https://cdn.jsdelivr.net/gh/yuechuya/Pictures@master/img/%E6%B5%8B%E8%AF%95.jpg" alt="" width="20%" target="_blank"></a>
        <!-- 下载链接 -->
        <a href="1.zip">下载链接</a>

媒体标签

添加音频
<audio src="1.mp3" controls></audio>
添加视频
<video src="2.mp4" controls></video>
- src:视频的路径
- controls：显示播放的控件必须添加
- loop：循环播放
- autoplay：自动播放 (谷歌浏览器中需配合muted实现静音播放)
- 视频音频标签目前支持三种格式: MP4（MP3）、WebM（wav）、Ogg

特殊字符(语义)

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体

HTML 中的预留字符必须被替换为字符实体。

&lt;div&gt;和&lt;span&gt;
月&nbsp;&nbsp;&nbsp;&nbsp;初
```<details>
<summary>点击查看代码</summary>

点击查看代码

```

posted @ 2023-11-21 20:36 月初吖阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

yuechuya