一、HTML基本信息

注释：

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

head：网页头部标签

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

body：代表网页主题

二、网页基本标签

标题标签

• 一级标签

  一直到6级标签

段落标签

• 段落标签

换行标签

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

水平线标签

字体样式标签

• 粗体
• 斜体

注释

特殊字符

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

特殊符号就是 & xxx ;

三、图像标签

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

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

四、链接标签

文本链接

链接文本或图像

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

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

页面间链接

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

锚链接

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

功能性链接

• 邮件链接：mailto： 点击后会打开邮箱
• qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

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

行内元素

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

六、列表

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

有序列表

无序列表

自定义列表

    
 标题
    
 选项
    

    

七、表格

为什么使用表格

• 简单通用
• 结构稳定

基本结构

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

表格标签
    列标签
        行标签 这代表一行

跨列：使用colspan="夸的列数"

跨行：使用rowspan="夸的行数"

八、视频和音频

视频元素

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

音频元素

• audio
• src="" controls autoplay>

九、页面结构分析

十、iframe内联框架

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

十一、表单

表单：form

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

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

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

表单元素格式

单选框

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

多选框

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

按钮

普通按钮
图片按钮
提交按钮
重置按钮

下拉框

    中国
    中国
    中国
    中国
    中国

提交的格式就是列表名称和value

• selected 默认选择

文本域

文本内容

文件域

邮件验证

URL

数字验证

滑块

搜索

十二、表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

增强鼠标可用性

点击

十三、表单初级验证

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

提示信息

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

非空判断

• required

正则表达式验证

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

高级验证使用js