一、HTML基本信息

注释：<!-- -->

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

head：网页头部标签

title：网页标题meta：描述性标签，描述网站的信息，用来做SEOcharset = "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>九、页面结构分析

元素名

描述

header

标题头部区域的内容(用于页面或页面中的一块区域)

footer

标记脚部区域的内容（用于整个页面或页面的一块区域）

section

web页面中的一块独立区域

atricle

独立的文章内容

aside

相关内容或应用(常用于侧边栏)

nav

导航类辅助内容

十、iframe内联框架

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

src必填widthheigthname标记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>

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为txet或password时，输入的最大字符数

cheaked

type为radio或cheackbox时，指定按钮是否被选中

单选框

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

文本域

<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