这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
一、本堂课重点内容
HTML的标签，属性
写东西举例深入了解HTML
开始之前需要的准备
1.浏览器
Google Chrome
Mozilla Firefox
Safari
Edge
❌：IE,360浏览器，遨游，QQ浏览器等
2.编辑器
Visual Studio Code
Sublime Text
Atom.io
codepen.io
什么是HTML
Hyper Text Markup Language（超文本标记语言，不是编程语言，告诉浏览器如何构造网页）
HTML文件的组成
有一个opening tag 开始标签和一个closing tag结束标签
在这两个标签内会有head（放搜索引擎的关键字或者网页的基本的关键信息，title）和body（包裹真正要渲染给用户要看的内容，例如heading，paragraph）
最最上端还有一个 ,(主要是用来解释文档类型)
元素
块级元素（Inline Element）
1.在页面以块的形式展现
2.出现在新的一行
3.占全部高度
举例
<div> <h1>-<h6> <p>
内联元素（Block Level Element）
1.通常在块级元素内
2.不会导致文本换行
3.只占必要的部分宽度
举例
<a> <img> <em> <strong>
HTML属性
参考网站
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
<!DOCTYPE html>
文档类型声明，表示该文件为 HTML5文件。 声明必须是 HTML 文档的第一行，位于 标签之前
<html>Lorem</html>
标签对：标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head>Lorem</head>
中间写标题，即为网页名字
文档的头部描述了文档的各种属性和信息，包括文档的标题等
标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
1 、head标签为双标签，有尾标签，<head></head>。
2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。
3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
4、<meta charset="UTF-8">设置当前文件字符编码
5、style标签：双标签中设置当前文件样式
<body>Lorem</body>
它是HTML文档的主体部分，在此标签中可以包含<p><h1>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合
在网页上要展示出来的页面内容一定要放在body标签中
<span>Lorem</span>
这个标签是没有语义的，它的作用就是为了设置单独的样式用的
<hx>Lorem</hx>
来制作文章的标题
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级
x=1~6
<div>Lorem</div>
把一些独立的逻辑部分(是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分)划分出来，放在一个<div>标签中
举例：用红色边框标出的部分就是一个逻辑部分
<header>Lorem</header>
头部标签
<footer>Lorem</footer>
用来定义底部区域
<section>Lorem</section>
定义一个区域
<aside>Lorem</aside>
侧边区域（网页的侧边栏）
<br>
加一空行
在需要加回车换行的地方加入 ， 标签作用相当于word文档中的回车
在 html 中是忽略回车和空格的
输入空格
<hr>
加一条水平分割线
<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色
<ul><li>
ul-li是没有前后顺序的信息列表
其中会包含所有的列表内容
属于无序列表
<ol><li>
属于有序列表
<img>
1.从本地插入
在index索引中新建一个文件夹，然后将图片从桌面或其他文件夹中拖入到VS code的新建好的文件夹中
然后输入 <img src="img/picture.jpg" alt="This is a img tag">
1、src：标识图像的位置,图片的路径,即为VScode中建立的文件夹名/图片名
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本,alt为图片属性，刷新后出现熟悉的裂开的图标的后面附带的一句话
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、 图像可以是GIF，PNG，JPEG格式的图像文件
5、 若图片太大，输入 <img style="width:100vw" src="img/picture.jpg" alt="This is a img tag">
style="width:100vw"是图片的宽度占整个网页页面宽度的100%
<strong>Lorem</strong>
加粗
<em>Lorem</em>
倾斜
<h1>Lorem</h1>
标题一
可使用1~6，图示如下
<a>Lorem</a>
即为超链接
常见形式
<a href="hettps://google.com">Lorem</a>（直接跳进谷歌网站）
若要新创一个谷歌网站的页面，输入
<a href="https://translate.google.cn"target="_blank">Lorem</a>
a标签有的target属性，代表打开网页的方式。可选值为”self和blank”，默认值为self，代表在当前页面打开链接， blank代表在新窗口打开链接。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。
注意： 还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）
<!--Paragarph-->
即为注释
<table>(表格)
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对...，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。例如
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
8、标签定义表格头部,标签来定义表格的内容,来定义表格的底部
9、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
10、<tbody>…</tbody>：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
11、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
12、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
13、<thead>标签表示表格头部,一般放<tr>和<th>标签。
14、<tbody>标签表示表格内容,一般放<tr>和<td>标签。
15、<tfoot>标签标签表格脚部标注,一般放<tr>和<td>标签。
16、要用 <table>Lorem</table>将表格圈出来
表单
1.要用 <form>Lorem</form>将表单圈起来
2.用 <div>Lorem</div>
3.<label>Lorem</label>
<input>
palceholder为需要填写的内容
1、placeholder属性为输入框占位符,里面可以放提示的输入信息。
2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
3、占位符内容不是输入框真正的内容。
提交给网站的后端服务器，把信息传递过去，此时通过 <input>中的name来做一些和数据库之间的交换的内容
第一个 <form>中省略了部分内容，也可写成 <form action="form.js" method="POST"> ,提交完表单之后，他会自动找到解决一些逻辑上的问题;而 method="POST"指明了提交表单的方法，这种方法一般比较安全
5.提交按钮
HTML是不处理逻辑问题的
是在 <form>里面的
也可在表单外添加一个 <button> 来完成一个按钮，但是点了无反应，因为HTML不处理逻辑问题
两个 <button>中间夹着的内容即为网页上按钮上的内容
<form>：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ： 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）
4.所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
5.method : post/get 的区别这一部分内容属于后端程序员考虑的问题
6.type： 当type="text"时，输入框为文本输入框; 当type="password"时,输入框为密码输入框。
7.name： 为文本框命名，以备后台程序ASP 、PHP使用。
8.value： 为文本输入框设置默认值。(一般起到提示作用)
9.数字输入框（input标签中的数字框number类型）
输入框只能输入数字，输入其他字符无效，且最右边会有一个加减符整输入框数字的大小
①input的type属性设置为number,则表示该输入框的类型为数字。
②数字框只能输入数字，输入其他字符无效。
③数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
10.网址输入框
输入框的内容必须以http://或者htpps://开头，否则会给错误提示
①input的type属性设置为url,则表示该输入框的类型为网址。
②数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
11.邮箱输入框
如果输入的内容不含@，则会给错误提示
如果输入@后无内容，也会给错误提示
①Input的type属性设置为email,则表示该输入框的类型为邮箱。
②数字框的值必须包含@。
③数字框的值@之后必须有内容,否则会报错误提示
<textarea>
创建文本域
使用： <textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ： 多行输入域的列数。
3、rows ： 多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
5、注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
<label>
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）
用法： <label for="控件id名称">
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例如
<form
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
单选框和复选框
区别： 单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选
用法 <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value： 提交数据到服务器的值（后台程序PHP使用）
3、name： 为控件命名，以备后台程序 ASP、PHP 使用
4、checked： 当设置 checked="checked" 时，该选项被默认选中
注意 :同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
下拉菜单
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：
5、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
提交按钮
当用户需要提交表单信息到服务器时，需要用到提交按钮
用法： <input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
重置按钮
使输入框恢复到初始状态。只需要把type设置为"reset"就可以
用法： <input **type="reset"** value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
页面留白
增加一千个像素的页面空白，写在 <body>的最后
引用一句话
用 <blockquote>Lorem</blockquote>
<abbr>Lorem</abbr>
在第一个 <abbr>中加入注释，在网页中可呈现将鼠标拖到该位置就会显示对应注释的效果
标签
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面
