- HTML 标签是由尖括号包围的关键词
- HTML 分成单标签和双标签
- 双标签会多一些,一般都是成对出现的,如
<div></div>
, 左边的是开始标签,右边的是结束标签 - 单标签
<br>
- 双标签会多一些,一般都是成对出现的,如
- 标签关系
- 有包含关系,也有并列关系
基本结构标签
-
<!DOCTYPE>
: 文档类型的声明标签,作用是告诉浏览器使用哪种 HTML 版本来显示网页
<!DOCTYPE html>
表示的是使用 HTML5 版本 -
<html></html>
: 页面中最大的标签,称为根标签 -
<head></head>
: 文档的头部标签,在该标签中需要设置 title 标签 -
<title></title>
: 设置网页的标题 -
<body></body>
: 页面的主要内容都是放在该标签下面的
head 标签中的内容
-
<meta charset="UTF-8">
: 设置 HTML 文件应该使用哪种字符编码,常用的有 GB2312 (简体中文),BIG5(繁体中文),GBK(包含简体和繁体),utf-8,其中 utf-8 被称为万国码,基本包含了全世界所有国家需要用到的字符
常见标签
标签语义
- 根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰
-
标题标签:
- 双标签
- <h1> - <h6> 一共 6 级标签
- 标签语义:作为标题使用,表示重要性,并且依据重要性递减
- 一个标题独占一行
-
段落标签
- 双标签
- 可以用来定义段落,使文字显得更有条理
- 会根据浏览器窗口的大小自动换行
- 段落和段落之间留有空隙
-
换行标签
- 单标签
- 强制文本换行
- 是单词
break
的缩写,意为打断,换行
-
文本格式化标签
- 双标签
- 标签语义:突出重要性,比普通文字更重要
-
strong
或者b
:加粗标签,推荐使用strong
-
em
或者i
:倾斜标签,推荐使用em
-
del
或者s
:删除线标签,推荐使用del
-
ins
或者u
:下划线标签,推荐使用ins
-
div
和span
- 双标签
- 这两个标签都没有语义,只是一个盒子,用来装内容的
-
div
:- 单独占一行
-
span
:- 一行可以放很多个
span
- 一行可以放很多个
img
标签
- 单标签
<img src=""/>
- 标签属性:
-
src
: 图片路径 -
alt
:当图片显示不出来的时候显示的该属性里面的内容 -
title
:当鼠标放上去的时候,显示的是该属性中的内容 -
width
:设置图片的宽度,单位是像素 -
height
:设置图片的高度,单位是像素 -
border
:设置图片的边框粗细
-
a
标签(超链接)
- 双标签
- 标签属性
-
href
:跳转目标 -
target
:默认为_self
,表示在当前窗口打开,_blank
表示在新窗口中打开
-
- 链接分为以下几种:
- 外部链接:跳转到外部网页中,此时
href
写域名 - 内部链接:在网站内部页面之间进行跳转,此时
href
写页面的路径即可 - 空链接:如果当时没有确定链接目标的话,
href
可以写 # - 下载链接:当
href
的值是一个文件或者压缩包的时候,会下载这个文件 - 网页元素链接:在网页的各种元素中,如文本,图像,表格,音频,视频等都可以添加链接
- 锚点链接:点击链接,可以快速定位到页面中的某个位置
- 具体案例
<h3 id="two">顶部</h3> <a href="#top">回到顶部</a>
- 外部链接:跳转到外部网页中,此时
网友评论