HTML常用标签
运行环境:浏览器,建议设置谷歌浏览器为默认浏览器,作为网页文件的运行环境。ctrl + 鼠标左键
1. HTML介绍
HTML 英文全称是 Hyper Text Markup Language,中文译为“超文本标记语言”。是构成网页的基本元素,是一种规范,一种标准。
-
超文本:即超越纯文本,这意味着HTML不仅能包含文本,还能包含图片、表格、列表、链接、按钮、输入框等内容。
-
标记语言:HTML通过不同的标签来标记不同的内容
-
标签:标签也称为标记或元素,用于在网页中标记内容。不同标签具有不同的含义,学习 HTML 其实就是学习各个标签的含义,根据实际场景的需要,选择合适的标签,从而制作出精美的网页。
-
语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示。
-
分类:双标签\单标签
-
标签属性:标签属性书写在开始标签中,使用空格与标签名隔开。
-
-
书写流程
-
创建网页文件,使用
.html
作为文件后缀 -
添加网页的基本结构
-
根据实际场景的需要,选择合适的标签
<!DOCTYPE html> <!-- 文档声明 告诉浏览器用html5版本来显示 --> <!-- 根标签 所有网页的标签都写在HTML标签里面 --> <html lang="en"> <!-- head 保存了页面的相关配置 --> <head> <!-- 元信息 设置网页的基本信息 浏览器打开这个网页的时候使用什么编码 读取整个HTML文档 --> <meta charset="UTF-8"> <!-- 网页标题 当前网页的主体 --> <title>这里写标题</title> </head> <body> 网页的主体 </body> </html>
-
2. 常用标签
2.1 标题标签
HTML 中提供了从<h1>
到<h6>
六个级别的标题标签,与word中的标题类似。使用标题可以使网页的层次结构更加清晰。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
-
h是head的缩写 头部 标题的意思
-
标题标签特点 文字会变大变粗 从 h1到h6逐渐减小
2.2 段落标签
HTML中可以使用段落标签,来将文本中的内容分割为若干个段落。分段显示要文字根据有条理性
<p>段落文本</p>
2.3 文本格式化标签
通过这些文本标签我们可以格式化文本(为文本添加样式),例如使文本加粗、倾斜或者添加下划线等。
标签 | 说明 |
---|---|
<b>...</b> 和<strong>...</strong> | 加粗 |
<u>...</u> 和<ins>...</ins> | 下划线 |
<i>...</i> 和<em>...</em> | 倾斜 |
<s>...</s> 和<del>...</del> | 删除线 |
<span>行分区标签,用于对特殊文本特殊处理</span>
标签语义化:根据语义去选择正确的标签,写标题的时候 使用h系列的标签。写段落的时候就是要p标签
好处:
-
对于我们人,好理解 好记忆
-
对于搜索引擎,有利于解析
2.4 换行标签
文本会根据浏览器窗口的大小自动换行
让文字强制换行显示
<br>
2.5 字符实体
在HTML书写某些特殊字符的时候,可能会遇到问题,比如要在网页里面显示出字符 < >,就有可能和我们的标签冲突,所以有些特殊字符需要用对应代替的写法(字符实体)表示
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"¥"
2.6 容器标签
常用于页面结构划分,结合CSS实现网页布局
<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>
简写 div#top然后按Tab键(可写id) div.top然后Tab键(可写calss)
2.7 图片标签
恰当地使用图片可以让网页更加精美。HTML 使用 <img>
标签插入图片。<img>
是单标签,只包含属性,没有结束标签。
标签上可以有多个属性,我们在写的时候属性和属性之间使用空格隔开。
属性是没有顺序的 没有先后
属性 | 说明 |
---|---|
src | 指定需要展示图片的路径 |
alt | 替换文本:当图片加载失败时,显示的文字 |
title | 提示文本:当鼠标悬停时,显示的文字 |
width | 图片的宽度 |
height | 图片的高度 |
属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放
如果同时设置了width和height两个,若设置不当此时图片可能会变形
<img src="图片路径" alt="当图片加载失败时,显示的文字" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">
2.8 超链接标签
超链接是指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是当前网页中的其它位置。链接的两端分别称为源锚点和目标锚点,通过点击源锚点即可以跳转到目标锚点。在HTML中,我们使用<a>
标签来表示超链接。
可以在<a>标签里使用使用target=“ ” 来确定如何打开超链接到的界面
取值 | 说明 |
---|---|
_self | 默认值在当前窗口打开页面 |
_blank | 在新窗口打开页面 |
2.9 列表标签
在网页中按照行展示关联性的内容
-
种类:无序列表、有序列表、自定义列表
-
无序列表:在网页中表示一组无顺序之分的列表
-
标签组成
-
ul标签
:表示无序列表的整体 -
li标签
:表示无序列表的每一项
-
-
-
有序列表:在网页中表示一组有顺序之分的列表
-
标签组成
-
ol标签
:表示有序列表的整体 -
li标签
:表示无序列表的每一项
-
-
去掉页面中的黑点样式可以使用 style-list: none
也可以引入外部文件
html {
font-family: "Microsoft YaHei", serif;
font-size: 14px;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
/* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 */
a {
text-decoration: none;
}
/* 閲嶇疆琛ㄦ牸鍏冪礌 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*鍥剧墖鍧楀寲涓庡幓鎺塱e杈规*/
img {
border: 0;
}
-
自定义列表:在网页的底部导航中通常会使用自定义列表实现
-
标签组成
-
dl
标签:表示自定义列表的整体 -
dt
标签:表示自定义列表的主题 -
dd
标签:表示对于主题的每一项内容
-
-