一、简介:
HTML 全拼 Hyper Text Markup Language,指的是超文本标记语言。标签是由尖括号包围的关键词,如<html>,</html>,他们成对出现,分别称 为开始标签与结束标签,不同的标签代表不同的含义。
Web
浏览器在读取
HTML
文件
时,浏览器使用标 签来解释页面的内容,最终显示出我们所熟知的网页。
二、HTML整体标签结构
DOCTYPE
全拼
Document Type
明确说明当前文档为
HTML 文档类型。浏览器根据你 DOCTYPE 定义的 DTD(文档类型定义)来解释页面代码。
HTML
限定文档开始点与结束点,在他们之间是文档的头部和主体,即
head
与
body
HEAD
头部定义文档的头部,是所有头部元素的容器,在其中
可以指示引用脚本 (JavaScript
)、样式表(
CSS
)、提供元信息等等。 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web
中的位置以及 和其他文档的关系等。绝大多数文档头部包含的数据都不会作为内容显示到浏览器。
Head
中可用标签如下:
<base>, <link>, <meta>, <script>, <style>,
<title>
1、base
为页面上的所有链接规定默认地址(
href
)或默认目标(
target
)
图片的访问地址
2、meta
提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
GB2312 国标码
UTF-8万国码,国际通用编码
乱码:编解码不一致,导致乱码发生
3、
style
设置文档中引用的
css
样式。
4、
script
设置文档中使用的
JavaScript
脚本。
5、
link
通过地址应用外部的样式或脚本文件。
6、title
文档标题
三、常用标签
1、 标题 h1-h6
(每个标题标签对应一行,并且上下有距离 )
2、 段落 P(一个 P 标签对应一行,并且上下都存在着间距 )
3、 超链接或锚 a
从一张页面链接到另一张页面或在当前在当前页面从一个链接跳到相应的锚点(Href
规定链接指向的地址的
URL
,此处为相对地址 )
链接跳转:
_self
,在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定
_blank
新浏览器窗口中打开链接文件
_top
,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架
_parent
,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链
接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象
_self
参数一
样。
4
、 行内标签
span
用来组合文档中的行内元素
span
,没有固定的格式表现。当对它应用样式时,它才会产
生视觉上的变化
font-family
表示字体,
font-size
表示字体大小,
2em
为默认字体大小的
2
倍。
5
、 下标
sub
高度的一半
6、 上标 sup
7
、 图片
img
向网页中嵌入一幅图像,可以使本地的,也可以是网络的
Src
规定显示图像的
URL
alt
规定图像的替代文本即图片显示不出来时的文本信息(如图片地址错误)
width
设置图片的宽度
height
设置图片的显示高度
8
、 格式化文本
pre
被包围在
pre
元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
标签的一个常见应用就是用来表示计算机的源代码。
在 pre 中的内容按照文档中的格式显示,其中<为<,>为>," 为”,并且在其中可以使用 a 或 img 标签等。
9、 文本滚动(跑马灯)marquee
Behavior 滚动的方式,alternate 文本来回滚动,scroll 屏幕上开始从右边滚动出来再从左
边滚动出去,如此重复,slide 屏幕上没有,从右边滚动出来再从左边滚动出去
Bgcolor 设置背景颜色,三种设置颜色的方式均可
Direction,down 文本从上相下开始,left 从邮箱做开始,right 从左向右开始,up 从下向
上开始
另外还可以设置宽度 width,高度 height 属性,设置 loop 表示滚动的次数,默认为-1 表
示一直滚动下去,scrollamount 活动字幕的滚动速度,单位 pixels(像素),scrolldelay 活
动字幕滚动两次之间的延迟时间,单位 millisecond(毫秒),通常会和鼠标的移入移除事
件结合一起使用。
10
、
无序列表
ul li
11
、
有序列表 ol li(li 定义列表项目 )
Type
可以取值
1
,
A
,
a
,
I
,
i
,还可以同过
start
设置序号的起始值(对数值数据才有效),
h5
中可以通过
reverse
属性设置顺序为降序
12
、
自定义列表
dl dt dd
Dl
定义列表
Dt
列表中的项目
Dd
描述列表中的项目
13
、
划分图层
Div
全称
division
把文档分割为独立的、不同的部分。如果用
id
或
class
来标记
<div>
添加额外的样式,
那么该标签的作用会变得更加有效。
<div>
是一个块级元素,也就是说,浏览器通常会
在
div
元素前后放置一个换行符。
四、 表格
表格由
<table>
标签来定义。每个表格均有若干行(由
<tr>
标签定义),每行被分割
为若干单元格(由
<td>
标签定义)。在
td
中填写数据(
table data
),即表格的内容。
其中数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格(使用相应
的标签就好)等等。
只需要在 table 标签里面加上 border="1",便可为表格加上边框,数字表示边框的宽度
pixels(像素)
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定
义表格行,th 元素定义表头,td 元素定义表格单元。
其中还有一些属性,如 cellpadding 固定单元格语气内容之间的空白(%值,像素值,
两种取值方式一个是包含元素的百分比,一个是具体的像素值),cellspacing 规定单元
格之间的空白(%值,像素值),width 规定表格的宽度,非单元格的宽度(%值,像素
值),frame 规定外侧哪个部分是可见的,rules 规定内侧哪个部分是可见的
五、 表单
表单使用 form 标签,其中可以设置多个属性值,如 action 表示表单提交
后链接到什么地方(url),method 提交方式,分为 get 与 post 两种,当为
get 时,要提交的表单数据作为参数会拼在 action 对应地址的后面,当为 post
时,提交内容不会拼在 url 地址后面,安全性更高。Accept-charset 规定在被
提交表单中使用的字符集(默认:页面字符集),enctype 规定被提交数据的编码(默认:
url-encoded),name 规定识别表单的名称,novalidate 规定浏览器不验证表单,target 规定
action 属性中地址的目标(默认:_self)。常用的属性有 action 与 method,其他根据需求
而定。
介绍了 form 之后,我们来说一下 form 表单内部所写的的 input 标签,如上所示,input
标签可以作为简单的文本输入框,密码输入框(输入内容显示为点符号),复选框,登录按
钮。其所依据的便是 input 标签的 type 属性。
Text
表示文本输入,
password
密码方式,
hidden
隐藏域在页面中对用户是不可见得,
radio
单选按钮,
checkbox
复选按钮,
file
文件, image 图片,
reset
重置按钮,点击时会将页面所填写内容重置为初始装填,
submit
点 击直接提交表单,执行 action
跳转,
button
点击不会提交表单,可以通过
onclick
事件 执行脚本实现提交的目的。 Input 除了
type
属性外,还有
name
属性,表示当前标签所对应的名字,在提交后作为 发送到服务器的参数名。单选按钮与复选按钮的 name
属性需要注意,他们是一致的, value 规定
input
元素的值,
checked
表示首次加载时应当被选中,如示例中的
radio
, 另外还有 disabled
,表示禁止使用这个元素,
readonly
表示不能对其修改。