html5文字与页面边距,html基础知识

html:hyperText markup language 超文本标记语言

点击链接后退页面:

回到上一个网页

1.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。

2.必须位于HTML文档的第一行。

3.标签:用于方便浏览器解析或搜索引擎搜索，一般放置于

中，用"名称/值"方式:

(1)表示文档内容类型，字符串编码信息，如:

(2)为搜索引擎定义关键词:

(3)为网页定义描述内容:

(4)定义网页作者

(5)每30秒中刷新当前页面

4.字体样式标签： 字体变粗， 字体倾斜

5.注释

6.特殊符号:

空格

大于号>

小于号<

引号"

版权符号©

图片格式:JPG,GIF,PNG,BMP

7.图片标签，必须要有src和alt属性

8.超链接标签(target指定在那个窗口打开，_self自身窗口，_blank新建窗口)

附连接的文本或图像

9.链接地址

(1)绝对路径(指向目标地址的完整描述，多指向本站点外的文件，如百度)

(2)相对路径(一般指向本站点内的文件，如登陆)

(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录

10.超链接的应用场合

(1)页面链接:如为你跳转到登录页

(2)锚链接:

先在目标位置B设置标记如:这里是目标位置

然后在A位置设置超链接路径href属性值为"#标记名"如:当前位置

(3)功能性链接:单击时启动本机自带的应用程序如QQ,电子邮件等，如电子邮件链接:"mailto:电子邮件地址"

11.元素分类

(1)块元素:如

无论内容有多少，该元素都独占一行(一块)。

块元素特点:如果没有设置自身宽度，则显示为父容器的100%。

(2)行内元素:如显示宽度由自己的内容决定，其他元素可以排在它后面。

12.元素类型转换

(1)块状元素转换为内联元素:display:inline;

(2)内联元素转换为块状元素:display:block;

(3)把元素设为内联块状元素:display:inline-block;

13.元素的特点:

块状元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行.

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

内联元素特点:

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变.

内联块状元素(同时具备块状元素和内联元素的特点)：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

14.常见的元素:

常用的块状元素有:(block)

、

、

...

、

1. 、

• 、

、

、

常用的内联元素有:(inline)

、、

、、、、、、、、

常用的内联块状元素有:(inline-block)

,

15.三种列表:

(1)有序列表

1. (2)无序列表

   • ,ul中只能嵌套li，而li可以嵌套任意标签

     (3)定义列表

     ,是标题及列表项的结合。

     16.表格基本结构:单元格，行，列

     (1)

     	(2)HTML5中已经废除table的border属性，用css控制边框宽度。 (3)跨列(横跨)：	内容

     跨行(竖跨)：

     内容

     (4)表格特点:同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

     17.视频元素:

     (1)controls属性是否显示播放暂停和音量控制，autoplay属性自动播放，loop属性循环播放。

     你的浏览器不支持video标签

     (2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式:

     你的浏览器不支持video标签

     18.音频元素:使用语法和视频元素一样，只要把video换成audio即可。

     19.HTML5的结构元素(先划分结构再写内容)

     head(头部)，footer(脚部),

     section(独立区域),article(独立文章内容),

     aside(相关内容或应用，常用于侧边栏),nav(导航类辅助内容)

     20.框架：方便在页面中引用站外的页面内容。

     21.和锚链接的结合：使锚链接的内容在iframe框架中打开

     点击在框架中打开

     22.表单标签form

     表单内容

     (1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。

     (2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。

     (3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。

     23.表单元素:

     (1)表单元素标签属性:

     type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、

     maxlength(可输入的最大字符数)、checked(按钮被选中)

     (2)列表框标签：

     中至少包含一个。在有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。

     (3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如

     (4)多行文本域：不能用value属性赋初始值

     自我评价

     (5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等

     (6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值

     (7)search搜索框:在任意页面中用于输入搜索关键词的文本框

     (8)文件域：多用于文件上传

     (9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。

     (10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。

     (11)表单元素 只读属性readonly、禁用disabled

     (12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。

     (13)表单元素的标注label：当鼠标单击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。

     女

     24.HTML5表单新标签

     供用户输入的表单

     输入域

     文本域 (多行输入)

     定义 元素的标签，一般为输入标题

     定义一组相关的表单元素，并使用外框包含起来

     定义

     元素的标题

     下拉选项列表

     选项组

     下拉列表中的选项

     点击按钮

     指定一个预先定义的输入控件选项列表

     定义了表单的密钥对生成器字段

     计算结果

     25.表单验证

     (1)好处：减轻服务器的压力；保证数据的可行性和安全性。

     (2)placeholder:为文本框提示用户输入

     (3)required：规定文本框不能为空

     (4)pattern：输入的内容必须符合正则表达式自定义的规则

     规定以13、15开头的11位数字

     26.utf-8和utf8的使用，只有mysql可以用“utf8”,但其他地方一律使用大写"UTF-8"

     网页推荐使用长后缀名.html

     有的浏览器中直接输出中文会出现中文乱码，可加声明

     &nbsp //空格

     &gt //大于号

     &lt //小于号

     &quot //双引号

     &copy //版本符号

     斜体

     

     页面间链接

     锚链接

     功能性链接

     27.表格类

     1、

     标记结束，table在没有添加css样式之前，在浏览器中显示是没有表格线的。

     2、

     ：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，

     不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。)

     3、

     ：表格的一行，所以有几对tr 表格就有几行。

     4、

     ：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。

     5、

     ：表格的一个单元格，一行中包含几对这行中就有几个单元格。

     6、表格中列的个数，取决于一行中数据单元格的个数。

     7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。

     表格可以添加标题和摘要标签进行优化。

     (1)摘要：

     摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

     语法：

     (2)标题：

     描述表格内容，标题的显示位置：表格上方。

     语法：

     标题文本

     …

     28.

     内联框架iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否出现滚动条" noresize="noresize"更改页面大小

     配合标签的targer属性及标签的name属性，可实现窗口间的关联

     29.表单

     文件域，ps：需要在表单中写入enctype="multipart/form=data" 属性

     隐藏域：type="hidden"

     只读：readonly="readonly"

     禁用：disabled="disabled"

     //password 密码

     //radio单选按钮

     男

     女

     checkbox多选按钮

     30.下拉列表

     1

     31.文本域textarea

     标签可以链接Email地址，使用mailto能发送电子邮件。

     如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

     mailto写法：

     33.文本格式化标签：

     文本加粗

     文本加粗(加重语气)

     斜体字

     斜体(强调文字)

     字体放大

     字体缩小

     定义下标字

     定义上标字

     插入字(字体下划线)

     字体删除线

     "计算机输出" 标签：

     定义计算机代码

     键盘输入

     定义计算机代码样本

     定义变量

      预格式化文本(会保留文本的多个空格)

     引文、引用、及标签定义：

     缩写

     地址联系信息

     文字方向(设置dir="rtl"为从右到左显示)

     长文本引用(不会自带双引号，但会两边自动缩进)

     短句引用语(自带双引号)

     定义引用、引证

     定义一个定义项目。