HTML5

网页基本信息

HTML(HyperText Markup Language)超文本标记语言

<DOCTYPE：告诉浏览器我们使用什么规范>

    <head>标签代表网页头部</head>

    <body>标签代表网页主体</body>

    <title>网页标题</title>

    <meta描述性标签，它用来描述网站的基本信息></meta>

网页基本标签

标题标签
  一级标题<h1>内容</h1>
  二级标题<h2>内容</h2>

段落标签 <p>内容</p>
换行标签 <br/>
水平线标签 <hr/>
粗体标签 <strong>内容</strong>
斜体标签 <em>内容</em>
块级标签<div>块中内容（别的标签）</div>

特殊符号
空格  &nbsp；
大于  &gt；
小于  &lt；
版权符号  &copy；XXX

注释<!--内容-->

图像标签

<img src="图片路径" alt="图像的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度">
../ 表示上级目录
src 必填
alt 必填

链接标签

页面间链接

<a href="链接路径" target="目标窗口位置，就是在哪个窗口打开（常用值：_self、_blank）">链接文本或图像</a>
href 必填
链接文本或图像位置 放置图像标签即为图片
_self 在当前窗口打开
_blank 新建窗口打开

锚链接

<a id="top">顶部</a>
使用id作为标记，锚链接的锚
HTML5弃用name，用id来代替

<a href="#top">回到顶部</a>

功能性链接

邮件链接:mailto
<a href="mailto:3478239019@qq.com">E-mail me</a>

QQ链接：参考QQ推广，会给你生成链接代码

行内元素和块元素

块元素：无论内容多少，该元素独占一行

比如标题标签，段落标签......

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

比如链接标签，粗体标签......

列表标签

有序列表

<ol>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ol>

无序列表

<ul>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>

自定义列表

<dl>
    <dt>列表名称</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

表格标签

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

table 表格
tr 行
td 列
border 边框 1px 指定边框宽度
colspan 跨列
rowspan 跨行

媒体元素

<video src="path" controls autoplay></video>
<audio src="" controls autoplay></audio>

video 视频文件
audio 音频文件
src 文件路径
controls 控制条
autoplay 自动播放

页面结构分析

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

iframe内联框架

在当前网页嵌套一个别的网页

<iframe src="引用页面地址" name="框架标识名" width="宽度" height="高度">

</iframe>

src 地址
name 可以用于target，在此内联框架打开

表单语法

一般用法是网页的登录和注册

<form method="post|get" action="result.html">

    <p>名字：<input type="text" name="username" value="梦寐" maxlength="8" size="20"></p>

    <p>密码：<input type="password" name="pwd"></p>

    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉<input type="checkbox" value="game" name="hobby"/>游戏
    </p>

    <p>国家：
        <select name="国家">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

    <p><!--文本域-->反馈
        <textarea name="textarea" cols="10" rows="10">文本内容</textarea>
    </p>

    <p><!--文件域-->
        <input type="file" name="files">
    </p>

    <P>邮箱验证
        <input type="email" name="email">
    </P>

    <P>URL验证
        <input type="url" name="url">
    </P>

    <P>数字验证
        <input type="number" name="num" max="100" min="10" step="10">
    </P>

    <P>滑块
        <input type="range" name="voice" max="100" min="0" step="1">
    </P>

    <P>搜索：
        <input type="search" name="search">
    </P>

    <p>
        <!--增强鼠标可用性-->
        <label for="mark">点击文本跳转输入框</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form> 

method 规定如何发送表单数据 常用值get、post
action 表示向何处发送表单数据
文本输入框<input type="text"......>
value 默认初始值
maxlength 最长能写几个字符
size 文本框的长度
密码框<input type="password"......>

radio 单选框 用name分组
checkbox 多选框 
select 下拉框

textare 文本域
file 文件域

email 邮箱 带有很low的验证
url URL 带有验证
number 数字带有验证

range 滑块
search 搜索框

直接添加不需要赋值
checked 单选框和多选框的默认选中
selected 下拉框的默认选中
readonly 只读
disable 禁用
hidden 隐藏

label 增强鼠标可用性

以下为按钮，写法差不多
button 按钮
image 图片按钮 需要路径src
submit 提交
reset 重置

get方式提交：我们可以在URL中看到我们提交的信息，不安全，高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password是，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

表单初级验证

常用方式

placeholder 提示信息

required 判断非空

pattern 用正则表达式判断是否合法，不知道哪段正则表达式就去百度https://www.jb51.net/tools/regexsc.htm

<form method="post|get" action="result.html">
    <p>placeholder
        <input type="text" name="username" placeholder="请输入用户名">
    </p>
    <p>required
        <input type="text" name="username" required>
    </p>
    <p>
        <input type="text" name="username" pattern="一段正则表达式">
    </p>
</form>