文本
- 纯文本 .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>
- 标签必须严格封闭 <> </>
标签
- h标签 和 P标签
<h1> 这是主标题</h1>
<p>p是段落标签，可以表示一段文字 p是段落标签</p>
<h2> 这是二级标题 </h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是无极标题</h5>
<h6>这是6级标题</h6>
- 注意H标签是没有嵌套关系的
如图 下图：
语义标题.png
标签的等级
- 在HTML里面所有的标签是分等级
- 容器级 ：里面可以放置任何东西
- 文本级：里面只可以放置，文字，图片，表单元素
- p标签是文本级标签
图片
- 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>
- 相对路径是指相对于 网页的图片存放的位置
- ../ 是路径的上一级
超级链接
- a标签 是一个文本级的标签
- href 超文本的缩写
<a href="https://www.baidu.com">百度</a>
//title是鼠标悬停文本
<a href="https://www.baidu.com" title = "悬停指针">百度</a>
//target = _blank 新起一页 就是是否在新窗口打开
// blank是空白的意思，就是新建一个空白的窗口
<a href="" target=""></a>
//不跳转 #
<a href="#" ></a>
- 定位(a标签可以定位)
- 设置a标签的href属性为 #id名
- 在页面的定位位置加入一个目标标签(可以是任意标签)
- 必须给这个目标标签设置一个id, <p id = "mubiao">这是一个目标标签</p>
//方式一
<a href="#id" title="">定位到摸一个标签 </a>
<p id = "mubiao">目标标签</p>
//方式二
<a href="#wdzp" title=""> 定位到我的作品</a>
<h2><a name="#wdzp">我的作品 </a></h2>
html负责语义，css负责样式，JS负责页面的动态效果即使交互
网友评论