共计 5453 个字符，预计需要花费 14 分钟才能阅读完成。
HTML：超文本标记语言
超文本：超过文本、超级文本
不仅能够蕴含文本，还能够蕴含例如图片、音频、视频等各种格局
标记：标签、元素，指的是用尖括号括起来的一组内容，例如：
<div>,<img>,<h1>,<table>,<form>,<p>,<span>
<div></div>次要就是用来开发网页的。
对于 HTML:
1)HTML 开发的网页文档, 通常是以 .htm、.html 为后缀
2)HTML 开发的网页文档, 能够通过浏览器关上并显示(浏览器就是一个 HTML 解析器)
3)HTML 实质就是一个文档(html/txt/word/ppt 等)
HTML 构造
<!DOCTYPE html>: 用于申明以后文档是一个 html 格局的网页, 并且版本是 html5.0 版本。
<html>: 根标签, 所有的 html 内容都应该放在根标签外部
<head>: 头局部, 用于寄存网页的根本属性信息(例如: 网页题目, 网页的编码, 引入的 css 文件, 或 JS 文件)
<body>: 体局部, 用于寄存网页的可视化内容
<title> 我的第一个网页 </title>: 指定网页标签的题目
</h1><h1>\~</h1><h6>: 指定网页内容的题目, 例如文章 / 新闻等题目
<meta charset=”utf-8″>: 告诉浏览器以后网页应用的编码, 如果不指定这一行, 网页文件保留应用 utf-8, 浏览器在关上这个网页时, 如果不应用 utf-8, 就可能会呈现乱码问题。
找我的项目在硬盘的地位：右键我的项目 - 在内部资源管理器关上
用浏览器去关上 HTML 文件是，如果不显示内容，查看是否保留了，没保留不行。
用 HBuilder 下面工具栏的运行来关上 HTML 文件，是先把文件传到服务器再通过浏览器去申请服务器上的这个文件展示的，所以网址门路不同。
HTML 语法
1）标签、标记、元素：就是用尖括号(<>) 括起来的一组内容, 例如:<head>,<body>,<h1>,<img>, 等
2）标签分为开始标签 () 和完结标签(), 通常开始和完结标签之间还能够寄存其余内容。
<head>
<title> 题目 </title>
</head>
留神: 浏览器对 html 的语法要求特地的不严格, 比方标签只有开始没有完结, 比方标签大小写混用, 再比方标签不合理嵌套, 浏览器都会失常显示网页内容(然而不举荐这样写, 因为不符合规范)。3）自闭标签: 有些标签外部不须要写内容, 通常能够写成自闭标签
<img/>,<input/>,<br/>,<hr/> 等
<img/> == <img></img>
4）属性: 属性必须申明在标签上, 属性能够有多个, 多个属性之间用空格隔开
属性包含属性名和属性值, 属性名和属性值两头用等号连贯
属性的值用双引号或者单引号引起来。
<img src=”xx” id=”xx” name=”xx”>
<img src=”xx” id=”xx” name=”xx”>
5）正文格局:
正文作用:a)为代码增加解释阐明
b) 将一些临时不须要执行的代码正文
c)html 正文中的内容浏览器不会解析, 更不会显示
6）如何在网页中输出空格和换行
因为浏览器会将多个间断的空白字符 (空格、换行、制表符) 解析成一个空格来显示，因而如果要想做空格或者换行须要用其余符号代替。
a)能够应用 实现空格
b) 能够应用 <br/> 标签实现换行
c) 是中文字符的空格
HTML 标签
1、图像标签
img 标签能够在网页中插入一幅图像, 例如：
<img src=”./2021-03-29_155817.png”>
<img src=”2021-03-29_155817.png”>
其中,src 属性: 用于指向图片的门路(相对路径, 网络门路)
width 属性: 指定图片的宽度
height 属性: 指定图片的高度
对于门路问题:
1)不倡议写带盘符的绝对路径, 因为未来换一个公布环境, 这个门路很可能是错的, 所以不倡议
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg)2)倡议写相对路径
./: 示意以后文件所在的地位, 能够省略不写
../: 示意以后文件所在目录的上一级目录
2、超链接标签
a 标签用于在网页中实现一个超链接
点击超链接后, 会跳转到另外一个地位(网页、图片、下载地址等), 例如:
百度一下, 你就不晓得
其中 href 属性, 用于指向所跳转到的 url 地址
target 属性, 用于指向以何种形式关上超链接
\_self: 在以后窗口关上超链接
\_blank: 在新窗口中关上超链接
3、表格标签
table: 用于定义一个表格, 其中能够蕴含 tr 标签
tr(table row): 用于定义表格中的行, tr 中能够蕴含 td/th
td/th(table data cell): 用于定义表格中的单元格
th(table header cell): 用于定义表头中的单元格，其中的文本默认会加粗并且居中。
colspan 属性：设置单元格横跨的列数, 例如:
<td colspan="2">11</td>
colspan="2": 设置以后单元格横跨两列rowspan 属性：设置单元格竖跨的行数
<td rowspan="2">21</td>
rowspan="2": 设置以后单元格竖跨两行
4、音频、视频标签
4.1. 音频标签
audio 能够在网页中插入音频流
<audio controls src="audio/ 沙漠骆驼_展展与罗罗.mp3">
如果您看到这段内容, 则阐明您的浏览器不反对此标签
</audio>
src 属性: 指定所要插入的音频的 url 地址
controls 属性: 为用户增加播放、暂停、音量控制等插件
autoplay 属性: 在音频加载实现后, 立刻播放(自动播放)
width、height: 设置元素的宽度和高度
4.2. 视频标签
video 能够在网页中插入视频流
<video autoplay controls src="video/ 小拳拳.mp4">
如果您看到这段内容, 则阐明您的浏览器不反对此标签
</video>
src 属性: 指定所要插入的视频的 url 地址
controls 属性: 为用户增加播放、暂停、音量控制等插件
autoplay 属性: 在视频加载实现后, 立刻播放(自动播放)
width、height: 设置元素的宽度和高度
4.3.div/span/ p 标签
div/span/ p 标签是十分一般的然而又很罕用的标签
这三个元素都是容器标签, 能够用来包裹其余的标签或者文本
在标签上设置款式, 就能够作用在其中的内容上。<div style="color:red;font-size:30px">
<span> 文本文本文本 </span>
<input />
<p> 这是一个 p 元素 </p>
</div>
div、p：是块元素，默认独占一行, 都能够设置宽高
同是块元素的还有: h1~h6,form,table,div,p 等span：是行内元素，多个行内元素能够显示在同一行，不能设置宽高
同是行内元素的还有: span,b,i,u,input,img 等，然而 input,img 能够设置宽高
5、表单标签
5.1. 表单的作用
表单的作用: 用于向服务器发送数据
向服务器发送数据的两种形式:
1)应用表单向服务器发送数据
表单中往往存在表单项标签(用户名、明码、昵称、邮箱、验证码等)，在表单项中能够输出数据，再提交表单就能够将输出的数据提交给相应的服务器。2)应用超链接也能够向服务器发送数据
http://www.baidu.com?user= 张三 &age=20&like= 篮球
在 URL 地址前面能够拼接问号, 问号之前是 url 地址, 问号之后能够拼接参数, 参数包含参数名(user，age，like)，和参数值（张三，20，篮球）, 多个参数之间用 & 分隔。在输出地址后拜访服务器, 就能够将地址前面拼接的参数一并带给服务器
5.2.form 标签
<form action="http://www.baidu.com" method="GET|POST">
...
</form>
其中 action 属性: 用于指定表单中的数据将会提交到哪个地址。例如：action 属性指向百度服务器的网址，就意味着，表单中的所有数据都会提交到百度服务器。method 属性: 指定提交形式, 罕用提交形式为 GET 和 POST(区别前面会讲到)
如果不指定 method, 默认是 GET 提交。6、表单项标签
1) 文本输入框(用户名 / 验证码 / 邮箱 / 昵称)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>特点: 输完了内容可见
2)明码输入框(明码 / 确认明码)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>特点: 输出的内容是不可见的
3)单选框(性别 / 单选题选项)
<input type="radio" name="gender"/> 男
<input type="radio" name="gender"/> 女
4)多选框 / 复选框(多选题选项 / 岗位 / 喜好)
<input type="checkbox" name="like"/> 篮球
5)下拉选框(省份 / 城市 / 市区抉择)
select: 定义一个下拉选框
option: 定义下拉选框中的选项
<select name="prov">
<option> 北京市 </option>
<option> 上海市 </option>
<option> 广东省 </option>
...
</select>
6)多行文本输入框
textarea: 定义多行文本输入框, 当须要写大段文本时能够通过多行文本输入框进行编写
<textarea name="desc" placeholder="请输出信息"></textarea>不要在这个标签外部写空格或者换行，因为在网页上展现的时候会有。
placeholder 是在 5.0 版本后才有的属性，是指定输入框中的提示信息。
7)按钮 / 提交按钮
<button type="button"> 换一张 </button>
<input type="button" value="换一张"/>
一般按钮自身没有性能
<button type="submit"> 提交 / 登录 / 注册 </button>
<input type="submit" value="提交 / 登录 / 注册"/>
提交按钮用于提交表单, 将表单中的数据提交给 action 属性所指向的服务器
7、注册表单案例
表单项的细节问题:
1)表单项上的 name 属性有什么作用?
<input type="text" name="user"/>
<input type="password" name="psw"/>
要提交数据的表单项 (例如: 用户名 / 明码 / 性别 / 喜好 / 昵称 / 邮箱 / 验证码等) 都必须得有 name 属性, 如果没有 name 属性, 在表单提交时, 该项会被疏忽(即无奈提交数据)
2)为什么单选框能够多选?
所有单选框的 name 属性值必须雷同, 值雷同则阐明是一个组, 一个组中的单选框只能选一个(即单选)
<input type="radio" name="gender"/> 男
<input type="radio" name="gender"/> 女
3)为什么单选框或复选框提交时的值为 on?
因为单选框或复选框不像文本输入框, 输出在框中的内容就会作为 value 提交
单选框或复选框不能输出, 所以只能通过 value 属性来指定提交时的值
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
<input type="checkbox"
name="like" value="basketball"/> 篮球
4)如何设置单选框或复选框默认选中某一项?
<input type="radio" checked name="gender" value="male"/> 男
<input type="checkbox" checked
name="like" value="football"/> 足球在单选框或复选上能够增加 checked 属性来设置某一项默认被选中
因为浏览器在解析时, 只查看单选框或复选框上有没有 checked 属性, 不查看值, 所有只须要增加这个属性即可, 不须要指定值
5)如何设置下拉选框中的某一项默认被选中?
下拉选框默认选中第一项, 如何要设置第一项以外的其它选项默认被选中
能够在 option 标签上增加一个 selected 属性。
<select name="city">
<option> 北京 </option>
<option> 上海 </option>
<option selected> 广州 </option>
<option> 深圳 </option>
</select>
6)option 标签上的 value 属性的作用是什么?
例如: 如果 ” 上海 ” 选项被选中, 而 ” 上海 ” 的 option 下面没有 value, 则会提交 city= 上海;
如果在 ” 上海 ” 选项上有 value 属性, 在 ” 上海 ” 被选中并提交时, 就会提交 value 属性的值：即 city=shanghai
<select name="city">
<option> 北京 </option>
<option value="shanghai"> 上海 </option>
<option selected> 广州 </option>
<option> 深圳 </option>
</select>