HTML基础
什么是HTML呢？
- 他的英文全称为 htyper text markup language 超文本标记语言；
- 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
- 标记语言: 标记（标签）构成的语言。
什么是标签？
- 由一对尖括号括起来的单词组成且单词不区分大小写 例如： <h1> =<H1> 注：所有标签中的单词不可能以数字开头
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签. 例如: <br/><hr/><input/><img/> 这些标签也可以简写成<br><hr><input><img>
- 标签可以嵌套.但是不能交叉嵌套. 例如：<a><b></a></b
标签的属性
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- 标签里面可以有若干属性，也可以不带属性
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写且通常成对出现， 属性值必须使用双引号或单引号包裹 例如 name="haha"
说完了标签接下来就要进入正题了，来了解下HTML5的结构
<!DOCTYPE html> #<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前,用来指示web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 <html lang="en"> # lang="en" 表示语言为英语，如果想使用中文 lang="zh-CN" <head> <meta charset="UTF-8"> #指定编码类型为utf-8 <title>Title</title> <base href=""> <base target="_blank"> #target="_blank"表示在新网页中打开 默认是target="_self" 表示在当前页面中打开 </head> <body>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3464913619,2866961667&fm=11&gp=0.jpg" alt="石原里美" title="石原里美"> </body> </html>
head内常用标签:
head内对标签的操作给浏览器发送指令，用户不可见
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
| <base/> |
标签为页面上的所有链接规定默认地址或默认目标。 |
Meta标签
Meta标签介绍：
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的。
- <meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
meta标签共有两个属性，它们分别是http-equiv属性和name 属性
http-equiv属性
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content
- Content-Type（浏览器接受的文档类型，一般是text/html）
- refresh（网页刷新，以秒为单位）
- expires（设定网页到期时间，一旦过期，必须到服务器上重传）
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2";URL=https://www.baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
<!--设定网页到期时间，一旦过期，必须到服务器上重传-->
<meta http-equiv="expires" content="5 march 2018">
name属性
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- keywords（搜索关键字，用于搜索引擎抓取信息的显示）
- description（搜索到网站后显示的网页内容简描述）
- author（站点制作者信息）
- generator（用以说明生成工具）
<meta name="keywords" content="要搜索的关键字"> <meta name="description" content="网页的简单描述"> <meta name="author" content="说明作者"> <meta name="generator" content="用以说明生成工具">
body内常用标签
head内对标签的操作用户可见
块级标签和内联标签
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
块级标签元素的特点
- 总是在新行上开始（每个元素占一整行）；
- 高度，行高以及外边距和内边距都可控制；
- 它可以容纳内联元素和其他块元素
内联标签元素的特点
- 和其他元素都在一行上；
- 高度，行高及外边距和内边距不可改变；
- 内联元素只能容纳文本或者其他内联元素
基本标签
<h1>~<h6> 标题标签.大小由<h1>~<h6>依次减小
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<s> <strike> 删除标签，表示这条标签之前有用现在没用了
<u>: 文字下方加下划线.
<em> <i>: 文字变成斜体
<sup>和<sub>: 上角标 和 下角标.
<br>: 换行标签.
<hr>: 水平线标签
<div>和<span> 块级标签和行级标签 本身并无意义，块级标签常用于布局，行级标签常用语显示内容，这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签。
特殊符号
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
版权© |
© |
| 注册 | ® |
<a>超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a>中有三个重要属性：href、target、name
href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。
<a href="https://www.baidu.com/">进入百度</a>
<a href="#top">top</a> #跳转到顶部
target 文档打开时要显示的目标位置，属性值一般有：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、
_top（整个容器中打开）、name（框架名称）。
<a href="https://www.baidu.com/"target="_blank">进入百度</a>
name 锚记名称。作用：跳转到文档的某个地方。可用来返回首页
<a name="top"><h3>Top！</h3></a>
<img> 图形标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
列表标签
<ul> :无序列表标签
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
如果想要去掉前面的圆点序号，可以在head中的style标签中设置
<style> li{list-style-type: none} </style>
<ol> :有序列表标签
<ol type="1" start="3"> #start表示从第几个开始
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<dl> :标题列表
<dt> 列表标题
<dd> 列表项
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
<table border="1" > <caption>#######</caption> #表格的标题 <thread> <tr> #<tr>表格的数据行 <th>序号</th> #<th>表格的数据名称
<th>姓名</th>
<th>年龄</th>
<th>薪水</th> </tr> </thread> <tbody> <tr> <td>1</td> #<td>表格内容
<td>张三</td>
<td>18</td>
<td>10000</td> </tr>
<tr> <td>1</td>
<td>张三</td>
<td>18</td>
<td>10000</td> </tr> </tbody> </table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
<caption> 表格的标题
<tr> 表格的数据行，table row
<th> 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示，table head cell
<td> 单元格，用来显示表格内容，table data cell
<thead> 表格头部，使结构更加分明
<tbody> 表格主体部分，使结构更加分明
rowspan 单元格竖跨多少行，作用在th或者td上
colspan 单元格横跨多少列（即合并单元格），作用在th或者td上
form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（一般是提交字典到后台的一个接口）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。即自动提示补全之前填写过的 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
这里重点说一下enctype，对表单数据进行编码，分为三种形式
- application/x-www-form-urlencoded ：表单的默认编码方式，表单发送前对所有字符进行编码，提交普通的文本内容到服务器就可以采用这种默认的编码方式。
- multipart/form-data ：提交的是一个文件时，编码就需要采用另一种格式
- text/plain ：是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码
表单元素
<input>
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
text:(文本框输入)
autocomplete ---- 自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用
disabled ---- 设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容
password:密码框。（以下属性text和password共有）
size ---- 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位
maxlength ----（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击
readonly ---- 只读.
placeholder ---- 框内预置内容(灰色)，写上内容时才消失，如果框内没有填写内容，预置内容不会发送。
radio 单选按钮。属性：
name----（将name的值设置为相同值，才表示一组数据，才能实现单选功能）
value----（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked----（是否默认被选中的状态）
<label for="r1">女</label> <input id="r1" name="gender" type="radio" value="0"> <label for="r1">男</label> <input id="r1" checked name="gender" type="radio" value="1">
checkbox 复选框。
name----（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）
value----（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked----（是否默认被选中的状态）
<input checked name="hobby" type="checkbox" value="basketball">篮球 <input name="hobby" type="checkbox" value="football">足球 <input checked name="hobby" type="checkbox" value="doublecolorball">双色球
file 文件域，上传文件（不同的浏览器表现形式不同）
submit 提交按钮。用于提交表单。
reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
button 普通按钮。一般结合javascript使用。
hidden 隐藏字段。 value（隐藏的内容）
color 颜色标签。value指定颜色值（采用#十六进制数表示）。
date 日期。value值指定默认的日期，格式为****-**-**（年月日）。
datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。
number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。
range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。
week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）
注：
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
<textarea> 文本域标签。
默认表现形式是可以输入很多行文本的文本框。
name （表单提交项的key）
cols（设置文本域宽度）
rows（设置文本域高度，即行数）
<select> 下拉框标签。使用时要结合<option>子标签一起使用。
name:表单提交项的key
size：选项个数
multiple：多选
<option> 下拉选中的每一项
-
- value（表单提交项的值）
- selected（selected下拉选默认被选中）
<optgroup>为每一项加上分组
<label> 把元素与文本结合起来
不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）
<label for="n1">男</label> <input id="n1" name="gender" type="radio" >
<fieldset> 对表单中的相关元素进行分组
<fieldset>
<legend>友情提示</legend>
<div align="middle">看完记得点赞</div>
</fieldset>
