web前端——HTML基础学习笔记

写在前面

B/S架构

浏览器/服务器架构模式，可以认为是浏览器应用。

HTTP协议

超文本传输协议（HyperText Transport Protocol），采用请求响应/模型.客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

URL

统一资源定位符（Uniform Resource Locator），也就是网页的Internet地址。URL的格式为：协议://ip:port/path。

HTML基础

HTML简介

HTML–HyperText Markup Language–超文本标记语言,HTML是一种标记语言，不是编程语言。

HTML元素

1. 块级元素

块级元素独占一行空间，用来布局段落，列表，导航菜单，脚注等结构。
如：p、div、h1~h6、ol->li、ul->li、dl->dt/dd、h5新增语义标签、form等。

2.行内元素

与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现。如：strong、b、img等。

HTML属性

与元素相关的特性称为属性，属性由键值对组成。属性是由属性名和属性值组成，属性名与属性值之间使用等于号分割，属性与属性 之间使用空格分开，属性值使用双引号括起来。

1.核心属性：

（1）id——唯一标识
（2）class——同一类的标识
（3）title——名称（鼠标移入自动显示）
（4）style——行内样式

2.自身属性：

（1）a：href
（2）img ：src

3.自定义属性

HTML标签

1.列表

• 有序列表ol：子元素li，序号默认从1开始。start属性规定起始值、reversed属性规定列表顺序为降序。
• 无序列表：子元素li
• 列表dl：子元素 dt为标题、子元素dd为列表项。

2.超链接

<a href="http://www.baidu.com" target="_blank">百度一下</a>

href 表示跳转的目的地，取值如下

• 目标元素的ID值 用于锚点跳转 href="#目标元素的ID值"
• URL URL使用path来定位文件，path又分为相对路径和绝对路径。
• email<a href="mailto:liuyr@briup.com">联系我们</a>
• target规定在何处打开链接文档。（1）_self 在当前选项卡打开（2）_blank 在新的选项卡打开

3.图片

<img>在HTML文档中代表图片
<img src= "images/phone.jpg" alt= "图片找不到了…">

src 表示图片的URL地址（必须），alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容。

4.表格

<table>在Html文档中代表表格，通过二维数据表表示数据。

属性：colspan 跨列数 、rowspan 跨行数。

5.H5新增

-header：具有引导和导航作用的结构元素，通常用来放置整个页面或页面 内的一个内容区块的标题，但也可以包含搜索表单或logo。

• nav：一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
• article ：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。
• aside ：用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主 要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
• footer：元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似， 一个页面中也未限定footer元素的个数。
• address ：用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
  在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默 认将这些标签设置为行内元素（display:inline）,为了兼容性，需要：
  section, article, aside, footer, header, nav, hgroup { display:block; }
• figure& figcaption：figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独 立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是 允许放置多个其他元素。
• details：用于标识该元素内部的子元素可以被展开,收缩显示的元素。
• summary子元素：从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元 素，浏览器会提供默认文字(详细信息)以供单击。

form表单

form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给Web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件组成，这些表单控件是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，使用表单控件时一般要配合label标签，用于描述其目的。

1.属性

• action：用于处理表单信息的应用程序的地址。
• method：浏览器用来提交表单的HTTP方法，常用的get/post。get 对应于HTTP协议的GET方法，表单数据被附加在url上，使用"?"分隔。post 对应于HTTP协议的POST方法，表单数据包含在HTTP协议的请求体。
• name：设定表单的名称
• target 表示浏览器接收到form的提交信息后在哪里显示回应。_self表示在当前选项卡打开响应内容，_blank表示在新选项卡打开响应内容。
• 表单数据的内容类型
  通过enctype属性设定表单数据的内容类型：application/x-www-form-urlencoded *
  在发送前编码所有字符（默认）使用到的编码方式：

1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换
2）控件的“名称/值”对按照它们在文档数据流中出现的顺序列出来。“名称”“值”使用“=”分割，两个“名称/值”之间使用&隔开。(查询字符串)

lmultipart/form-data ：不对字符编码：

在使用包含【文件上传控件】的表单时，必须使用该值。数据分 成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：Content-Disposition:form-data;name=“myControl”

ltext/plain ：空格转换为 “+” 加号，但不对特殊字符编码。

2.input表单控件

用于接受来自用户的数据

• type属性：用于设定控件类型，取值如下：

text	单行文本框
password	密码框 （输入的内容将会被遮挡）
checkbox	复选框 （必须使用value属性来描述提交的值，使用checked属性默认选中）
radio	单选按钮（必须使用value属性来描述提交的值，使用checked属性默认选中，一个单选按钮组中所有控件都应该具有相同的name值）
submit	提交按钮
reset	重置按钮
file	文件按钮 （用于选中文件系统中的某个文件）
hidden	隐藏域（不显示在页面中，但是其值会被提交）
image	图像按钮（必须使用src来加载图片，使用alt来声明替换文本）
button	普通按钮

• 其他属性

name	用于设定控件名和提交数据的属性名
value	用于控件值初始化，可选
checked	单选框，复选框默认选中属性
disabled	表示禁用组件，禁用组件的值也不能被提交
size	当前控件的初始宽度
maxlength	指定可以输入的字符的最大值，适用于text,password。

3.button表单控件

type	指定控件类型 取值：button，submit，reset
name	按钮名称

4.label表单控件

label 用于表示某一表单控件的标题,，for 与为设定标题的表单控件的ID值一致。

<label for="username">Click me</label>
<input type="text" id="usernmae">

5.select表单组件

用于表示下拉列表或列表，可用属性：

multiple	指定控件类型，表示是否允许多选
size	显示的行数，默认值为0
disabled	表示禁用控件，禁用控件的值也不能被提交
name	用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交

6.option表单组件

option用于表示选项，value 定义控件的初始值。提交表单时，初始值会被提交给服务器。selected 表示该选项默认被选中。

7.H5新增表单元素

• progress：表示任务完成情况，默认为1。max：定义进度元素需要完成的工作量，value：定义已完成的工作量。
• meter：meter元素表示规定范围内的数量值。

value	在元素中特地表示出来的实际值，该值在min与max之间，如果未指定 ，该值默认为1
min	指定规定范围时允许使用的最小值，默认为0
max	指定规定范围时允许使用的最大值，默认为1
low	规定范围的下限值必须小于或等于high属性的值
high	规定范围的上限值（表示较高危险的意思）
optimum	最佳值，最优值

value越低越好时，optimum<low value
越高越好时，optimum>high
value在中间最好时，low<=optimum<=high，没有optimum时，默认value在中间最好

• 媒体元素
  音频 <audio src=“” controls autoplay loop muted></audio>
视频 <video src=“” controls autoplay loop muted></video>