html5重置和提交,html5基础

HTML

HTML概述

1.HTML(HyperTEXT MarkUp Language)

"超文本标记语言"，它是制作网页的标准语言 HTML不区分大小写

2.标签

由尖括号包围，比如

, 通常成对出现如 不能交叉嵌套 并且要注意缩进 如： 外层：父元素 内层为同级

一个标签可以有多个属性，且与属性先后顺序无关

HTML文件结构

文件结构为：.htm .html 文件 头部：浏览器，搜索引擎所需信息

HTML5文件结构 文档类型：符合HTML5标准

lang属性：en英文zh中文

:元数据 用于指定关于HTML文档的信息 chraset属性：字符集编码方式 浏览器：UTF-8 是国际编码

字符集与编码

ASCII 数字，英文字母，符号进行了编码

GB2312 简体中文

Unicode 所有语言

UTF-8 所有语言，占用空间更小

乱码问题源文件保存时的编码方式

源文件声明

不一致时就会出现乱码

HTML标签(1)

标题h1~h6

即分级标题，一个页面建议只有一个h1

一级标题 heading 1

一级标题 heading 2

一级标题 heading 3

一级标题 heading 4

一级标题 heading 5

一级标题 heading 6

这集里正文文字

段落p

段落内容

由于对html源文件会自动去掉空格空行，对于源代码连续多个空格空行只生成1个空格空行

空行解决方式

段内换行br

单独出现的标签，直接结束

这是段落。
换行，多个则为空行。

空格解决方式

空格字符 &nbsp；

&nbsp；

特殊字符 全小写

使用该字符为增加空格的方法

连续三个空格&nbsp；&nbsp；&nbsp；

更简单解决方式

预留格式pre

定义预格式化的文本，文本总的空格和换行符会被保留

pre标签很适合显示计算机代码

内容格式不会变，空格空行会保留

行内组合span

组合行内元素，以便通过CSS样式 来格式化 需要单独标记出来的信息所用html部分

将需要特殊标识出来的文字放在该标签内

在学到CSS利用代码对该标签进行设置如：

color:blue;(蓝色)

font-weight:bold;(加粗)

}

水平线hr

---

单独出现

添加水平线来分割网页的不同部分

---

单独出现 默认网页左端到右端 在需要添加的位置直接书写该标签即可

注释

语义化

为规范使用

斜体标签

此部分文本显示为斜体

粗体标签

此部分文本显示加粗

HTML标签(2)

超链接

文字或图片

此标签成对出现

链接到本站点其他网页

新闻 即单击到新闻页面

链接到其他站点

百度 即单击百度 要带上协议部分的名字 跳转百度

虚拟超链接

板块2 不知道跳转到哪个页面当鼠标停留在链接的文字或图片上时，依然会出现超链接的效果 比如光标变小，但不会单机链接到任何位置。如部分代码需要其他html文件配套

Document

首页

导航

新闻

科技

问问百度

HTML标签(3)

img标签

常见图像格式

1.JPG：有损压缩，色彩丰富图片。

2.GIF:简单动画，背景透明。

3.PEN:无损压缩、透明、交错、动画。

插入图像

比如有以下两个文件 要在index.htm中添加logo.gif

绝对路径：以根目录为基准

C:/site/index.htm

C:/site/logo.gif

相对路径：以该文档所在的位置为基准

图片直接在站点文件夹内

图片在站点文件夹内images文件夹

图片在站点文件夹内 网页在站点文件夹内的文件夹两个点表示上一级文件夹

图片和网页分别在站点文件夹子文件夹内

HTML标签(4)

区域：div

成对出现，确定一个单独的区域，如页面的一个组成部分，一个栏目板块

align属性：表示对齐

web 前端开发

HTML

CSS

JavaScript

列表

无序列表 ul li

无序列表

成对出现

web 前端开发

• HTML
• CSS
• JS

有序列表 ol li

有序列表

列表项成对出现 出现序号

web 前端开发

1. HTML
2. CSS
3. JS

表格

table tr td

表示要绘制表格 表示行数 表示单元格(列)下列代码表示两行三列的表格

此处填写内容	此处填写内容	此处填写内容
此处填写内容	此处填写内容	此处填写内容

下面表是2*3有边框表格

此处填写内容	此处填写内容	此处填写内容
此处填写内容	此处填写内容	此处填写内容

table tr th

表示要绘制表格 表示行数 表示表头单元格tablehead 加粗显示下面代码表示4*3且第一行为表头单元格的表格

内容	内容	内容
内容	内容	内容
内容	内容	内容
内容	内容	内容

dl，dt，dd

自定义列表dl，列表项dt，描述dd

列表项

描述

列表项

描述

HTML标签(5)

表单：是一个区域，采集用户信息

表单元素：文本框，按钮，单选，复选，下拉列表，文本域

表单form标签

成对出现 action属性：表示收集来的数据交由那个页面处理

表单元素

文本框，密码框input----text password

type属性：

文本框:type="text"

密码框:type="password"例子：

账户：

密码：

：

PS:通常不会自动换行所以要添加标签，

name属性代表名字是什么，当表单元素数据需要交给后端处理，后端处理数据就要知道数据来源于哪个表单元素，通过name属性读取到是哪个表单元素的数据。

提交重置按钮input----submit

按钮：提交按钮 重置按钮

提交按钮需要将type属性设置为submit

重置按钮需要将tpye属性设置为reset

value属性：用来规定表面文字是什么例子

姓名：

例子

爱好：

单选框 复选框input----radio checkbox

单选框需要将type属性设置为radio：只能选择一项

复选框需要将type属性设置为checkbox：任意选择多项

name属性：当前这一项它的名称叫什么

checked属性：表示是否被默认选择当为checked为默认选择

value属性：表示要提交给后端的数据格式

value="值" name="名称" checked="checked"/>

例子:男 音乐被默认选择

性别：

男

女

爱好：

音乐

体育

阅读

下拉列表框select option

标签对表示一个下拉列表框

标签对表示列表项

option标签有一个selected属性：当selected="selected"表示是否默认被选例子:旅游被默认选择

爱好：

看书

旅游

运动

购物

文本域Textarea

成对出现 表示出现一块大段的文本输入区域

rows属性表示行数

cols属性表示列数

文本例子

个人简介：