一、HTML基本信息

注释：<!-- -->

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

• title：网页标题
• meta：描述性标签，描述网站的信息，用来做SEO
• charset = "UTF-8"
• name = "keyword" content = ""关键词
• name = "descrisption" content = ""描述

body：代表网页主题

二、网页基本标签

标题标签

• <h1>一级标签</h1>一直到6级标签

段落标签

• <p>段落标签</p>

换行标签

• <br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

• <hr/>

字体样式标签

• <strong>粗体</strong>
• <em>斜体</em>

注释

• <!-- -->

特殊字符

• 空格 ---->一个空格
• 大于号 >
• 小于号<
• 版权符号©

特殊符号就是 & xxx ;

三、图像标签

<img src="path" alt="文字" title="text" width="x" heigth="y" />

• src 图像地址 必填
• alt 图像的代替文字(找不到图片的时候显示) 必填
• title 鼠标悬停提示文字
• width 图像的宽度
• height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

• href 链接路径，要跳转带那个位置 必填
• target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

• 从一个页面链接到另一个页面

锚链接

• 第一步需要一个标记 使用name做标记
• 第二步跳转到标记 使用#标记
• <a name="top" ></a>
  <a href="#top"></a>
  上面是页面内的跳转
  
  <a name="down"></a>
  <a href="第一个页面的path#down"></a>
  页面间的跳转

功能性链接

• 邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
• qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

• 无论内容多少，该元素独占一行
• p、h1-h6

行内元素

• 内容撑开宽度、左右都是行内元素的可以排在一起
• a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

• <ol> <li></li> </ol>

无序列表

• <ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

• 简单通用
• 结构稳定

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

• video
• <video src="path" controls autoplay></video>
• src:资源路径
• controls控制条
• autoplay自动播放

音频元素

• audio
• <audio src="" controls autoplay></audio>

九、页面结构分析

十、iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

• src必填
• width
• heigth
• name标记
• name的使用
  <iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>
  
  <a href="path" target="hello"></a>
  点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

• method 规定如何发送表单数据常用psot、get
• action 表示向何处发送表单数据，把表单的数据发送给那个地方

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

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

表单元素格式

单选框

• input type="radio"
• value 单选框的值
• name ：表示组，name一样一次只能选一个，name不一样可以选多个
• checked默认选中的

多选框

• input type="checkbox"
• value = "sleep"
• name = "hooby"
• checked默认选中的
• <input type="checkbox" name="sleep" value="slppe" checked/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

• selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url"> 

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

• placeholder="提示信息" 在输入框上

非空判断

• required

正则表达式验证

• pattern
• <input type="text" name="mail" pattern="正则表达式">

高级验证使用js