html5基础知识点

1、WEB基础知识

1、WEB 与 Internet

1、Internet

互联网

若干台计算机通过网线所连接而成的物理设备

主要服务：

1、Telnet

2、Email

3、WWW(Word Wide Web)

4、BBS

5、FTP

信息共享

基本实现技术：

1、TCP/IP 协议簇

2、分组交换原理

2、WEB

1、什么是WEB

网页应用

2、主要作用

将各类信息(文本，图像，音频，视频) 和服务进行连接

3、网站与网页

4、WEB的工作原理

1、基于 B/S 结构模式的程序

B/S:Browser / Server ，基于浏览器/服务器

C/S:Client / Server,如：QQ，游戏

2、组成

1、服务器

WEB中的所有的信息都保存在服务器上

2、浏览器(UA : User Agent)

3、通信协议

http: hyper text transfer Protocol 超级文本传输协议

功能：规范了数据是如何打包的以及如何传递的。

http://www.baidu.com

5、WEB服务器

1、功能

1、存储 WEB上的信息

2、处理用户的请求，执行服务器端程序，并且给出响应

3、安全功能

2、主要产品

1、TOMCAT(APACHE)

2、IIS(Internet Information Service , MS)

3、APACHE

3、技术

1、php

2、jsp

3、asp

4、asp.net

6、浏览器

1、功能

1、代理用户提交请求

2、作为 html解释器以及内嵌脚本(js)程序的执行器

3、以图形化方式显示文档内容

2、产品

1、IE

2、Firefox

3、Chrome

4、Opera (欧朋)

5、Safari

3、技术

1、HTML : 网页技术

2、CSS ：样式表

3、JavaScript ：脚本

2、HTML快速入门

1、什么是HTML

Hyper Text Markup Language

超级文本标记语言

该语言所组成的文件以 .html 或 .htm 作为后缀

2、HTML基础语法

1、标记语法

1、什么是标记

在 html 中用于描述功能的符号称之为 "标记"

<a> : 超链接

<b> : 加粗显示文本

2、语法

使用时，必须使用尖括号(<>)

分类：

1、封闭类型

也叫双标记，必须成对出现

<标记> 内容 </标记>

注意：

1、双标记必须成对出现

<b>

2、

<b>

fdsafdsa

</b>

2、非封闭类型

又称为：空标记或单标记

语法：<标记>或<标记/>

<img> :

<img/>

<img></img> 错误

2、元素

元素，即标记

<a></a>

元素的嵌套

<标记>

<标记></标记>

</标记>

注意：

1、注意嵌套顺序

<div><a></a></div> 正确

2、用缩进表示层级关系

<div>

<a></a>

</div>

<div>

<a>

<b>

</b>

</a>

</div>

3、属性和值

1、什么是属性

属性是用来修饰元素的

<p></p>

2、语法

1、属性声明必须位于开始标记中

2、允许出现多属性，多个属性之间用空格来分开，排名不分先后

值：

属性和属性值之间用 = 连接

属性="值"

属性=\'值\'

<标记属性=值属性=值></标记>

<标记属性=值属性=值>

3、标准属性

1、id

作用：定义元素在页面中的独一无二的标识

2、title

作用：鼠标移入时所提示的文字

3、class

作用：引用类选择器

4、style

作用：定义内联样式

ex：定义一个p元素，设置其id为p1，并且鼠标移入的时候，提示这是一个p

4、注释

1、作用

被注释的东西是不会被浏览器所解释的。

2、注意

1、注释不能被嵌套

<!--

-->

错误

2、注释不能出现在标记中

错误

3、HTML版本

1、1999.12.24 HTML4.01

<img>

<img/>

2、2000.1.26 XHTML1.0

规范与 html4.01 几乎相同

是更严格更纯净的HTML版本

<img/>

3、HTML5

目标：更为简洁的 HTML代码

4、文档结构

文档类型声明

作用：指定网页版本和风格

html5:

<!doctype html>

w3c : 万维网联盟

html页面

由一对 html 根标记组成

练习

1、创建一个 html 文件

步骤：

1、创建文本文件

2、将后缀名改为 html

2、搭建网页结构

步骤：

1、添加文档类型声明

2、创建 html 根标记

5、<html>元素

1、作用

描述整个 html 网页内容的

2、2个子元素

1、head 元素

1、作用

用于定义页面"全局信息"

2、语法

3、可包含

1、<title></title>

作用：网页标题

2、<meta charset="utf-8">

3、<meta>

4、<style>

作用：定义内部样式表

5、<link>

作用：引入外部样式表

6、<script>

作用：声明或引入 JS代码(文件)

2、body 元素

1、作用

显示的主体内容

2、语法

3、文本(标记)

1、特殊字符

网页中的空格， < > 页面中的表现方式

通过转义字符表示特殊字符

1、

空格

2、<

less than

3、>

greater than

4、©

5、¥

￥

2、文本标记

1、文本样式标记

<b></b> ：加粗

<i></i> ：斜体

<s></s> ：删除线

<u></u> ：下划线

<sub></sub> ：下标

<sup></sup> ：上标

2、标题元素

语法：

n:1~6 即 1级标题~6级标题

效果：

改变文字大小，加粗，以及上下垂直空白距离

作用：突出显示文本

3、段落元素

语法：<p></p>

显示效果：上下有垂直空白

属性：

align ：控制段落，标题的文本的水平对齐方式

4、换行元素

语法：<br> 或 <br/>

5、块分区元素

语法：<div></div> 层

效果：独占一行

作用：做布局

6、行内分区元素

语法：<span></span>

作用：显示文本的不同效果

7、分割线元素

语法：<hr>

作用：显示一条水平线

属性：

1、size ：尺寸

2、width ：宽度

默认 100%

3、align

4、color ：颜色

8、预格式化

语法：<pre></pre>

作用：保留源文档中的空格和换行

9、行内元素与块级元素

1、块级元素

特点：独占一行，即元素的前后都会自动换行

如：div,p,pre,h1~h6, ... ...

作用：都能做布局

注意：

所有的块级标记都具备 align属性

2、行内元素

特点：不会换行，多个元素可在一行内显示

作用：包裹文本设置文本样式

如：span,i,u,s,b,sub,sup... ...

注意：、

行内元素没有align属性

回顾

1、html语法

1、标签语法

<标签></标签> : 双标记

<标签>或<标签/>:单标记

2、元素

即标签

1、可以被嵌套

通过缩进表示嵌套层级

2、属性和值

属性：用来修饰元素

值：最终修饰效果

<标签属性名=值 />

标准属性：

1、id

2、title

3、class

4、style

3、注释

1、注释不能嵌套

2、不能出现在标记中<><>

2、文档结构

1、html文档结构

1、文档类型声明

<!doctype html>

2、根标记

2、页面结构

1、头部

1、<title></title>

网页标题

2、<meta charset="utf-8">

3、网页关键字

4、网页描述

2、网页主体

属性：

1、text ：网页文本颜色

2、bgcolor:网页背景颜色

3、文本

1、特殊字符

空格

> >

< <

¥ ￥

2、标记

1、文本样式

<b></b>加粗

<i></i>斜体

<s></s>删除线

<u></u>下划线

<sub></sub>下标

<sup></sup>上标

2、标题

n : 1 ~ 6

3、段落

<p></p>

注意：p 不能嵌套块级元素，包括自己

<p>

<p></p>

</p>

错误

4、换行元素

<br>

5、块分区元素

6、行内分区

包裹文本，并设置文本的不同表现形式

7、分割线

<hr>

属性：

size : 尺寸

width : 宽度

color : 颜色

align : 水平对齐方式

8、预格式化

保留源文档中的回车与空格

9、块级元素与行内元素

1、块级元素

特点：独占一行

作用：布局

display:block;

2、行内元素

特点：多个元素在一行内显示

作用：设置文本的样式

display:inline;

*************************************

1、图像和链接

1、URL

1、目录结构

文件夹

WEB站点中保存资源文件夹名称

2、URL

URL(Uniform Resource Locator) ：统一资源定位器俗称路径

功能：用来标识网络中的资源的位置

3、URL分类

1、绝对路径

1、网络资源

协议名、主机名(域名/IP地址)、目录路径、资源名称

协议名:http 或 https

主机名：www.baidu.com

目录路径：img

资源名称：bd_logo1.png

百度LOGO的绝对路径：https://www.baidu.com/img/bd_logo1.png

2、本机资源

从文件所在的最高级目录下开始查找

file:///E:/%E8%B5%B5%E6%97%AD/01_HTML5BASIC/Day02/jd/images/jd_logo.png

2、相对路径

1、什么是相对路径

相对于当前文件所在的位置出发，找到资源文件所经过的所有路径就是相对路径

1、同目录，直接用

2、子目录，先进入，再引用

3、父目录，先返回，再引用

../ ：返回上一级目录

3、根相对路径

作用：永远都是从 WEB站点的根目录下开始查找

表示：/ 作为开始

ex : /img/index/jd_logo.png

2、图像

1、图像元素

<img/>

属性：

1、src

要显示的图像路径(URL)

路径严格区分大小写(服务器用)

2、width

图像宽度

3、height

图像高度

以上俩属性可以取数值，以px作为单位，px可以省略不写

以上俩属性如果只声明一个属性的话，那么另外一个会等比缩放

4、title

3、链接

1、链接元素

链接：又叫超链接，用户点击时能够发生页面的跳转等其他操作

1、语法

2、属性

1、href 属性

链接 URL

注意：只有设置了 href 属性后，元素才可以被点击

2、target 属性

目标，即打开新网页的方式

取值：

1、_self

在自身标签页中打开

默认值

2、_blank

在新标签页中打开

2、链接的表现形式

1、目标文档为下载资源

2、电子邮件链接

联系我们

前提：计算机中必须先安装邮件客户端以及绑定账号

3、返回页面顶部的空链接

4、链接到JavaScript

3、锚点

1、作用

某个位置处做个记号

2、锚点使用方式

1、定义锚点

1、a元素的name属性定义锚点

2、任何一个元素的 id 属性

<标签 id="值"></标签>

2、链接到锚点处

1、链接本页锚点

2、链接到其他页面的锚点

2、表格

1、表格的作用

按照一定的格式来显示数据

2、创建表格

1、定义表格:<table></table>

2、创建表行:<tr></tr>

3、创建单元格(列):<td></td>

注意：保证每行的列数都是一致的

3、表格的属性

1、table 属性

1、width ：宽度

2、height ：高度

3、align

作用：设置表格元素的水平对齐方式

取值：left/center/right

4、border ：边框宽度

5、cellpadding

内边距-单元格边框与内容之间的距离

6、cellspacing

外边距-单元格之间的距离

7、bgcolor ：背景颜色

2、tr 属性

1、align

当前行的文本水平对齐方式

2、valign

当前行的文本垂直对齐方式

取值：top/middle/bottom

3、bgcolor

当前行的背景颜色

3、td 属性

1、width

2、height

3、align

4、valign

5、colspan ：设置单元格跨列

6、rowspan ：设置单元格跨行

4、表格的子元素

1、<caption></caption>

作用：定义表格的标题

2、行标题/列标题

显示效果：水平居中，并且加粗显示文本

5、表格的复杂应用

1、行分组

将数据行分成不同的组以便取设置样式

1、表头行分组

2、表主体行分组

3、表尾行分组

注意：如果不设置行分组的话，那么所有的行默认都会被当成tbody的内容

2、不规则表格

通过 td 的 colspan、rowspan 属性

1、colspan

跨列，合并列

横向向右合并几个单元格(包含自己)

注意：被合并的td，一定要删除

2、rowspan

跨行，合并行

纵向向下合并几个单元格(包含自己)

3、表格的嵌套

表格可以嵌套其他的表格

被嵌套的表格要出现在 <td></td>中

3、列表

1、作用

按照一定的结构显示数据

将一组数据按照从上到下的顺序来进行排列

2、列表的组成

由列表类型和列表项

3、语法

1、有序列表

标记：<ol></ol> --> Order List

列表项：<li></li> --> List Item

属性：

1、type

列表项前的列表类型

取值：

1、1 数字(默认值)

2、a 小写字母

3、A 大写字母

4、i 小写罗马字符

5、I 大写罗马字符

2、start

列表项前的标识，从第几个字符开始显示

2、无序列表

标记：<ul></ul> -> Unorder List

列表项：<li></li>

属性：

1、type

取值：

1、disc ，实心圆(默认值)

2、circle ，空心圆

3、square，实心矩形

4、none，不显示列表项

3、嵌套列表

在 <li>中，可以嵌套另一个列表

4、定义列表

1、作用

用于要给出一类事物的定义情形，比如：名词

2、语法

<dl></dl> : 定义一个定义列表

<dt></dt> : 定义要描述的名词术语

<dd></dd> : 定义名词术语的解释

3、使用场合

图文混排

回顾

1、图像和链接

1、URL

1、绝对路径

1、网络资源

协议名主机名(域名/IP) 目录名资源名

2、本机资源

从资源文件所在的最高级目录下开始查找

2、相对路径

相对于当前文件所在的位置开始查找资源文件所在的位置所经过的路径-通过位置关系查找资源文件

1、同目录，直接用

2、子目录，先进入

3、父目录，先返回，再进入

返回：../

3、根相对路径

从 WEB站点所在的根目录下开始查找

表现：/ 开始

2、图像

1、格式

jpg，gif，png

2、图像元素

<img>

3、属性

1、src

图像 url

2、width

3、height

4、title

3、链接(超链接)

1、标记

2、属性

1、href

链接资源的url

2、target

_self : 默认，自身标签页打开

_blank: 新标签页打开

3、name

定义锚点

3、表现形式

1、目标为资源下载

2、发送电子邮件

3、返回页面顶部的空链接

4、执行 JS

4、锚点

作用：在网页中某位置处做记号

语法：

<标记 id=""></标记>

跳转到锚点处:

2、表格

1、什么是表格&作用

由 "单元格" 按照从左到右，从上到下的方式进行排列的。

作用：按照一定的结构显示数据

2、语法

1、定义表格

2、创建表行

3、创建单元格(列)

3、属性

1、table

width：

height：

align：表格在父层元素中的水平个对齐方式

border:边框

cellpadding：内边距，单元格内容与单元格边框的距离

cellspacing：外边距，单元格与单元格或表格之间的距离

bgcolor：背景颜色

2、tr

align ：内容的水平对齐方式

valign ：内容的垂直对齐方式(top/middle/bottom)

bgcolor ：当前行的背景颜色

3、td

width

height

bgcolor

align

valign

rowspan ：跨行

colspan ：跨列

4、table 的子元素

1、标题

效果：表格之上，水平居中

2、行标题/列标题

作用：与 <td>一致，加粗，文字水平居中

5、表格复杂应用

1、行分组

1、表头行分组

2、表主体行分组

3、表尾行分组

注意：如果不显示设置行分组的话，那么都默认为 tbody 中的元素

2、不规则表格

每行的列数不统一

td 的属性 colspan,rowspan

1、跨列

合并列，横向向右合并几个单元格(包括自己),被合并掉的要删除掉

2、跨行

合并行，纵向向下合并几个单元格(包括自己),被合并掉的要删除掉

3、嵌套

表格中的所有内容必须放在 td 中

3、列表

1、作用

按照一定的格式显示数据

默认从上到下的显示

2、列表的组成

1、列表的类型

有序(ol)

无序(ul)

2、列表项

3、属性

1、有序列表

1、type

2、start

标识从第几个字符开始

2、无序列表

1、type

disc

circle

square

none : 无标识

4、定义列表

1、作用

对一种情形进行定义并解释说明

2、语法

定义列表： <dl></dl>

定义情形： <dt></dt>

定义解释： <dd></dd>

3、使用场合

图文并茂

***********************

1、结构标记

1、作用

通过一组特殊的标记来完成网页的布局

目的：提升语义性

2、结构标记

1、<header></header>

作用：定义网页或页面某部分的头部显示内容

替换：<div id="header"></div>

2、<nav></nav>

作用：在页面中，负责定义导航部分内容

替换：<div id="nav">

3、<section></section>

作用：表示页面中的主体内容

替换：<div id="main"></div>

4、<article></article>

作用：显示论坛中的帖子、具体的新闻、博客的条目、用户评论、微博信息等 ....

5、<aside></aside>

作用：表示边栏信息

替换：<div id="left_side"></div>

6、<footer></footer>

作用：定义页面最底部的信息，用户关注度不太高的

替换：<div id="footer"></div>

2、表单(重难点)

1、作用

表用用于收集、显示用户信息，并且将信息提交给服务器

2、表单组成

1、表单元素

2、表单控件

3、表单元素

1、定义表单

2、属性

1、action

表单提交时的动作

指定服务器端处理程序的地址

通常都是有服务端开发人员提供

默认为提交给本页

2、method

表单数据的提交方式

取值：

1、get

1、显示提交：会将表单中所有的提交信息显示在地址栏上

2、安全性较低

3、大小限制：2KB

4、场合：向服务器要数据的时候使用 get 方式,根据指定关键字进行搜索时

2、post

1、安全性较高

所提交的数据不会显示在任何地方上

注册信息或者涉及到密码，卡号等一定要用post

2、无长度限制

3、场合：传递数据给服务器去处理使用

默认值为 get

3、enctype

作用：指定表达数据的编码方式，表单中的那些数据可以提交给服务器

取值：

1、application/x-www-form-urlencoded

默认值，允许将普通字符和特殊字符提交给服务器，文件不行

2、multipart/form-data

特点：允许提交文件,会影响普通上传数据

3、text/plain

特点：只允许进行普通字符的提交，特殊字符无法提交

如：?,=,&

4、name

表单名称，JS允许使用name属性获取表单

4、表单控件

1、作用

1、接收用户数据，与用户交互

2、提供了可视化的外观

2、表单控件分类

1、input 元素

提供了：文本输入(文本，密码)，按钮，单选按钮，复选框，文件选择框，隐藏域

1、语法

<input>

2、属性

1、type(重点)

根据不同的type属性值，创建各种类型的输入控件。

注意：如果不写 type值或者写错了 type值得话，那么默认就是文本框

2、value

提交给服务器的值

3、name

控件的名称,服务器使用

注意：如果不设置name属性的话，数据是无法提交给服务器的

4、disabled

禁用

注意：该属性无值

3、具体表单控件元素

1、文本框与密码框

文本框:type="text"

密码框:type="password"

缩写：txt

属性：

1、name

规范：匈牙利命名法

由控件缩写+控件作用组成

2、value

控件的值，以及默认显示的默认值

3、maxlength

限制输入的字符数

4、readonly

只读

不需要设置值

2、单选按钮和复选框

单选按钮：type="radio"

缩写：rdo

特点：一组中，只能有一个被选中。name值相同则为一组。

复选框：type="checkbox"

缩写：chk

属性：

1、name ：设置名称，分组。

2、value ：尽量设置

3、checked ：设置默认被选中

3、按钮组

1、提交按钮

type="submit"

2、重置按钮

type="reset"

3、普通按钮

type="button"

属性：

1、name

2、value

按钮上显示的文字

4、隐藏域和文件选择框

1、隐藏域

type="hidden"

缩写：txt

作用：将不想展示给用户，但要提交给服务器的数据保存在隐藏域中

2、文件选择框

type="file"

name必不可少

缩写：txt

注意：

1 、method 必须为 post

2、enctype 必须为 multipart/form-data

2、textarea 多行文本域

1、语法

2、属性

1、name

当前表单元素的名称

2、cols

指定文本域的列数

数字(英文状态下允许显示的列数)

3、rows

指定文本域的行数

4、readonly

只读

3、select和option 选项框

1、表现方式

1、下拉选项框

2、滚动列表

2、标签

1、<select></select>

创建选项框

属性：

1、name

缩写：sel

2、size

值>1的话，则为滚动列表，否则就是下拉选项框

3、multiple

设置多选

2、<option></option>

选项框中的选项

属性：

1、value

选项的值

2、selected

预选中

4、其他控件

1、为控件分组

1、标记

作用：为控件分组

作用：为分组指定标题

2、<label>元素

作用：关联文本与表单元素。点击文本就如同点击所关联的表单元素

语法：

属性：

for：表示与该元素相关的表单控件的ID值

3、其他标记

1、浮动框架

1、什么是浮动框架

可以在一个浏览器窗口中同时显示多个页面文档(一个浏览器中显示多个网页)

2、语法

3、属性

1、src

浮动框架中的网页URL

2、width

浮动框架的宽度

3、height

浮动框架的高度

4、frameborder

浮动框架边框

设置为0，则没有边框

2、摘要与细节

1、作用

允许用户动态的展开或收缩页面某部分内容

2、语法

内容1

内容2

</details>

3、度量元素

1、作用

在页面中定义度量衡

多数用于表示数据的比例

2、语法

3、属性

1、min

定义度量范围的最小值，默认为0

2、max

定义度量范围的最大值，默认为1

通常改成 100

3、value

度量值，显示在度量元素上的值。默认为 0

4、时间元素

1、作用

关联时间的不同表现形式

2、语法

3、属性

1、datetime

规定日期与时间，日期与时间用T分割

5、高亮文本显示

语法：

https://www.baidu.com/?txtUserpwd=dfsafdsa&rdoGender=female&chkHobby=drink&chkHobby=play

https://www.baidu.com/?txtUsername=%E8%AF%B7%E8%BE%93%E5%85%A5%E6%82%A8%E7%9A%84%E5%A7%93%E5%90%8D&txtUserpwd=fdsafdsa&rdoGender=female&chkHobby=eat&chkHobby=play

file:///E:/%E8%B5%B5%E6%97%AD/01_HTML5BASIC/Day03/02-%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6.html?txtUsername=%E8%AF%B7%E8%BE%93%E5%85%A5%E6%82%A8%E7%9A%84%E5%A7%93%E5%90%8D&txtUserpwd=fdsafdsa&rdoGender=female&chkHobby=drink&txtUID=110120119

6.html?txtUserpwd=&rdoGender=male&txtUID=110120119&txtImg=&txtIntro=fdafdsa&selEdu=0&selCity=bj&selCity=tj

02.html?txtName=mary&rdoGender=1&selEdu=1&selCity=sz&txtIntro=Guess&chkPublic=on