HTML

针对HTML只进行简单的学习了解，旨在学习JavaWeb。

Hyper Text Markup Language(超文本标记语言)
由W3C（World Wide Web Consortium/万维网联盟）提出。
W3C提出的标准有：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

<body>、</body>等成对的标签，称为开放标签和闭合标签
单独呈现的标签（空元素），如<hr/>，意为用/来关闭空元素，成为自闭和标签

HTML基本信息:

DOCTYPE：声明所用规范<!DOCTYPE html>
html：最外层标签，内部书写html代码<html></html>
head：网页头部<head></head>
- meta：描述性标签，描述网站的相关信息，一般用于SEO（搜索引擎优化）<meta charset="UTF-8">
- title：网页标题<title>Title</title>
body：网页主体<body></body>

网页基本标签

标题标签<h1></h1>
段落标签<p></p>
换行标签<br></br>
水平线标签<hr></hr>
字体样式
- 标签粗体:<strong></strong>
- 斜体:<em></em>
注释和特殊符号
- 空格： 
- 大于：> >
- 小于：< <
- 版权符号：© ©
图像标签<img src="path" alt="title" title="text" width="x" height="y"/>
- src：图像路径
- alt：替换文字
- title：悬停提示信息
链接标签<a href="http://www.lilmoon.xyz" target="_blank">MyBlog</a>
- target：链接打开方式，默认为_self：在当前标签页打开；_blank：在新标签页中打开
锚链接：
1. 提供锚标记(为标签添加name属性)<h1 name="top">H1</h1>
2. 通过锚链接跳转到标记<a href="#top">back to top</a>
3. 锚链接可以直接跳转到别的链接中的某个锚标记处
  <a href="http://www.lilmoon.xyz#bottom">MyBlogBottom</a>
功能性链接（如发邮件链接）<a href="mailto:lyjune324@gmail.com">发邮件给我</a>

网页元素布局类型

网页布局只做简单了解，在CSS当中再具体学习

块元素
- 无论内容多少，独占一行
- 如：p标签、h1-h6标签
行内块元素
- 内容撑开宽度，行内块元素可以位于同一行
- 如：a标签、strong标签、em标签

列表

无序列表：<ul></ul>
- 内容：<li></li>
有序列表：<ol></ol>
- 内容：<li></li>
定义列表：<dl></dl>
- 标题：<dt></dt>
- 内容：<dd></dd>

表格

表格标签<table></table>

表行：<tr></tr>
- 单元格：<td></td>
合并单元格，为单元格添加合并属性
- rowspan：行合并
- colspan：列合并

实例代码：

<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td>3-2</td>
    </tr>
</table>

效果：

1-1
2-1	2-2
	3-2

视频及音频

视频标签<video></video>
音频标签<audio></audio>

两个标签的属性基本相同
- src：资源路径
- controls：显示控制条
- autoplay：自动播放

网页结构分析

元素名	描述
header	标题头部区域
footer	标记脚部区域
section	Web页面中的一块独立区域
article	独立文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

iframe内联框架

iframe内联框架可以实现在网页中嵌套别的网页。
<iframe src="" name="target"></iframe>
iframe常用属性：

src：网页链接
name：框架标识名，可以配合a标签的target属性实现内联框架内打开链接。
width/height：高宽属性

使用示例：

<iframe src="" name="target" height="600px"></iframe>
<a href="http://www.lilmoon.xyz" target="target">MyBlog</a>

可以通过内敛框架实现网页内插入bilibili视频：

<iframe src="//player.bilibili.com/player.html?aid=55350859&bvid=BV1N4411P7Ld&cid=96787181&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800px" height="500px"> </iframe>

插入效果：

表单

表单在网页中主要负责数据采集功能。
表单<form></form>
常用属性：

method：提交表单的方式，常用值：get｜post
- get方式提交：可以在url中看到提交信息，高效但不安全
- post方式：较安全，可以传输大文件
action：将表单发往何处，一般为请求处理地址，目前学习阶段暂且发送给html

表单元素大部分都过<input>标签实现，其常见属性：

属性	说明
type	指定元素类型，常见的有：text(默认)、password、checkbox、radio、submit、reset、file、hidden、image和button
name	指定元素的标识名
value	元素的初始值，type为radio/checkbox时必须指定一个值
size	指定元素的初始宽度。type为text或password时，元素大小以字符为单位；其他类型以px为单位
maxlength	type为text或password时，最大输入字符数
checked	type为radio或checkbox时，指定按钮是否被选中

radio、checkbox

需要设置value值
对于同组的按钮，需要设置相同的name属性来表示组
可以设置checked属性，表示默认选中

按钮及submit、reset

都属于按钮，value属性表示按钮中的提示字符。
<input type="iamge">表示图片按钮，点击效果与submit类似。

文件域

上传文件<input type="file" name="fils">：

文件域需要提供name属性

列表框和文本域

下拉框<select></select>：

下拉框中的内容通过<option>内容</option>添加
option需要添加value属性
option可以添加selected属性表示默认选中

文本域<textarea>默认文本</textarea>常见属性：

name：元素标识名
cols：列数
rows：行数

带验证的输入框

带有验证的输入框，会根据输入的值来判断是否符合输入框的类型，常见的有：

邮箱：<input type="email" name="mail">
URL：<input type="url" name="Url">
数字：<input type="number" max="99" min="18" step="1" value="18">，数字输入框可以设置各种属性：
- max：最大值
- min：最小值
- step：改变步长
- value：默认值

其他元素

滑块：<input type="range">，常见属性：

max：最大值
min：最小值
step：改变步长
value：默认值

滑块效果：
搜索框：<input type="search">，搜索框与普通文本框的区别在于自带清空功能。

表单的应用属性

为元素添加应用属性：

隐藏：hidden
只读：readonly
禁用：disable

增强元素可用性：

为元素添加id属性
添加label元素，for属性指向元素id
实现点击label激活元素的效果

代码示例：

<input type="checkbox" name="code" id="h1">
<label for="h1">Java☕️</label>

效果：Java☕️

表单初级验证

表单验证目的：

安全性
减轻服务器压力

常用方式：为文本框添加提示/判断属性：

placeholder：提示性消息，常用于输入框中
required：非空判断，内容不能为空
pattern：正则表达式，根据正则表达式判断内容是否符合要求

HTML入门