HTML基础学习（全）
HTML概述
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
HTML骨架格式
日常生活的书信，我们要遵循共同的约定。
同理：HTML 有自己的语言语法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写
html基本标签
1 HTML标签：
作用所有HTML中标签的一个根节点。
2 head标签：
作用：用于存放：
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
属性：
color:文本的颜色
bgcolor:背景色
background:背景图片
颜色的表示方式：
第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
第二种方式：RGB模式
第三种：十六进制：
000000 #ffffff #325687 #377405
文档类型<!DOCTYPE>（重点）
<!DOCTYPE html>
这句话就是告诉我们使用哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
HTML标签的语义化（重点）
白话： 所谓标签语义化，就是指标签的含义。
为什么要有语义化标签
1,方便代码的阅读和维护
2,同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3,使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
总结：（重要知识点）
双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
排版标签
1.注释标签：<!–注释–>
2.换行标签：
3.段落标签：<p>文本文字
特点：段与段之间有行高
属性：align对齐方式
(left：左对齐 center：居中 right：右对齐)
4.水平线标签:
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
容器标签（重点）
<div>:块级标签，独占一行，换行
<span>:行级标签，所有内容都在同一行作用：
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息
标题标签 (熟记)
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
例如：
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序
无序列表 ul （重点）
无序列表标签： <ul></ul>
属性：type :三个值，分别为：
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
注意：
1,<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2,<li>与</li>之间相当于一个容器，可以容纳所有元素。
3,无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表 ol
有序列表标签：<ol>
属性：type：
1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
定义列表dl
\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>
dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2
...
图片标签
独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
链接标签
文本或图像
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）
文本或图片
属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
base 标签
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
锚点定位 （难点）
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：
1.使用a href=”#id名>“链接文本"</a>创建链接文本。
2.使用相应的id名标注跳转目标的位置
表格标签
表格由<table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
字体标签
<font></font>**
属性： size:设置字体大小**
color:设置字体颜色
face:设置字体**
表格**
(table,tr,td)
属性：
border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
…
</tr>
…
</table>
... ...
单元格内的文字
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。
注意：
1,<tr></tr>中只能嵌套<td></td>
2,<td></td>标签，他就像一个容器，可以容纳所有的元素
表头标签(th)
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
表格结构（了解）
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
总结表格
1,表格提供了HTML 中定义表格式数据的方法。
2,表格中由行中的单元格组成。
3,表格中没有列元素，列的个数取决于行的单元格个数。
4,表格不要纠结于外观，那是CSS 的作用。
文本格式化标签
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
定义下标字。
定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
表单标签(掌握)
目的是为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input 控件(重点)
在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值
size input 元素的宽度
是否只读
输入字符的最大长度
disabled 是否禁用
文本框：
在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。
代码格式如下：
<input type=“text” name="…" size="…" maxlength="…" value="…"/>
属性解释：
type=”text”：定义单行文本输入框；
name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性：定义文本框的宽度，单位是单个字符宽度；
value属性：定义文本框的初始值。
密码框：
是一种特殊的文本域，用于输入密码。
代码格式如下：
<input type=“password” name="…" size="…" maxlength="…" value="…"/>
属性解释：
type=”password”定义密码框；
name属性：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性：定义密码框的宽度，单位是单个字符宽度；
value属性：定义文本框的初始值。
隐藏域：
是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式如下：
<input type=“hidden” name="…" value="…"/>
属性解释：
type=”hidden”：定义隐藏域；
name属性：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性：定义文本框的初始值。
单选按钮：
当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。
代码格式如下：
<input type=“radio” name="…" value="…"/>
属性解释：
type=”radio”定义单选框；
name属性：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须同一个名称；
value属性：定义单选框的值，同一组中，他们的域值必须是不同的。
复选框：
允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。
代码格式如下：
<input type=“checkbox” name="…" value="…"/>
属性解释：
type=”checkbox”定义复选框；
name属性：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性：定义复选框的值。
{
type: 以下为type可能要取的值：
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
表示同一组中只能选中一个( checked =“checked” 表示选中)
1.4 checkbox 表示多选 ，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片提交按钮
以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框
1.10 button 普通按钮
1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
name属性：表单元素名字，只有name属性才能提交给服务器。
}
文件上传框：
代码格式如下：
<input type=“file’ name=”…"
注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
说明：multipart 控件是否上传多文件
属性解释：
type=”file”：定义文件上传框；
name属性：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
HTML5的表单所有type类型
label标签(理解)
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。
<label for=“male”>Male</label>
<input type=“radio” name=“sex” id=“male” value=“male”>
Male
form标签（表单域）
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
\<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
\</form>
常用属性：
1,Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
（表示动作，值为服务器的地址，把表单的数据提交到该地址上处理）
2,method
用于设置表单数据的提交方式，其取值为get或post。
3,name
用于指定表单的名称，以区分同一个页面中的多个表单。
4.enctype:
表示是表单提交的类型**
注意： 每个表单都应该有自己表单域。
get:
1.地址栏,请求参数都在地址后拼接 path?name=“张三”&password="123456"
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
post：
1.地址栏：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。
使用情况：一般用于插入修改等操作
textarea控件(文本域)
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols=“每行中的字符数” rows=“显示的行数”>
文本内容
</textarea>
文本内容
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
1.<select></select>中至少应包含一对<option></option>。
2.在option 中定义selected =" selected "时，当前项即为默认选中项。
HTML5新标签与特性
常用新标签
.header：定义文档的页眉
.nav：定义导航链接的部分
.footer：定义文档或节的页脚
.article：标签规定独立的自包含内容
.section：定义文档中的节（section、区段）
.aside：定义其所处内容之外的内容
常用新属性
新增的type属性值：
综合案例
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
多媒体标签
.embed：标签定义嵌入的内容
.audio：播放音频
.video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
\<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">\</embed>
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
多媒体 video
HTML5通过<video>标签来解决音频播放的问题。
通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
HTML常用标签或属性全称
原文地址：https://blog.csdn.net/qq_44732593/article/details/107287100
非原创，搬运，侵权联系删除。
