HTML第2天 HTML骨架与标签_.html文件没有html骨架标签结构,只放标签为什么也能显示?-优快云博客

HTML骨架与标签

用sublime生成HTML骨架
HTML标签

用sublime生成HTML骨架

输入：

html:5

或者

敲击Tab
得到：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个HTML版本？HTML有很多版本，那我们应该告诉用户和浏览器我们使用的版本号

< !DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或ⅪHTML标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析

注意：一些老网站可能用的还是老版本的文档类型比如XHTML之类的，但是我们学的是HTML5，而且HTML5的文档类型兼容性很好（向下兼容原则），所以大家可以放心使用HTML5的文档类型就好了

字符集

<meta charset="UTF-8" />

HTML标签的语义化

标签的含义

为什么要有标签语义化
1.方便代码的阅读和维护
2.同时让浏览器或者网络爬虫可以更好的解析，从而更好的分析其中的内容
3.使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签
语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性
不是谁都能看懂这部分代码
遵循的原则：先确定语义的HTML，再选择合适的CSS

HTML标签

首先HTML和CS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签

<hn>   </hn>

应用：

<h1></h1>
<h6></h6>

段落标签

<p>   </p>

水平线标签

<hr />

换行标签

<br />

换行之后的行间距较近

div span标签

div和span是没有语义的，是我们网页布局主要的2个盒子

<div>   
</div>
<span>
</span>

文本格式化标签

在这里插入图片描述

标签属性

标签属性的基本语法格式如下：

 <标签名 属性1="属性值1" 属性2="属性值2"...>   内容 </标签名>

应用：

<hr width = "600" color = "red"/>

标签属性
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。

图像标签

<img src= "图像URL" />

在这里插入图片描述

注意：
1.只修改宽度，高度也等比例缩放
2.边框的单位也是像素，黑色填充

链接标签

<a href= "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>

href：Hypertext Reference 超文本引用

注意：
1.外部的URL地址都需要在前面加上http://
2.跳转目标也可以是内部的html文件
3.跳转目标为#时可以暂时设置一个空链接
4.target = "_blank"可以以打开一个新页面的方式打开超链接

锚点定位

创建锚点定位需要：

个人生活 <br />
<hr />
 <h3>个人生活</h3>

→

<a href = "#personal_live">个人生活 </a><br />
<hr />
 <h3 id = "personal_live">个人生活</h3>

base标签

在head标签中插入这样一个base标签，则所有的打开的超链接都会以新窗口的形式打开：

<head>
	<base target = "_blank"/> 
</head>

注意：
1.base标签的target优先级低于a标签的

特殊字符标签

在这里插入图片描述

注释标签

<!--注释语句-->