HTML
基础部分
结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
标签
HTML代码由众多标签构成
网页的基本标签
<!doctype>
<!doctype>标签表示文档类型，告知浏览器解析网页使用什么文档类型。
一般简单声明doctype为html，浏览器就会按照 HTML 5 的规则处理网页。
<!doctype html>
<html>
<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素，因此除了<!doctype>标签外，其它HTML标签基本都被<html>标签所包含。
注：一个网页只能有一个<html>标签。
其中，该标签常用的属性是lang属性，说明网页内容默认的语言。
<html lang="zh-CN">
// 此处为使用中文，也可以改为其它语言，例如英文是：en
<head>
<head>标签是一个容器标签，用于放置网页的元信息，会隐藏在页面中。
<!doctype html>
<html>
<head>
<title>网页标题</title>
</head>
</html>
<head>是<html>的第一个子元素。即使不添加<head>标签，也会自动创建一个。
<head>的子元素一般有下面七个：
<meta>：设置网页的元数据。<link>：连接外部样式表。<title>：设置网页标题。<style>：放置内嵌的样式表。<script>：引入脚本。<noscript>：浏览器不支持脚本时，所要显示的内容。<base>：设置网页内部相对 URL 的计算基准。
<meta>
<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。
<meta>标签存在5个属性：
- charset 属性：指定网页的编码方式
- name 属性：表示元数据的名字
- content 属性：表示元数据的值
- http-equiv 属性：覆盖 HTTP 回应的头信息字段
- content 属性：对应的字段内容
示例：
通常使用前三个属性：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
// name属性和content属性混合使用表示网页在手机端可以自动缩放。
charset 属性：
<meta charset="utf-8">
// 表示网页使用UTF-8编码
name 属性、content 属性：
混合使用可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
// description表示网页内容描述
// keywords表示网页内容关键字
// author表示网页作者
// 其余例子：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">
http-equiv 属性、content 属性
注：这两个属性与 HTTP 协议相关，属于高级用法，这里不详细介绍。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
// 上面代码可以覆盖HTTP回应的Content-Security-Policy字段
// 其余例子：
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">
<title>
<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。
注：<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。
示例：
<head>
<title>网页标题</title>
</head>
<body>
<body>标签是一个容器标签，用于放置网页的主体内容。
示例：
<html>
<head>
<title>网页标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
元素
“标签”和“元素”意义是基本一样的，仅仅是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，例如<p>标签对应网页的p元素。
嵌套的标签就构成了网页元素的层级关系。
<div><p>hello world</p></div>
上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。
块级元素，行内元素
所有元素可以分成两大类：块级元素和行内元素。
块级元素默认占据一个独立的区域，在网页上会自动另起一行且占满一行。
行内元素默认与其他元素在同一行，不产生换行。
<p>hello</p>
<p>world</p>
// 由于p元素为块级元素，因此会分为两行显示
<span>hello</span>
<span>world</span>
// 由于span元素为行内元素，因此会合为一行显示，同时span元素可以为文字指定特别的样式
属性
属性是标签的额外信息，使用空格与标签名和其他属性分隔。
属性不区分大小写，属性值一般需要放在双引号内
<img src="demo.jpg" width="500">
// src属性为链接，width属性为宽
空格和换行
HTML 语言的空格处理规则：标签内容的头部和尾部的空格忽略不计；标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个；文本中的换行符（\n）和回车符（\r），会自动替换成空格。
<p> hello world </p>
// 显示为hello world，两边的空格消去
<p>hello world</p>
// 显示为hello world，中间的多个空格合并为一个
<p>hello
world</p>
// 显示为hello world，中间的多个换行符\n或回车符\r替换为一个空格
注释
HTML 代码存在注释，浏览器不显示注释。注释以<!--开头，以-->结尾。
<!-- 这是一个单行注释 -->
<!--
<p>hello world</p>
这是一个多行注释
-->
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
