H5常用标签
2019-07-09 本文已影响0人
追逐_chase
web.jpeg
文本
- 纯文本 .txt 和 .html一样是纯文本
-
html超文本标记语言 - html是
语义标签，是给文本添加上了语义，比如：主标题，二级标题等
骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
</html>
规范
HTML4.01 分为：
- Strict 表示严格的规范 ，在这个规范下有些标签是不能使用的 比如：<u><\u>
- Transitional：过渡期的 普通的
- Frameset：带有框架的
XHTML1.0(X代表的是严格的) 分为:
- Strict
- Transitional
- Frameset
在html5之后 就没有xhtml了
//快捷方式 html:5 按tab键 --普通的
// html:xt按tab键 --严格的
字符集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
//字符集 meta表示 “元”，“元”配置，就是表示基本的配置项目
content="text/html;charset=UTF-8
中文的字符集分为2种：
1： UTF-8 涵盖了国际常用的语言文字
- 一个汉字是3个字节
2：gb2312 国标 中国的字库
- 一个汉字是2个字节
关键字和页面描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1.定义描述
//meta除了可以设置字符集还可以设置页面描述
// Description 描述
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<meta name="Description" content=""/>
name是名字，content是内容
定义了一个名字为Description的meta,内容是：网易。。。
2.定义关键词 - 提高搜索的命中率，让别人看到你的网页
keywords：关键词
<meta name="keywords" content="运链 运链物流平台 掠食龙 海运 物流 物流平台 一站式服务" />
- 完整的骨架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="运链 运链物流平台 掠食龙 海运 物流 物流平台 一站式服务" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
- 空白折叠现象
- HTML中所有的 文字 之间，如果有空格，换行，tab都将会折叠为一个空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html的基本语法</title>
<link rel="stylesheet" href="">
</head>
<body>
<p>空白 折叠</p> //空白折叠现象
</body>
</html>
- 标签必须严格封闭
<> </>
1. 标签
- h
标题标签 和P段落标签
<h1> 这是主标题</h1>
<p>p是段落标签，可以表示一段文字 p是段落标签</p>
<h2> 这是二级标题 </h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是无极标题</h5>
<h6>这是6级标题</h6>
- 注意
H标签是没有嵌套关系的
如图 下图：
语义标题.png
1.1 标签的等级
- 在HTML里面所有的标签是分等级
-
容器级：里面可以放置任何东西 -
文本级：里面只可以放置，文字，图片，表单元素 -
p标签是文本级标签
-
1.2 图片
-
img标签- <img src="" alt="">
-
src:是资源路径 -
alt:警告语，当图片加载失败的时候 出来的文本提醒语句 -
img是自封闭 便签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html的基本语法</title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="images/banner.jpg" alt="没有加载成功">
</body>
</html>
- 相对路径是指相对于 网页的图片存放的位置
-
../是路径的上一级
1.3 - a 超级链接
-
a标签是一个文本级的标签 -
href超文本的缩写
<body>
<a href="https://www.baidu.com">百度</a>
//title是鼠标悬停文本
<a href="https://www.baidu.com" title = "悬停指针">百度</a>
//target = _blank 新起一页 就是是否在新窗口打开
// blank是空白的意思，就是新建一个空白的窗口
<!-- 保留 原来网址 跳转到一个新的网页 -->
<a href="https://www.baidu.com" target="_blank">百度</a>
<!-- 在原来的窗口跳转 -->
<a href="http://www.163.com" target="_self">163邮箱</a>
</body>
//不跳转 #
<a href="#" ></a>
-
定位(a标签可以定位)- 设置a标签的href属性为
#id名 - 在页面的定位位置加入一个
目标标签(可以是任意标签) - 必须给这个目标标签设置一个
id, 比如:<p id = "mubiao">这是一个目标标签</p>
- 设置a标签的href属性为
//方式一
<a href="#id" title="">定位到摸一个标签 </a>
<p id = "mubiao">目标标签</p>
//方式二
<a href="#wdzp" title=""> 定位到我的作品</a>
<h2><a name="#wdzp">我的作品 </a></h2>
html负责语义，css负责样式，JS负责页面的动态效果即使交互
2. 常用的小标签
-
hr水平线标签 -
br换行标签 -
strong和b文本加粗 标签 ,推荐使用strong -
em和i文本倾斜标签，推荐使用em -
del和s删除线标签，推荐使用del -
ins和u文本下化标签，推荐使用ins
image.png
3. 标签属性
-
style内部样式属性 -
img和style的区别
<body>
<!-- 标签的属性 可以更改标签的样式 -->
<div style="width: 100px;height: 100px;background: red" ></div>
<br>
<hr width="1000px" color="red">
<!-- 图像标签 -->
<!--
1.src是图像的资源路径
2.alt在图片加载失败的时候，提示用于
3.border 设置图片的边框
4.title 鼠标悬停时候的显示的标题文字
5.width 和 height写一个的属性的时候，另外一个属性会自适应
-->
<img src="../images/H5/11.png" alt="啊哈哈" width="500px" title="这是一个图片">
</body>
