HTML总结

来源：互联网发布：英克软件售后编辑：程序博客网时间：2024/06/14 00:55

HTML学习总结
DAY1
1、WEB前端
WEB前端 : Web Front-End
WEB : 网页
需求：
1、HTML/CSS/Javascript
2、各种框架
jQuery
AngularJS
Bootstrap
zepto
Vue
React
... ...
2、学习方法
1、英文
背
2、练
敲代码
3、打字
3、课程体系
1、阶段一：基础
1、HTML5Basic
2、CSS3Basic
3、PROJECT1 - JD Index
4、CSS3Core
5、PROJECT2 - JD Details
6、Bootstrap 框架
2、阶段二：Javascript(JS)
3、阶段三：高级
4、阶段四：框架

1、HTML5Basic (3天)
***************************
1、Web基础知识
1、Internet
1、简介
Internet 实际上就是由计算机所组成的网络结构

服务：
1、Telnet
远程登录
2、Email
电子邮件
3、WWW
万维网服务，World Wide Web
4、BBS
电子公告板 (论坛)
百度贴吧，天涯论坛，... ...
CSDN ... ...
5、FTP
文件传输协议

基本实现技术：
1、分组交换原理
将传递的数据拆分成若干数据包
2、TCP/IP协议
2、Web
Web ：运行在Internet上的最流行的应用
WWW : World Wide Web
W3C : World Wide Web Consortium(万维网联盟)

将各类信息以及服务进行无缝连接：
信息：文字，图像，音频，视频，文件
服务：BBS，Telnet，Email
3、Web的工作原理
WEB是基于浏览器 / 服务器模式的程序(B/S)
B : Browser 浏览器
S : Server 服务器

基于客户端 / 服务器模式的程序(C/S)
C : Client 客户端
S : Server 服务器
必须通过指定的客户端才能访问服务器数据的一种模式
由Web服务器，浏览器以及通信协议来组成
服务器：提供服务的机器
浏览器：工具
通信协议：web中使用的时http通信协议
http: Hyper Text Transfer Protocol
超级文本传输协议
规范了
数据是如何打包的
数据是如何传递的
1、Web服务器
功能：
1、存储Web上内容信息
2、接收客户端请求，并给出响应
3、具备一定的安全功能
产品：
1、Tomcat
2、Apache
3、IIS
... ...
2、WEB浏览器
功能:
1、代替用户提交请求(User Agent)
2、作为HTML/CSS/Javascript 的解析器
3、以图像化的方式显示网页文档
产品:
1、Microsoft IE
2、Mozilla FireFox
3、Google Chrome
4、Apple Safari
5、Opera
4、Web相关技术
1、服务器端技术
运行于服务器端，具备访问数据库的能力

1、PHP
2、JSP
3、ASP
4、ASP.NET
5、Python
6、NodeJS
2、浏览器端技术(客户端)
运行在客户端，由浏览器负责解释
1、HTML
2、CSS
3、JavaScript(JS)

2、HTML入门
1、HTML概述
Web : 一种应用
HTML是开发Web网页程序的一种语言

1、什么是HTML
HTML：Hyper Text Markup Language
超级文本标签语言
超级文本：具备超能力的文本
字符 a ：首字符
超文本 a ：链接
标签/标记：超文本的组成形式
语言：具备不同的语法规范
由HTML编写的文本最终是以 .html 或 .htm作为结尾的文件 , 并且由浏览器解释运行
2、HTML语法规范(重点)
1、标记
在HTML中，用于描述功能的符号称之为 "标记"

语法：
标记在书写时，必须用尖括号括起来(<>)
标记分成封闭类型的标记和非封闭类型的标记
1、封闭类型标记
必须成对出现
<标记> 内容 </标记>
注意：
1、封闭类型标记必须成对出现
2、标记必须要完整,否则会有意想不到的效果

2、非封闭类型标记
又称为单标记或空标记
<标记> 或 <标记/>
ex :
<br> : 换行
<hr/>: 水平线
2、元素
元素即标记
ex:
<a>百度</a>

1、元素的嵌套
元素之间可以相互嵌套，形成更为复杂的页面结构
语法：
<标记><标记1></标记1></标记>
注意：
1、注意嵌套顺序
2、必须完整嵌套
3、格式问题
被嵌套的内容要通过缩进(Tab)表示层级关系
ex:
<a><b><span><i><u>Hello World</u></i></span></b></a>
推荐的格式：
<a>
<b>
<span>
<i>
<u>
Hello World
</u>
</i>
</span>
</b>
</a>
2、属性和值
属性是用来修饰元素的
语法：
1、属性的声明必须位于开始标记中
2、属性名称与标记名称之间用空格隔开
<标记属性></标记>
<标记属性/>
3、属性值与属性之间用 "=" 来连接
属性值要用 "" 或 '' 引起来
<标记属性="值">
4、一个元素允许有多属性，多属性之间排名不分先后，中间用空格隔开
<标记属性1="值" 属性2="值">

ex:
<p align="center" id="p1"></p>

通用属性：大部分元素都会具备的属性
1、id
定义元素在页面中独一无二的名称
2、title
鼠标移入到元素上时所提示的信息
3、class
指定元素所引用的类选择器(CSS中使用)
4、style
定义元素的内联样式(css中使用)
3、注释
要编写在源文档中，但不想被浏览器解释运行的内容

注意：
1、注释不能嵌套

-->
以上结构是错的
2、注释不能出现在标记(<>)里
<a ></a>
以上的写法是错误的
3、文档结构
1、两部分组成
1、文档类型声明
指定当前html文档用的时哪个版本
语法：
文档中的第一句话位置处
<!doctype html>
2、html页面
网页要表示的信息的开始与结束
语法：
<html></html>
属性：
1、lang
取值：zh-cn
子级内容：
1、网页头部信息
作用：用于定义网页的全局信息
语法：
<head></head>
子级：
1、网页标题
<title>标题内容</title>
2、网页元数据（ mate 元数据标记）
指定网页编码格式
<meta charset="utf-8"/>
UTF-8(适应性全文)GB2312(简单中文)BIG5(繁体中文)
注意：
必须保证网页文档的编码格式也是 utf-8 的
编码字体类型要与保存一致
！指定网页的关键词
<meta name="keywords" content="关键词1"/>
注意:
把关键词的值打在content属性里
！指定网页的描述
<meta name="description" content="描述信息"/>
描述这个网站怎样描述信息
！指定网页的作者
<meta name="author" content="***"/>
说明这个网站的作者***
！指定网页的更新
<meta http-equiv="refresh" content="n"/>
n秒更新一次
！指定网页几秒后跳转到哪个网站
<meta http-equiv="refresh" content="n; url=http://blog.csdn.net/"/>
n秒后跳到http://blog.csdn.net/，url是自动跳转
3、样式声明
<style></style>
4、样式的引入
<linK>
5、JS的声明和引用
<script></script>

2、网页主体信息
包含要显示给用户去看的所有内容
<body></body>
属性：
1、text
作用：控制当前文档的文本颜色
取值：颜色的英文表示方式
2、bgcolor
作用：控制当前文档的背景颜色
取值：同上
3、文本
1、作用
以不同的形式展现文字
2、特殊字符
默认下，任意多个回车和空格最后都会被折叠成一个空格
通过转义字符表示特殊字符：
1、 
一个空格
2、>
>
3、<
<
4、©
?
5、¥
￥
！工具栏-特殊符号
3、文本标记
1、文本样式
<i>内容</i> 斜体显示文本
<u>内容</u> 下划线的文本
<s>内容</s> 删除线的文本
<b>内容</b> 加粗显示文本
<sub></sub> 下标
<sup></sup> 上标
！<strong></strong>粗体
!<em></em>斜体
特点：
所有的内容会在一行内显示
2、标题元素
作用：以标题的方式显示文本(突出显示)
语法：
<hn></hn>
n : 1~6
<h1></h1>
...
<h6></h6>
属性：
1、align ：文本的水平排列方式
取值：left / center / right
属性：width、size、color
！2、style=“color=”:加颜色
特点：
1、独自成行
2、加粗显示文本
3、上下会有垂直的空白
！4、最多六行
3、段落元素
语法：
<p></p>
属性：
align
特点：
1、垂直空白
2、独占一行
！3、会自动换行
4、换行元素
语法：<br> 或 <br/>
!、不换行元素
语法：<nobr>或<nobr/>
5、分割线元素
语法：<hr> 或 <hr/>水平线
属性：
1、size
尺寸，以px或%为单位(省略单位的话是px)
2、width
宽度，以px或%为单位
3、align
水平对齐方式
4、color
颜色
6、行分区元素
语法：<span></span>
作用：包裹文本并且设置不同的样式
7、块分区元素
语法：<div></div>
作用：布局
8、预格式化
作用：保留标记内的格式(回车和空格)
语法：<pre></pre>
9、块级元素和行内元素
1、块级元素
每一个块级元素独占一行
块级元素的主要作用：布局
2、行内元素
多个元素会在一行内显示，显示不下自动换行
span,a，i,b,s,u,sub,sup
作用：设置文本样式
4、改文本模块
默认代码设置：保存命名为template（模板）
文件菜单-〉新建文件-〉配置新建文件模块-〉文件名（需找对）-〉应用-〉确定

DAY2
********
1、图像和链接
1、URL
1、目录 & 目录结构
目录：web站点中保存文件的文件夹
2、URL
URL:Uniform Resource Locator 即统一资源定位符/定位器，俗称路径
是描述资源文件位置的信息
ex：a.html 中想使用 b.jpg
b.jpg 就是资源文件
a.html 就是当前文件

URL的三种表示方式：
1、绝对路径
从资源文件所在的最高级目录下开始的完整路径表示
1、获取网络资源文件(只能是绝对路径)
由
通信协议 http / https
主机名(域名/IP地址) www.baidu.com
目录路径：目录结构
文件名
组成
ex：获取百度 LOGO图像
通信协议：https ://
域名：www.baidu.com
目录路径：img
文件名：bd_logo1.png

https://www.baidu.com/img/bd_logo1.png
2、获取本机资源文件
从盘符位置处开始一直到资源文件名字位置
D:/My/Images/page.JPG
2、相对路径
从当前文件位置处开始，去查找资源文件所经过的路径，就是相对路径

ex:
../../Images/a.jpg
3、根相对路径
从web站点所在的服务器根目录下开始查找的

以 / 作为开始的
ex:
/images/a.jpg
2、图像
1、语法
标记：<img> 或 <img/>
属性：
1、src (全称：source，源)
<img src="url"/>
<img src="a.jpg"/>
<img src="Images/a.jpg"/>
...
注意：URL严格区分大小写
2、width
宽度
3、height
高度
注意：
1、如果width和height只设置其中一个属性的话，那么另外一个将等比缩放
2、尽可能的设置图像的宽和高
！4、alt
替换
注意：若图片显示不了，则出现alt属性的值文字
！5、title
说明
注意：鼠标停在那就有字

3、链接 (超链接)
1、语法
标记：<a>内容</a>
注意：默认情况下，a是不能被点击的
属性：
1、href
链接的URL
只有设置href属性后，才允许被点击
2、target
目标，打开新网页的方式
取值：
1、_self
默认值，在自身标签页中，打开新网页
2、_blank
在新标签页中，打开新网页
2、链接的表现形式
1、资源下载
链接地址为 **.zip / **.rar
2、电子邮件链接
<a href="mailto:zhaoxu@tedu.cn">发送邮件</a>
！3、音乐链接
<a href="**.mps"></a>
4、返回页面顶部的空链接
<a href="#">返回顶部</a>
5、链接到Javascript
<a href="javascript:js代码"></a>
3、锚点(本网页不同屏)
1、锚点(Anchor)
在html文档的某行位置处做一个记号
允许通过超链接跳转到该记号位置处
2、锚点的使用方式
1、定义锚点(做记号)
1、通过 a 标记的 name 属性
<a name="名称">内容</a>
2、通过任意标记的 id 属性
<标记 id="名称"></标记>
2、链接到锚点(跳转到锚点处)
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
2、表格
1、表格的作用
表格，是由一些称之为单元格的东西按照从左到右，从上到下的顺序排列而成的
2、语法
定义表格:<table></table>
定义表行:<tr></tr>
定义单元格:<td></td>

尽量保证默认情况下，每行中的单元格数量是相同的
3、表格属性
1、表格的属性
1、width ：宽度以px或%为单位
2、height：高度以px或%为单位
3、align ：控制表格在其父元素中水平排列方式取值：left/center/right
4、border：边框宽度，默认为0
5、cellpadding ：设置单元格内边距
单元格边框与内容之间的距离
6、cellspacing ：设置单元格外边距
单元格与单元格之间的距离
7、bgcolor ：背景颜色
2、表行(tr)的属性
1、align
当前行内容的水平对齐方式
2、valign
当前行内容的垂直对齐方式
取值：
top / middle / bottom
3、bgcolor
当前行的背景颜色
3、单元格(td)的属性
1、align
2、valign
3、width
4、height
5、colspan
设置单元格的跨列
6、rowspan
设置单元格的跨行
7、bgcolor
4、单元格的特点
1、某一行单元格的高度，以最高的单元格高度为准
2、某一列的单元格宽度，以最宽的单元格宽度为主
3、优先级：table〉td>tr
5、table的子元素
1、表格标题
<caption>标题文本</caption>
注意：
1、一个表格最多只能有一个标题
2、caption必须位于 <table>下的第一句话
2、td 允许被 th 替换
6、表格的复杂应用
1、行分组
1、表头行分组
<thead></thead>
允许包含一行或多行tr
2、表主体行分组
<tbody></tbody>
允许包含任意多的连续tr
3、表尾行分组
<tfoot></tfoot>
允许包含一行或多行tr

注意：
如果不对table中的数据进行显示分组的话，默认都在tbody中
2、不规则表格
通过 td 的 colspan 和 rowspan 属性创建不规则的表格
1 、colspan
跨列
在一行中，从指定单元格位置处开始，横向向右合并几个单元格(包含自己)
注意：被合并掉的单元格，要删除
2、rowspan
跨行
在同一列中，从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)
注意：被合并掉的单元格，要删除
3、表格的嵌套
允许在单元格中在放入另一个表格
<table>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
3、列表
1、语法
1、组成
1、列表的类型
有序列表：<ol></ol> --> Order List
无序列表：<ul></ul> --> Unorder List
2、列表项
显示在列表中的内容
<li></li> --> List Item
2、属性
1、有序列表(ol)的属性
1、type
取值：
1、1 ，数字(默认)
2、a ，小写字母
3、A ，大写字母
4、i ，小写罗马字符
5、I ，大写罗马字符
2、start
起始编号是多少
取值：具体数字
2、无序列表(ul)的属性
1、type
取值：
1、disc
默认值，实现圆点
2、circle
空心圆
3、square
实现方块
4、none
不显示标识
2、列表的嵌套
允许在一个列表中出现另一个列表
被嵌套的列表必须放在 <li>中

3、定义列表
1、作用
往往用于给出一类事物的定义情形，如：名词解释
2、语法
<dl></dl> : 表示定义列表
<dt></dt> : 定义列表中的标题(事物，名词)
<dd></dd> : 对标题(事物，名词)解释说明的内容
3、使用场合
图文混排时使用

DAY3
==========================================
1、结构标记
1、网页结构(布局)
块级元素做布局 -> div
2、什么是结构标记
为了取代做布局的 div，从而体现出布局标记的语义性
3、常用结构标记
1、header 元素
作用：用来表示页面或某部分内容的顶部信息
语法：<header></header>
2、nav 元素
作用：用来表示页面的主导航信息
语法：<nav></nav>
3、section 元素
作用：表示页面中的小节，也可以用来表示页面的主体内容
语法：<section></section>
4、article 元素
作用：表示页面中的文章信息，或是文字居多的部分，比如：博客信息，微博中的条目，论坛中的主贴和回帖
语法：<article></article>
5、footer 元素
作用：表示页面中底部的信息，一般用户关注度较低
语法：<footer></footer>
6、aside 元素
作用：表示页面中的边栏信息
语法：<aside></aside>
2、表单(重难点)
1、表单概述
表单用于显示、收集用户信息，并提交给服务器

完整的表单由两部分组成：
1、实现表单以及可交互的界面元素(前端)
1、表单元素
用于定义表单的提交信息如：提交地址，提交方式... ...
2、表单控件
能够与用户交互的界面元素如：文本框，密码框... ...
2、表单提交后的处理(服务器端)
2、表单元素
1 、语法
<form></form>

注意：
1、只有出现在 form 中的表单控件的数据才会被提交
2、form 在页面中没有显示效果，只有功能
2、属性
1、action
作用：指定提交给服务器处理程序的地址，该地址要与服务器端人员商量
注意：如果省略不写，默认提交给本页
2、method
作用：指定提交数据的方法(模式)
取值：
1、get (默认值)
获取
特点：
1、以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低
2、最大提交2kb数据
3、向服务要数据时用get方式
2、post(保密，信息量大)
邮寄... ...
特点：
1、以隐式的方式提交数据到服务器(不会显示),安全性较高
身份证号，密码，安全性要求高的数据，必须用post
2、无提交数据大小限制
3、让服务器处理数据时使用post
3、put
4、delete
... ...
3、enctype
作用：指定表单数据的编码方式(什么样的数据允许被提交)
取值：
1、application/x-www-form-urlencoded
默认值
可以将所有的数据提交给服务器(文件除外)
2、multipart/form-data
允许将文件(图像，音频，视频，文档等)提交给服务器
3、text/plain
允许将普通字符提交给服务器，特殊字符无法提交(=,&,?)
4、name
定义表单的名称
5、ID
定义表达独一无二的标识
3、表单控件
都是与用户进行交互的元素
表单控件：
1、input 元素
作用：收集用户的信息
标记：<input> 或 <input/>
属性：
1、type
根据不同的type值，创建不同的输入控件
2、name
定义控件的名称，提供给服务器端使用,采用匈牙利命名法控件缩写+功能
3、value
定义控件的值，提供给服务器端使用
4、disabled
禁用控件(无法操作，无法提交)
该属性无值
input控件详解：
1、文本框与密码框
文本框：type="text"
密码框：type="password"

属性：
1、maxlength
限制输入的字符数
2、readonly
只读(只能看，不能改，但允许被提交)
无值属性
3、name
缩写：txt
用户名：txtUsername
用户密码:txtPassword
4、placeholder
占位符
！5、size
文本框宽
！6、requized
必须填写
！7、value
按钮的文字/文本框初始值
2、选择框（单选按钮和复选框）
单选按钮：type="radio"（单选）
复选框：type="checkbox"（多选）

属性：
1、name
1、定义控件的名称
2、为控件分组

radio缩写：rdo
checkbox缩写：chk
！注意：name要相同
2、value
值
3、checked
预选中（已勾选）
3、按钮
1、提交按钮
type="submit"
2、重置按钮
type="reset"
3、普通按钮
type="button"
属性：
1、name
缩写：btn
2、value
按钮上的文字
其他按钮：
1、图片按钮(提交功能)
<input type="image">
属性：src
2、按钮(提交按钮)
<button>内容</button>
4、隐藏域和文件选择框
隐藏域：type="hidden"、placeholder=""
文件选择框：type="file"

隐藏域：想提交给服务器，但不想被用户看见的数据放在隐藏域中

属性：
1、name
2、value
使用文件选择框时注意以下问题：
1、要求 form 的method 属性必须为 post
2、要求 form 的enctype 属性必须为 multipart/form-data

2、textarea 元素(多行文本域)
允许录入多行数据
1、语法
标记：<textarea></textarea>
属性：
1、name
缩写：txt
2、cols
指定文本区域的列数
3、rows
指定文本区域的行数
4、readonly
只读
3、下拉菜单[select 和 option(多行选择框)]
语法：
1、标记
选择框：
<select></select>(单行）
选项：
<option></option>（全显示）
2、属性
1、<select>属性
1、name
缩写：sel
2、size
默认显示选项的数量，如果大于1的话，则为滚动列表
3、multiple
设置多选，也会变成滚动列表
配合 Ctrl 或 Shift 实现多选
2、<option>属性
1、value
值
2、selected
默认预选中,无值
！ex： <select name="city" size="5" multiple>
<option>意向城市</option>
<option value="BEIJING">北京</option>
<option selected>上海</option>
4、其他
1、label 元素（点文字可勾选）
作用：关联文本与控件
语法：
1、标记
<label></label>
2、属性
for ：表示与该元素关联的控件的ID值
！ ex: <input type="checkbox" name="secret" id="secret">
<label for="secret">
注意：id与for的值要相同
2、为控件分组
<fieldset></fieldset> : 分组
<legend></legend> : 分组标题
3、浮动框架
1、什么是浮动框架
可以在一个浏览器窗口中同时显示多个页面文档的内容
（在一个页面中引入另外一个页面）
2、语法
1、标记
<iframe>文字</iframe>
！注意：当iframe不出现，则出现文字。
2、属性
1、src
浮动框架中要引入的页面URL
2、width
宽度
3、height
高度
4、frameborder
浮动框架边框，如果不想要边框的话，可以设置为0
！注意：所引用的网页的target的值要与name的值相同
！5、scrolling="yes/no"
滚动桥
！ex： <a href="biaodan.html" target="window">案例二</a>
<h1>浮动框架iframe</h1>
<iframe src=表单练习.html width="900px"
height="200px" frameborder="0" name="window"
scrolling="yes"></iframe>
3、新表单元素(HTML5新标记) ：缩写统一 txt
属性：
required : 非空限制

1、电子邮件类型
<input type="email">
2、搜索类型
<input type="search">
3、URL类型
数据必须符合 URL 规范
<input type="url">
4、电话号码类型
<input type="tel">
移动终端：弹出数字键盘
5、数字类型
<input type="number">
属性：
1、min
控件接受的最小值
2、max
控件接受的最大值
3、step
控制控件递增的步长，默认为1
6、范围类型
作用：允许选择指定范围内的一个值
<input type="range">
属性：
1、min ：指定范围的最小值(下限值)
2、max ：指定范围的最大值(上限值)
3、step：值变化的步长
4、value：设置初始值
7、颜色类型
作用：颜色拾取控件
<input type="color">
8、日期类型
作用：允许用户选择日期
<input type="date">
9、周类型
作用：与date类似，但只能选择周
<input type="week">
10、月份类型
作用：与date类型，但只能选择一个月份
<input type="month">

4、摘要与细节
将信息展开/收缩
<details>
<summary>摘要 <summary/>
<div>细节
<div/>
<detail/>
！ex：
<details>
<summary>发票信息</summary>
<div>
付款单位:<input/></br>
<select>
<option>生活用品</option>
<option>数码产品</option>
<option>办公用品</option>
<option>明细</option>
</select>
</div>
</details>

5、度量元素
用于磁盘使用量、电量、选举、投票
<meter></meter>
1、属性：min、max、value（当前值）、title（显示当前值、说明）
ex：
<h1>电池使用量</h1>
<div>
电池1:<meter min="0" max="100" value="60" title="60%"></meter><br/>
电池2:<meter min="0" max="100" value="30" title="30%"></meter>
</div>

6、时间元表
<time></time>
注意：属性：datetime(不是具体时间)

7、点亮字本
<mark></mark>

阅读全文

0 0