HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织:
<!DOCTYPE HTML>
<html>
<head>
头部相关信息
</head>
<body>
页面主体相关内容
</body>
</html>
标签解释:
#1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。
#2、<html></html> 称为根标签,所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签,头部标签在下一节中会有详细介绍,<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
#4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来。
标签关系:
并列和嵌套
并列:head 和body
嵌套:html内有body
二 HTML标签详细语法与注意点
标签的语法:
<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>
注意:
#1. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,大部分程序员都以小写为准。
#2. 标签之间是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>
#3、不是所有标签都支持互相嵌套。
三 HTML中标签分类:
单从是否可以嵌套子标签的角度去分, 标签分为两类
1:容器类标签(能嵌套其他标签)
h 系列
ul>li
ol>li
d1>dt+dd
div
2文本标签(文本标签 只能嵌套文字、图片超连接标签。
p
span
strong
em
ins
del
四 head内常用标签
1 meta 相关
#1、指定字符集
<meta charset="gbk">
#2、页面描述
<meta name="Description" content="具体描述。。。">
#3、关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易,邮箱,游戏,新闻">
#4、3秒后跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
#5、三秒刷新
<meta http-equiv="refresh" content="3">
2:非meta标签
#1、标题
<title>百度一下,你就知道</title>
#2、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">
#3、定义内部样式
<style></style>
#4、引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#5、定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>
五 body标签
h 标签
h1~ h6 标记内容为1~6级标题
p 标签 标记为内容 的一哥段落
img标签 标记一哥图片
用法:<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
2.1 src指定的图片地址可以是网络地址,也可以是一个本地地址,本地地址可以用绝对或相对路径,但通常用相对路径,相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 alt="图片加载失败时显示的内容"
2.4 title = "鼠标悬停到图片上时显示的内容"
2.5 如果没有指定图片的width和height则按照图片默认的宽高显示,如果指定图片的width和height则可能让图片变形
那如果又想指定宽度和高度,又不想让图片变形,我们可以只指定宽度和高度的一个值即可
只要指定了一个值,系统会根据该值计算另外一个值,并且都是等比拉伸的,图片将不会变形
a标签
标记一哥内容为超链接
#1、超链接标签是超文本文件的精髓,可以控制页面与页面之间的跳转,语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#2、注意:
2.1 a标签不仅可以标记文字,也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下,你就知道</a>
2.2 a标签必须有href属性,href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="template/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开,其余的值均无需记忆,
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target,那么就以自己的为准,否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容
列表标签
语义 标记一堆数据是一个整体列表
HTML分三种
1 无序列表ul>li 列表标签中使用最多的一种非常重要
2 有序列表 极少用 ol>li
3 自定义列表 经常用
<dl>
<dt>自定义标题1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</d1>
<table>标签
语义:标记一段数据为表格
#1、作用
表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行数据
td表一行中的一个单元格
#3、注意点:
表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值为0,所以看不到边框
form 标签
语义标记表单
#1、什么是表单?
表单就是专门用来接收用户输入或采集用户信息的
#2、表单的格式
<form>
<表单元素>
</form>