1、什么是HTML
提示：初学HTML5应了解的内容
1、什么是HTML
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
1.1. HTML的特点
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类 元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
1.2.HTML与css的关系
-
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
HTML(结构)：用于描述网页的结构 -
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
CSS(表现)：用于控制页面中元素的样式做个形象的比喻，HTML就像是一个人，什么修饰都没有，而CSS就像是衣服和化妆品等，用来装饰HTML的
2.开发环境搭建
VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
2.1.Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试
主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。
2.2.VSCode插件推荐
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签，包括HTML5片段
Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
3. VSCode创建HTML文件
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
以上代码解释如下（示例）：
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写，意思是语言，"en"代表英语，"zh-CN"代表中文 -->
<!--
html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
<!--
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
-->
<!--
字符编码，浏览器会根据字符编码进行解析
常见的字符编码有：gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<!--
viewport 设备的屏幕
width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览， 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!--
在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通 过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一 定要简单明了
-->
</body>
</html>
文本注释：Ctrl+? 可以对文本进行注释掉，不会影响编译器的正常执行，适当对代码进行注释方便自己及他人对代码的可读性。
4.元素
4.1块级元素
作用：搭建网页结构
特点：
* 独占一行空间
* 默认宽度为100%
* 高度由子元素或内容决定
* 可以通过css指定其宽度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
不要将块级元素嵌套在行内元素中!!!
4.2行内元素
作用：在结构中填充网页内容
特点：
* 与其他行内元素共享一行空间
* 宽高由自身决定
* 由于不用来搭建网页结构，所以也无需通过css指定其宽度
* 行内元素中不可以嵌套块元素
元素：span、a、img、strong、b、i、em、sub、sup…
5.基础标签的使用
5.1. h标签
h标签 标题标签
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题
在HTML中，一共有六级标题标签 h1~h6
在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心
6级标题中，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说，
h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签,搜索引擎使用标题为您的网页的结构和内容编制索引.因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
（示例）：
5.2. p标签,br标签，hr标签
- p标签
段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，会独占一行，并且段与段之间会有一个间距
- br标签
br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
-hr标签
hr标签 可以在页面中生成一个分割线
<p>
段落标签，段落"标签"用于表示内容中的一个自然段,<br><hr>
使用p标签来表示一个段落,
p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p>
（示例）：
5.3. img标签
- img标签
img标签 告诉浏览器要显示一张图片
img标签的格式
<img src="" alt=""> //基本格式
<img src="../images/peg.gif" width="300px" alt="网络过慢，图片加载失败" title="岳岳"> //示例
src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
alt:可以用来设置在图片不能显示的时，对图片的描述
img标签的其他属
width:设置图片的宽度
height:设置图片的高度
title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。
注意点:
一般除了自适应的页面，不建议设置width和height，和h标签以及p标签不同的是，img标签不会独占一行
5.4. a标签 base标签 假链接 锚点
- a标签
a标签的作用 用于控制页面与页面之间跳转的
a标签的格式
//a标签的基本使用
//加载本地的HTML文件或页面
//target="_self"用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
//target="_blank"点击a标签的时候，在新的选项卡中加载对应的页面
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_self" title="百度">百度一下</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
注意点:
1.a标签不仅可以让文字点击，也可以让图片被点击
2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// 除了URL地址，还可以指定一个本地地址
- base标签
base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开
注意点
1.base标签必须要写在head标签之间
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行
<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>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.baidu.com">百度</a>
</body>
-假链接
什么是假链接？
就是点击之后不需要跳转的链接我们称之为假链接
假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部
<a href="#">回到顶部</a>
<a href="javascript:">点我啊</a>
- 锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:
<a href="#center">跳转</a>
<div>我是第1个div</div>
...
<div>我是第50个div</div>
<p id="center">我是中部</p>
<div>我是第51个div</div>
...
<div>我是第100个div</div>
注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
6.功能元素
6.1.列表
-列表
无序列表
ul-li 班级-学生 导航栏
<ul>
<li>需要显示的条目内容</li>
</ul>
有序列表
ol-li 奥运会奖牌榜
<ol type="1">
<li>需要显示的条目内容</li>
</ol>
1 （1、2、3、4）
a （a、b、c、d）
A （A、B、C、D）
i （i, ii, iii, iv）
I （I, II, III, IV）
6.2.表格标签
-表格标签
一对table标签就是一个表格
一对tr标签就是表格中的一行
一对td标签就是一行中的一个单元格
补充：
tr与th搭配用来表示表头，字体为居中的粗体文本。
tr与td搭配用来表示表体，字体为左对齐的普通文本。
table 表格的宽高
th,td 单元格的宽高
(都属于块级元素,宽默认100%,当...当...,高由内容撑起)
-水平垂直对齐
水平方向 align table(表格),tr,td(单元格内容) left center right
垂直方向 valign tr,td(单元格内容) top mid bottom
外边距内边距(在元素中为margin,padding)
cellspacing外边距 单元格和单元格之间的距离 默认2px
cellpadding内边距 单元格的边框和文字之间的间隙 默认1px
注意点:
- 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以一开始我们是看不到边框的，为了可见性，一般我喜欢设置border="1"。但会出现多线条样子，以下是两种解决方法
-表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
-表格完整结构
标题 caption作用: 指定表格的标题
表头 thead作用: 指定表格的表头信息
主体 tbody作用: 指定表格的主体信息
表尾 tfoot作用: 指定表格的附加信息
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
注意点：
- 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化(chrome下可以，Firefox下不可以)
-单元格合并
水平方向 合并列 colspan
垂直方向 合并行 rowspan
<td colspan="2"></td>
<td rowspan="2"></td>
6.3.form表单
<form action="提交的服务器接口地址">
<表单元素>
</form>
明文输入框
<input type="text" name="account" placeholder="请输入用户名">
暗文输入框
<input type="password" name="password" placeholder="请输入密码">
单选框
<input type="radio" name="xx" value="xxx">
1.都设置name属性且值一样
2.某个单选框默认选中 checked
3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。
多选框
<input type="checkbox" name="xxx" value="xxx" checked>
提交按钮
<input type="submit">
操作：
1.form表单添加一个action属性, 指定需要提交到的服务器地址。
2.给要提交的表单元素添加一个name属性。
普通按钮
<input type="image" src="">
重置按钮
<input type="reset" value="xx">
-lable标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字的时候，文字所对用的输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label>
<input type="text" id="account">
-select标签
作用：定义下拉列表
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
-textarea标签
作用：定义一个多行文本输入框
<textarea name="" id="" cols="30" rows="10">内容</textarea>
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的
HTML5新增的表单元素
-datalist标签
作用：
给输入框绑定待选项
方法：
需要一个输入框，一个datalist列表，给datalist列表标签添加一个id，接着给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
<input type="text" list="xxx">
<datalist id="xxx">
<option>内容</option>
</datalist>
-progerss(常用于进度条)
<progress value="70" max="100">70%</progress>
2.value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
小建议：尽量给max设置容易计算的数字，如：100,1000等。
-邮箱
<input type="email">
-域名
<input type="url">
-数字
<input type="number">
-时间
<input type="date">
-颜色
<input type="color">
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
