html标签（自学笔记）

最新推荐文章于 2024-10-03 10:20:52 发布

Mr.Zmh

最新推荐文章于 2024-10-03 10:20:52 发布

阅读量286

点赞数

分类专栏：自学笔记文章标签： html

本文链接：https://blog.csdn.net/zmhxuexi/article/details/106105529

版权

自学笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

HTML标签的语义化

所谓的标签的语义化就是指标签的含义

语义化标签的好处

方便代码的阅读和维护
让游览器或者网络爬虫可以更好的解析,从而更好的分析其中的内容
使用语义化标签会具有更好的搜索引擎优化

核心: 就是合适的地方给一个合适的标签
语义是否良好: 就是当我们去掉CSS后网页结构依然组织有序,并具有良好的可读性
遵循原则:先确定语义的HTML ,再选用合适的CSS

HTML常用标签

排版标签

标题标签(熟记)

<h1>标题文本</h1>
...
...
...
...
<h6>标题文本</h6>

标题标签的语义: 作为标题使用,并依据重要性递减

段落标签

<p>文本内容</p>

水平线标签

<hr />单标签

换行标签

<br />单标签

div span标签(重点)

div和span是没有语义化的,是页面布局中主要的两个盒子

文本格式化标签(熟记)

标签	文字显示效果
<b></b><strong></strong>	加粗
<i></i>和<em></em>	倾斜
<s></s>和<del></del>	删除线
<u></u>和<ins></ins>	下划线

图像标签img(重点)

<img src=" " />

属性	属性值	描述
<src=" " />	URL	图像的路径
<alt=" " />	文本	图像不能显示时的替换文本
<title=" " />	文本	鼠标悬停时显示的文本
<width=" " />	像素	设置图像的宽度
<height =" " />	像素	设置图像的高度
<border=" " />	数字	设置图像边框的宽度

链接标签(a)

<a href="跳转目标" target="目标窗口的弹出方式"/>文本或者图像</a>
<!-- target="_self" 默认值,目标窗口在当前窗口打开,
	target="_blank" 默认值,目标窗口在新窗口打开 -->

外部链接需添加如:http://www.baidu.com

锚点定位

通过创建链接锚点,用户能快速定位到目标内容
创建秒点链接步骤分为两步

1.给目标文本添加a标签,并在a标签里添加href="#+id名" 以此创建连接文本
2.在想要定位的内容那里的标签内添加属性是:id="与第一步定的id名

参考文档

例：

<a href="#one">欧阳修</a>
...
...
...
...
...
...
...
<p id="one">欧阳修</p>

base标签

base标签可以设置整体链接的打开状态，添加在<head></head>内部

<head>
	<base target="_blank/_self"
</head>

常用特殊字符（只需理解）

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`

注释标签

<!-- 注释语句 -->

注释内容不会被显示到游览器窗口

路径（重点，难点）

相对路径

图像文件与HTML文件处于同一文件夹，即同级文件，这时只需输入图像文件的名称即可，如：<img src="logo.jpg" />
图像文件位于HTML文件的下一级文件夹，需输入文件夹和文件名，中间用“/”隔开，如：<img src=img/img01/logo.jpg />
图像文件位于HTML文件的上一级文件夹，需在文件名之前加入“…/”,如果是两级则是“…/…/”,以此类推，如： <img src="../logo.jpg"

绝对路径

“D:web/img/logo.jpg”或者完整的网址 “http://www.baidu.com/images/logo.jpg”

列表标签

无序列表（UL）

代码格式：

<ul>
	<li></li>
	<li type="square">方块样式</li>
	<li type="circle">空心圆样式</li>
</ul>

<ul></ul>只能嵌套<li></li>
直接在<ul></ul>里输入其他标签或者文字的做法是不被允许的
<li></li>之间可以容纳所有元素

有序列表（OL）

代码格式：

<ol type="1">
	<li></li>
	<li></li>
	<li></li>
</ol>

type属性值：
属性值为1：有序列表则按照1 2 3 4 5 ……依次排列
属性值为a：有序列表则按照a b c d e ……依次排列
属性值为A：有序列表则按照A B C D E ……依次排列
属性值为 i：有序列表则按照i ii iii iv v……依次排列
属性值为I：有序数列则按照I II III IV V……依次排列
如果不填，默认属性值为1