html复习

- 1.完整的HTML结构
- 2.h、p、strong元素
- 3.code、br、hr元素
- 4.字符实体（Character Entity）
- 5.span元素
- 6.div元素
- 7.img元素
- 8.常用图片格式
- 9.a元素
- 10.target
- 11.iframe元素
- 12.base元素
- 13.锚点链接
- 14.伪链接
- 15.图片链接
- 16.URL的格式
- 17.URL常见的协议
- 18.列表
- 19.有序列表 – ol、li
- 20.无序列表：ul、li
- 21.定义列表：dl、dt、dd
- 22.列表相关的CSS属性
- 23.表格常用元素
- 24.table常用元素
- 25.tr、th、td的常用属性
- 26.细线表格的实现
- 27.表格其他元素
- 28.表格CSS属性 - border-spacing
- 表格练习
- 29.表单常用元素
- 30.input的常用属性
- 31.布尔属性（boolean attributes）
- 32.按钮
- 33.按钮 - button元素
- 34.input和label
- 35.radio的使用注意
- 36.checkbox的使用注意
- 37.去除input的Tab键选中效果
- 38.textarea
- 39.select和option
- 40.fieldset和legend
- 41.form的常用属性
- 42.get和post
- 表单练习
- 42.marquee滚动标签
- 43. 结构标记
- 44. datalist元素
- 45. keygen元素
- 46. output元素
- 47. audio元素与video元素
总结

1.完整的HTML结构

文档声明：告诉浏览器当前页面是HTML5页面
html元素：HTML文档的根元素

①lang="en"告诉浏览器：这个HTML文档的语言是英文，所以Chrome浏览器的翻译提示如上图所示
②lang="zh"表示这个HTML文档的语言是中文

head元素：用于描述网页的各种信息

①title元素：网页的标题
②meta元素：用于设置网页的字符编码一般都使用,UTF-8编码，涵盖了世界上几乎所有的文字
③style元素：为 HTML 文档定义样式
④link元素：定义文档与外部资源的关系
⑤base元素：为页面上的所有链接规定默认地址或默认目标
⑥script元素：定义客户端脚本

body元素：网页的具体内容和结构

2.h、p、strong元素

表示网页的标题
h1~h6共规定了6个等级的标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>haha</h1><h2>haha</h2><h4>haha</h4><h5>hahaa</h5><h6>haha</h6>
</body>
</html>

p元素

表示文章中的一个段落（paragraph）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>lalllalala</p><p>hahahahhah</p>
</body>
</html><!-- p元素的演练段落与段落之间有空隙
-->

strong元素

用于强调某些文本，粗体的显示效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>lalalalalalalalla<strong>hello</strong>lalallalala</p>
</body>
</html>

3.code、br、hr元素

code元素

用于显示程序代码

br元素

单标签，表示强制换行

hr元素

分割线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {font-family: monospace;}.box{height: 5px;/* line-height: 5px; */background-color: red;width:300px;margin: 0 auto;}</style>
</head>
<body><!-- 1.code 显示等宽距离--><p>这是一段代码<code>function test()</code>代码结束</p><p>这是一段代码<span>function test()</span>代码结束</p><!-- 2.br -> break --><!-- 真实开发中用<div>代替<br> --><p>lalalla<br>hahahah<br>hihihih<br></p><p><div>lalallala</div><div>hahahahha</div><div>hihihihih</div></p><!-- 3.hr 分割线 --><!-- 真实开发中用<div>代替<hr> 注意：margin不等同--><hr color="red" width="300px" size="5px"><!-- 通过边框：border --><div class="box"></div>
</body>
</html>

4.字符实体（Character Entity）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p2{text-indent: 1em;}</style>
</head>
<body><!-- 1.空格 &nbsp; --><p>&nbsp;&nbsp;&nbsp;&nbsp; laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalalalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><p class="p2">laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalalalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><!-- 补充：pre可保留代码原有格式,但是样式会变，可用于特殊文段 --><p><pre>laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalalalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre></p><!-- 2.小于&lt; (less than)--><!-- 大于&gt; (great than)--><p>&lt;span&gt;</p>
</body>
</html>

5.span元素

默认情况下，跟普通文本几乎没差别
用于区分特殊文本和普通文本，比如用来显示一些关键字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text{color: red;}.new-price{color: red;font-size: 30px;}.old-price{color: grey;text-decoration: line-through;}</style>
</head>
<body><!-- 总结：span主要作用是对普通文本进行归类 -->我是一段文本<span class="text">我也是一段文本</span>zg<!-- 价格显示 --><!-- class起名一般用“-”链接 --><p><span class="new-price">￥69</span><span class="old-price">￥99</span></p>
</body>
</html>

6.div元素

一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{float: left;}.box2{float: right;}</style>
</head>
<body><div class="box1"><h2>hahahhah</h2><p>111111111</p></div><div class="box2"><h2>hehehehe</h2><p>222222222</p></div></body>
</html>

7.img元素

src属性（ src是source的缩写）用来设置图片的路径（URL）
绝对路径：完整的描述文件位置的路径
相对路径：由这个文件所在的文件夹引起的跟其它文件的
路径关系
代表当前文件夹（1个.），可以省略
代表上级文件夹（2个.）
对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \
img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
在HTML5规范中，alt是img元素的必要属性,当图片失效（加载失败）时显示的文本
width、height的默认单位是px，像素。（不常用）

8.常用图片格式

png：静态图片，支持透明
jpg：静态图片，不支持透明
gif：动态图片、静态图片，支持透明

9.a元素

href：指定要打开的URL
Hypertext Reference的简称
target：在哪里打开URL
_self(默认值)：自己
_blank:空白
使用相对路径

10.target

_self：默认值，在当前窗口打开URL
_blank：在一个新的窗口中打开URL
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
某个frame的name值：在某个frame中打开URL

11.iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
用于规定是否显示边框
1：显示
0：不显示

12.base元素

可以利用base元素设置当前页面所有a元素的默认行为
base元素写在head元素中

13.锚点链接

锚点链接可以实现：跳转到网页中的具体位置
点击go会定位到
id值为one的元素
name值为one的a元素
跳转到其他页面的特定位置

14.伪链接

伪链接：没有指明具体链接地址的链接
点击链接后具体要做什么事情，需要编写对应的JavaScript代码
可以把链接当作按钮来使用

15.图片链接

img元素跟a元素一起使用，可以实现图片链接

16.URL的格式

URL的基本格式 = protocol://hostname/path = 协议://主机地址/路径
协议：不同的协议，代表着不同的资源查找方式、资源传输方式
主机地址：存放资源的主机的IP地址（域名）
路径：资源在主机中的具体位置

17.URL常见的协议

http
超文本传输协议，访问的是远程的网络资源，格式是http://
http协议是在网络开发中最常用的协议
https协议相当于是http协议的安全版
file
访问的是本地计算机上的资源，格式是file://（不用加主机地址）
mailto
访问的是电子邮件地址，格式是mailto:
ftp
访问的是共享主机的文件资源，格式是ftp://
ed2k
通过支持ed2k（专用下载链接）协议的P2P软件访问该资源（代表软件：电驴），格式是ed2k://
thunder
通过支持thunder（专用下载链接）协议的P2P软件访问该资源（代表软件：迅雷），格式是thunder://

18.列表

HTML提供了3组常用的用来展示列表的元素
有序列表：ol、li
无序列表：ul、li
定义列表：dl、dt、dd

19.有序列表 – ol、li

ol（ordered list）
有序列表，直接子元素只能是li
li（list item）
列表中的每一项

20.无序列表：ul、li

ul（unordered list）
无序列表，直接子元素只能是li
li（list item）
列表中的每一项
li一定要是ul或者ol的直接子元素

21.定义列表：dl、dt、dd

dl（definition list）
定义列表，直接子元素只能是dt、dd
dt（definition term）
列表中每一项的项目名
dd（definition description）
列表中每一项的具体描述，是对 dt 的描述、解释、补充
一个dt后面一般紧跟着1个或者多个dd

22.列表相关的CSS属性

列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style
它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素
list-style-type：设置li元素前面标记的样式
list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值
list-style：是list-style-type、list-style-image、list-style-position的缩写属性
一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;

23.表格常用元素

table
表格
tr
表格中的行
td
行中的单元格

24.table常用元素

25.tr、th、td的常用属性

26.细线表格的实现

table { border-collapse: collapse; }
合并单元格的边框

27.表格其他元素

tbody 表格的主体
caption 表格的标题
thead 表格的表头
tfoot 表格的页脚
th 表格的表头单元格

28.表格CSS属性 - border-spacing

border-spacing用于设置单元格之间的水平、垂直间距，比如
2个值分别是cell之间的水平、垂直间距
如果只设置1个值（cellspacing），同时代表水平、垂直间距

表格练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border-collapse: collpase;margin: 0 auto;}td {border: 10px solid skyblue;padding: 20px;text-align: center;}</style>
</head>
<body><!-- column:列 --><!-- row:行 --><table><caption>标题</caption><thead><tr><th colspan="2">单元格1</th><!-- <th>单元格2</th> --><th>单元格3</th><th>单元格4</th><th>单元格5</th></tr></thead><tbody><tr><td>单元格1</td><td>单元格2</td><td rowspan="2">单元格3</td><td rowspan="2" colspan="2">单元格4</td><!-- <td>单元格5</td> --></tr><footer><tr><td>页脚1</td><td>页脚2</td><!-- <td>页脚3</td> --><!-- <td>页脚4</td> --><!-- <td>页脚5</td> --></tr></footer></tbody></body>
</html>

29.表单常用元素

form 表单
一般情况下，其他表单相关元素都是它的后代元素
input 单行文本输入框、单选框、复选框、按钮等元素
textarea 多行文本框
select、option 下拉选择框
button 按钮
label 表单元素的标题
fieldset 表单元素组
legend
fieldset的标题

30.input的常用属性

type：input的类型
text：文本输入框（明文输入）
password：文本输入框（密文输入）
radio：单选框
checkbox：复选框
button：按钮
reset：重置
submit：提交表单数据给服务器
file：文件上传
image：图像按钮
hidden：隐藏域
maxlength：允许输入的最大字数
placeholder：占位文字
readonly：只读
disabled：禁用
checked：默认被选中
只有当type为radio或checkbox时可用
autofocus：当页面加载时，自动聚焦
name：名字
在提交数据给服务器时，可用于区分数据类型
value：取值
form：设置所属的form元素（填写form元素的id）
一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器

31.布尔属性（boolean attributes）

布尔属性可以没有属性值，写上属性名就代表使用这个属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果要给布尔属性设值，值就是属性名本身

32.按钮

普通按钮（type=button）：使用value属性设置按钮文字
重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

33.按钮 - button元素

使用button元素也能实现按钮，功能效果跟input一样

34.input和label

label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input
input新类型：type属性

35.radio的使用注意

name值相同的radio才具备单选功能

36.checkbox的使用注意

属于同一种类型的checkbox，name值要保持一致

37.去除input的Tab键选中效果

或者将tabindex属性值设置为-1

38.textarea

textarea的常用属性
cols：列数
rows：行数
缩放的CSS设置
禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

39.select和option

option是select的子元素，一个option代表一个选项
select常用属性
multiple：可以多选
size：显示多少项
option常用属性
selected：默认被选中

40.fieldset和legend

41.form的常用属性

action
用于提交表单数据的请求URL
method
请求方法（get和post），默认是get
target
在什么地方打开URL（参考a元素的target）
enctype
规定了在向服务器发送表单数据之前如何对数据进行编码
取值有3种
application/x-www-form-urlencoded：默认的编码方式
multipart/form-data：文件上传时必须为这个值，并且method必须是post
text/plain：普通文本传输
accept-charset：规定表单提交时使用的字符编码

42.get和post

提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择
get
在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
post
发给服务器的参数全部放在请求体中
理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）

表单练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* CSS reset */body {margin: 0;padding: 0;}fieldset {width: 400px;}ul {list-style: none;}/* none / 水平：horizontal / 垂直：vertical / both(默认)*/textarea {resize: none;}/* 取消聚焦时默认的outline */input,textarea {outline: none;}input:focus,textarea:focus {border-color: #4791ff;border-style: solid;}</style>
</head>
<body><form action="http//www.baidu.com" method="POST" enctype="multipart/form-data"><fieldset><legend>必填信息</legend><!-- 1.手机输入框 --><div><label for="phone">手机:</label><!-- maxlength：允许输入的最大字数placeholder：占位文字readonly:只读值disabled：禁用checked：默认选中（radio和checkbox）autofocus：当页面加载时，自动聚焦--><input type="text" maxlength="11" placeholder="请输入你的收集号码"readonlyautofocusname="phone"id="phone"></div><!-- 2.密码输入 --><div><label for="pwd">密码:</label><input type="password" name="password"id="pwd"></div><!-- 3.验证码输入框 --><div><label for="validate">验证码:</label><input type="text" id="validate" name="code"><!-- 1 按钮实现1 --><!-- <button>获取验证码</button> --><!-- 2 按钮实现2(推荐)--><input type="button" value="获取验证码"></div></fieldset><fieldset><legend>选填信息</legend><!-- 4.照片选择 --><div><label for="photo">照片:</label><input type="file" id="photo" name="photo"></div><!-- 5.性别选择 --><div><span>性别:</span><!-- name作用 --><!-- 1.name一样实现该互斥 --><!-- 2.表单提交(有name才提交) --><label for="male">男</label><input type="radio" name="sex" id="male" value="male"><label for="female">女</label><input type="radio" name="sex" id="female" value="female"></div><!-- 6.爱好选择 --><div><span>爱好:</span;><label for="sing">唱歌</label><input type="checkbox" name="hobies" id="sing" value="sing"><label for="dance">跳舞</label><input type="checkbox" name="hobies" id="dance" value="dance"><label for="rap">rap</label><input type="checkbox" name="hobies" id="rap" value="rap"><label for="basketball">篮球</label><input type="checkbox" name="hobies" id="basketball" value="basketball"></div><!-- 7.学历选择 --><div><span>学历:</span><select name="education" id="" multiple size="2"><option value="0">小学</option><option value="1" selected>初中</option><option value="2">高中</option></select></div><!-- 8.简介 --><div><label for="interduce">简介:</label><textarea name="interduce" id="" cols="30" rows="10" id="interduce"></textarea></div></fieldset><!-- 9.重置按钮 --><!-- 前提1.type必须是reset类型（value值可以不写，默认文字是"重置"） --><!-- 前提2.所有的内容都必须在同一个表单中（form） --><!-- <input type="button" value="重置"> --><input type="reset"><!-- 10.提交 --><input type="submit"></form></body>
</html>

42.marquee滚动标签

width 和height：指定滚动对象宽度和高度
bgcolor：背景颜色；
direction：方向，默认向左；
scrollamount：速度，0不动

43. 结构标记

44. datalist元素

option一定要有value值
datalist与select比较：
select下拉菜单中的选项，用户只能选择但不能自己添加。
datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

45. keygen元素

46. output元素

47. audio元素与video元素

audio元素专门用来播放网络上的音频数据。
viedo元素专门用来播放网络上的视频或电影。
使用这两个元素，不需要使用其他任何插件。

总结

小辈只是个没有感情的搬运工…

html知识点复习整理相关推荐

基于《java2实用教程》的java知识点复习整理【第一章——java入门】
第一章--java入门一.知识结构框架二.知识点详解 1.java特点:编写一次,随处运行简单 Java要比C++简单,C++中许多容易混淆的概念,被Java弃之不用了,或者以一种更清楚更容易理 ...
Scala中的函数式编程与面向对象编程知识点复习整理（二）——面向对象编程
面向对象基础概述 Scala是一门完全面向对象的语言,摒弃了Java中很多不是面向对象的语法,虽然如此,但其面向对象思想和Java的面向对象思想还是一致的. package 在java中作 ...
高中计算机会考理论知识点总结,高中信息技术高一会考总复习理论知识点汇总整理.doc...
高中信息技术高一会考总复习理论知识点汇总整理信息技术会考总复习理论知识点一.信息.信息的载体及信息的特征 1.信息:信息是指数据(Data).信号.消息中所包含的意义.(要会判断什么是信息) 2. ...
网络安全学科复习知识点个人整理
学习目标:临近期末,特此对课内网络安全相关知识点进行整理,也为日后回顾知识点方便阅览. 参考书目:<网络安全技术及应用(第3版)>立体化教材注明: 1.知识点来源于教材,该重点为个人向整 ...
矢量合成和分解的法则_高考复习整理力的合成和分解
一.合力与分力如果一个力产生的效果和其他几个力产生的效果相同,这个力就叫那几个力的合力,那几个力就叫这个力的分力. 二.力的合成:求几个力的合力叫做力的合成. 1. 平行四边形定则:力的合成的本质就 ...
4十4十4写成乘法算式_小学数学二年级下册数学1-4单元知识点复习提前准备才能考的更好...
期中考试快到了,小学数学二年级下册1-4单元知识点复习,为考试做准备! 第一单元数据收集与整理 1. 收集数据的方法: (1) 民意调查:如投票选举. (2) 实地调查:如现场观察,收集,统计数据. ...
数据结构期末考试复习整理
写在前面: 本博客基于学校提供的教材书<数据结构--Java语言描述(第2版)>编写.原意是用于学校期末考的复习整理,也希望能对大家有所帮助! 此次整理是针对学校给出的考点,而不是针对数据 ...
河海大学数据库知识点归纳整理
河海大学数据库知识点归纳整理前言该文档主要包含了对河海大学数据库这一门课程进行的知识点归纳,并且提供了ppt等其他复习资料. 河海大学许卓明老师数据库期末考点! 1 CH01 CH02 数据模型与 ...
三年级下册期中计算机知识点,部编三年级语文下册期中知识点复习
文件大小: 资料格式: 下载:284次资料等级: 所需点数:0 课件类型:/word 注册本站会员,享受高速下载,立即注册会员部编三年级语文下册期中知识点复习部分内容预览第一单元知 ...

html知识点复习整理