【视频+图文详解】HTML基础3-html常用标签
图文教程
html常用标签
常用标签
1. 文档结构
- <!DOCTYPE html>:声明HTML文档类型。
- <html>:定义HTML文档的根元素。
- <head>:定义文档头部,包含元数据。
- <title>:设置网页标题,浏览器标签页显示。
- <body>:定义网页的主体内容。
2. 文本格式化
1.<h1> ~ <h6>:定义标题,<h1>是最高级,<h6>是最低级。
-注意:标题系列标签有助于浏览器搜索的优化,搜索引擎抓取标题的内容,h1标签的权重最大,但一个页面只能使用一个h1标签,如果使用多个h1标签那么搜索优先级会降低
2.<p>:定义段落。
3.<br>:换行。
4.<strong>:加粗文本,语义上表示强调。
5.<em>:斜体文本,语义上表示强调。
6.<b>:加粗文本(只是样式,语义不如<strong>)。
7.<i>:斜体文本(只是样式,语义不如<em>)。
8.<u>:下划线文本。
3. 链接与图片
- <a>:定义超链接。
- <img>:插入图片,需设置 src 属性指向图片地址。
格式: <img src="hello/ma.jpg" alt="">
-src属性:图片源;
-alt属性:图片替换文本(当图片不显示的时候会显示我们写上去的文本)
注意:hello文件和ma.jpg要放在此源代码文件夹下才会显示出来
<img src="images/1.jpg" title="鸟巢的远景">
其中title属性的作用是设置鼠标悬在图片上时看到的文本
- <link>:连接外部资源,通常用于外部样式表。
- <meta>:定义网页的元数据,如字符集、描述、关键字等。
4. 列表
- <ul>:无序列表。
- <ol>:有序列表。
- <li>:列表项。
- <dl>:定义定义列表。
- <dt>:定义定义列表项的标题。
- <dd>:定义定义列表项的描述。
5. 表格
- <table>:定义表格。
- <tr>:定义表格的行。
- <td>:定义表格的单元格。
- <th>:定义表格头部单元格,通常为加粗居中的文本。
- <caption>:定义表格的标题。
相对路径和绝对路径
(还是以上边的图片嵌入为例)
--相对路径:从当前文件或目录的位置出发,指定目标文件或目录的路径。
--绝对路径:从文件系统的根目录开始,完整指定文件或目录的位置路径。
比如相对hello文件夹(文件路径为F:\hello),ma.jpg的相对路径为hello/ma.jpg,ma.jpg的绝对路径为F:\hello\ma.jpg
--html源代码文件:就是包括这行代码的源代码文件
锚点
锚点:HTML中的一种标记,用于在同一页面内或不同页面之间创建可跳转的链接位置。
<a></a>(在指定位置添加一个超级链接);需要注意的是锚点中的锚和点的使用方法不同,后面会做出详细讲解。
--a标签的几个属性:
1.href:可以跳转链接;也可以跳转html文件
2.target属性(要搭配_blank关键词):是否在新标签页打开链接(点击链接后会打开一个新标签页然后加载内容)
【页面内跳转锚点的设置有两种方法】
关于页面内锚点的概述:如下图所示,就是我们看一些网页上面的索引
【方法一】:通过设置标签a的name属性达到页面跳转锚点的方法
锚,href属性,后面一定要加#号
<a href="#jbxx">基本信息</a>
锚点的点,name属性设置成跳转的链接
<a name="jbxx"></a>
【方法二】:设置锚点的点为标签的id属性
锚
<a href="#jbxx">基本信息</a>
锚点的点:由原来的a标签的name属性变为了其他标签id属性,使用方法跟href一致
<h3 id="jbxx">基本信息</h3>
这种方法是直接在我们的<h3>标签标题中直接引入id属性(id属性适配所有html标签)
视频教程
哔哩哔哩(B站)搜索框中输入“uid=3546393096489381”即可
用户:star010_