H5学习笔记 HTML5学习笔记 只此一篇学会HTML

1.web概述
1）web是什么？
www(World Wide Web)基于全球互联网的一个多媒体信息服务。该服务应用广发，提到网络就应该想到web。

2）web的特性（BS架构）
是一种基于浏览器(Browser)/服务器(Server)的系统架构

3）web的原理
当访问某个网站的网页时，访问的网页存放在服务器上。
浏览器通过通讯协议发送请求，以获取服务器发送回来的响应，达到浏览网页的目的。

4）web的三要素和web开发三要素
web三要素：HTML\CSS\JavaScript
web开发三要素：
浏览器：向服务器发送请求，下载服务器中的网页文件，解释执行文件，实现页面内容的显示。
服务器：接受浏览器请求，发送相应页面文件给浏览器，网页文件保存在服务器上。
通讯协议：https协议用于规范通讯

5）web浏览器
浏览器就是将源代码解释成图形化界面，也就是网页
主流浏览器：(Chrome、Firefox常用)
IE(Edge)、Chrome、Firefox、Safari…

2.HTML概述
标记语言：
XML：可扩展标记语言（配置文件）
html：固定标记语言（网页文件）
xhtml：可扩展标记+固定标记
1）HTML简介
HTML(Hyper Text Markup Language)
超 文本 标记 语言
1.一个纯文本类型的语言，用来设计网页
2.用此语言编写文件，后缀以.html或.htm为后缀
3.由浏览器解释执行，html页面还可以嵌套脚本语言(JS–JavaScript)编写的程序段

标记（标签）：
标签是由尖括号包围的关键字组成，标签通常是成对出现的，
第一个标签是开始标签，第二个标签是结束，比如

标签分类：
a.双标签：<标签名 属性=“属性值”></标签名>
b.单标签：<标签名 属性=“属性值”/>

html注释：

2）HTML版本
html有很多版本，需要明确使用哪种html版本，浏览器才能完成正确的显示html内容。
H1-H3：政府机构，大型商业组织等等
H4：有过渡性版本、严格型版本、框架型版本
H5：

3）HTML结构

网页的配置信息 网页的内容部分 包含： 元数据（消息头） 引入样式文件（外部） 脚本语言 样式声明（内部）

3.常用的固定标签
文本标签：
文本是网页的重要组成部分，直接书写的文本会用浏览器默认的样式显示。

1)标题标签：常用语标题显示，以达到醒目的效果
<h#>标题内容</h#>:#表示1-6的数字，标题1最大，6最小
特点：独占一行，文本上下有间距

2)段落标签：提供结构化文本显示方式，文本会用单独的段落显示

段落内容

特点：独占一行，文本上下有间距

3)分批标签：用于元素分组，常用语页面的布局
:行内分区标签
特点：没有特点

:块分区标签 特点：独占一行，元素前后会自动换行，文本上下没有间距；一般使用div实现整个页面分区。

---

换行
水平线

斜体
粗体
删除线
下划线

实体类引用：
  空格
> 大于号>
< 小于号<
&amp 表示&符号

图像和超链接标签
1)图像
使用标签将图片添加到页面

注意：
a.src属性必须添加
b.路径问题
相对路径：相对于当前连接的路径
绝对路径：从磁盘最高目录开始找完整的路径

2)超链接
使用标签创建超链接效果
文本

target取值两个：
_self:在当前窗口打开新链接（默认）
_blank:在当前窗口旁新开另外一个窗口，打开链接

锚点：
文档中某行的一个记号，用于连接到文档的某个位置
定义锚点：

链接锚点：

注意：#告诉浏览器链接不是页面而是位置

列表标签：
列表将具有相识特征或者具有先后顺序是几行文字进行对齐排列

列表由列表类型列表项组成：

无序列表

有序列表

• 列表项

  无序列表：默认实心圆
  type=“disc实心圆|circle空心圆|square实心矩形|none无”

  有序列表：
  type=“1数字|a小写字母|A大写字母|i小写罗马字母|I大写罗马字母”

  表格标签：
  表格标签常用于组织结构化信息，常用于页面布局

  1)组成：
  

  表格
  行
  列

  2)常用属性
  

   <tr bgcolor="背景色">
   <td valign="垂直对齐方式">
   left-左，right-右，center-中，top-上，bottom-下
  

  3）不规则表格
  属性：
  colspan=“列合并”
  rowspan=“行合并”

  4)表格划分（严格）
  三部分：

  表头 表体，可以多次出现 表尾

  5)表格的嵌套

  6)表单标签（重要）
  表单用于显示信息，收集信息，提交信息到服务器

  表单：form表单标签和表单控件

  定义表单：

  表示将此标签中涵盖的控件中的数据传输到服务器 主要属性： action：表单提交的url地址 method：表单数据提交给服务器的方式（get和post） enctype：表单数据的编码方式

  表单控件：表单中可以包含很多不同的表单控件，表单控件是一种html元素的信息输入项
  包含：
  input元素：文本框、密码框、单选框、复选框、按钮、隐藏域、文本选择框
  非input元素：标签、文本域、下拉框

  1)input元素中文本框：
  
  type：规定input元素的类型，默认是文本框类型
  name：规定input元素的名字（重要：后面会根据name取数据）
  value：规定input元素的值
  readonly：true输入框只读
  placeholder：输入框提示信息
  maxlength：规定输入框字符长度

  2)密码框
  

  3)单选框
  
  name:用于实现分组，同一组名称必须相同
  value：提交的数据库
  checked：选中

  4)标签
  
  for：设置文本所关联的控件的id，关联后点击该文本等于点击该控件

  5）复选框（多选）
  

  6)文件选择框
  

  7)隐藏域
  
  表单中包含不希望用户看见的信息
  重要：很多时候借助此控件向后台提供重要数据

  8)文本域：相当于一个多行的文本框
  文本内容
  cols/rows：指定文本框的行数和列数

  9)下拉框
  
  文本
  

  10）按钮
  提交按钮:
  传送表单数据给服务器或其他程序处理

  重置按钮:
  清空表单内容，将全部表单控件设置为最初的默认值

  普通按钮:
  用于执行客户端脚本代码（结合js）

  value：指定按钮的名字	 
  

  补充：
  11）引入外部html文件

  12）分组标签

  请选择 普通管理员 超级管理员

  13)H5新增特性