HTML基本结构

文章目录

Tips

标签名称、属性名称必须小写
标签必须严格嵌套，并且必须闭合，即使是空标签
属性值必须用" "
样式表：
内联样式：使用style属性在标签中引入CSS样式
内部样式表：在<head>的<style>标签中写CSS代码
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式表
链接式：<link/> ：使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
导入式：@import ：客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。
优先级：行内样式 > 内部样式表 > 外部样式表
推荐外联，因为可以将代码分离，简洁明了

基本结构

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>HTML总结</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link href="HTML.css" rel='stylesheet' type='text/css'>
	<script src='main.js'></script>
</head>
<body>

</body>
</html>

详解

 <!DOCTYPE html>

HTML的文档声明, 用于声明该文件的基本信息（HTML版本）

<html>

向搜索引擎表示该页面是html语言

<head lang="en">

语言为英文lang 即 language，而 en 即english

<meta charset='utf-8'>

声明字符集为UTF-8 ，仅仅告知浏览器用哪个字符集识别文件内容，而非设置

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题

<title>HTML总结</title>

页面标题，即浏览器上方标签名称

<meta name='viewport' content='width=device-width, initial-scale=1'>

让网页的宽度自动适应手机屏幕的宽度

width：可视区域的宽度，值可为数字或关键词device-width（设备屏幕的宽度）
intial-scale：页面首次被显示时可视区域的缩放级别，=1.0表示页面按初始实际尺寸显示，无缩放。
user-scalable：是否可对页面进行缩放，no 禁止缩放
maximum-scale=2.0，minimum-scale=0.5：表示最大/小的缩放比例

示例：如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话：

<meta name="viewport" content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<link href="HTML.css" rel='stylesheet' type='text/css'>

通过<link/>标签调用外部CSS样式文件

href = " " 表示外部样式文件的路径，
rel = " stylesheet "表示调用的是一种样式
告诉浏览器你将采用一个样式表文件，使浏览器采用对应编码处理下面的内容
type = " text/css " 具体说明调用样式的文件类型为CSS样式

即 link - 文件路径 - 文件类型 - 样式类型

<script src='main.js'></script>

用于指定外部脚本文件的URL。

多个页面上运行同一段JavaScript脚本：
将该段脚本独立保存为.js文件，在各个HTML文档里通过<script>标签的 src 属性来引用即可
注意：外部脚本文件中不能包含<script>标签！

</head>
<body>
</body>
</html>