一、HTML基本概念
HTML:Hyper Text Markup Language 超文本标记语言
Html文件是以.html或者.htm结尾的文件
二、HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> new document </title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="JS/login.js"></script>
</head>
<body>
</body>
</html>
就以上面这个结构作为示范,来讲解
1、文档类型声明
<!DOCTYPE html>用来说明你用的XHTML或者HTML是什么版本,出现在整个 html最顶层
2、html页面
位置:<!DOCTYPE html>之下
数量:有且只有一个
标签:<html></html>
备注:html所有内容都必须在这个标签之内
html页面包含两大部分:
(1)、网页头部
负责定义网页的全局信息
标签:<head></head>
网页头部允许包含以下内容:
1、<title> </title> : 网页标题,title就是说这个网页是干什么的,以方便用户能快速准确得了解到这个网页要介绍的内容。
例如:浏览器中收藏夹内书签的名称是title的内容;
2、<meta/>定义页面元数据(编码)
<meta charset="utf-8">
网上搜索了<meta>标签的作用有很多,目前我认为常用的就作用就是定义编码格式
UTF-8 编码是一种被广泛应用的编码,这种编码致力于把全球的语言纳入一个统一的编码
3、<link/> 引入外部css文件
<link rel="stylesheet" type="text/css" href="css/layout.css" />
4、<script></script> 可以定义JavaScript也可以引入JavaScript文件
如果是定义的话,直接在 <script>标签中写定义文件即可,引入外部js文件格式如下所示:
<script type="text/javascript" src="JS/login.js"></script>
(2)、网页主体
标签:<body></body>
作用:定义网页的主体,所有的显示内容都要放在body中
三、HTML常用标签
块属性标签(块元素)
<div></div>可以把文档分割为独立的、不同的部分
<h1></h1>…<h6></h6>可定义标题。<h1>定义最大的标题,<h6>定义最小的标题
<ol></ol>定义有序列表,必须嵌套<li>
<ul></ul>定义无序列表,必须嵌套<li>
<li></li>定义列表项目,是有序列表和无序列表的子标签
<dl></dl>定义自定义列表
<dt></dt>一般用于定义列表标题
<dd></dd>定义自定义列表内容
<p></p>定义段落
<br/>换行符
<from></from>用于为用户输入创建HTML表单
表格:
<table></table>定义表格
<caption></caption>表格标题
出现的位置在表格之上,水平居中
注意两点:
1、caption的位置位于所有tr之上,紧跟着table之下
2、一个table只能有一个caption
<tr></tr>定义表格行
<th></th>定义表头
<td></td>定义表格单元
table属性
width:宽度
height:高度
align:表格在其容器内的水平对齐方式,默认为:left,可选值还有center、right
border:边框,边框宽度,以px为单位的数值
bgcolor:表格的背景颜色
cellspacing=”像素值”
外边距(单元格之间距离,单元格和外边框的距离)
Cellpadding=”像素值”
单元格中内容和单元格边框的距离
tr属性:
align:当前行数据的水平对齐方式
valign:当前行数据的垂直对齐方式(top middle bottom)
td属性:
widht
height
align
valign
bgcolor
在创建不规则的表格时,需要设置td的跨行和跨列属性
跨行:rowspan=”n”表示该单元格垮了n行
跨列:colspan=”n”表示该单元格垮了n列
注意:被合并掉的单元格,一定要从代码中删除。
行分组:
可以将tr划分为3大部分:表头、表主体、表尾
<thead></thead>表头
<tbody></tbody>表主体
<tfoot></tfoot>表尾
表格嵌套:
在单元格中放置另一个表格
在<td>中再包含一个<table> 切记在<tr>中不行
列表:
(1)有序列表 <ol></ol>
属性:type
列表项前面的标识类型是什么
取值:
1:数字(默认就为数字)
a:小写字母
A:大写字母
i:小写罗马数字
l:大写罗马数字(是i的大写,不是L的小写哦)
Start:规定在type值中的第几个位置处开始
示例如下:
执行结果:
(2)无序列表 <ul></ul>
属性:type
列表项标识类型:
取值:
clisc: 实心圆(默认值)
circle: 空心圆
square: 实心矩形
none: 无点
(3).定义 自定义列表
<dl></dl>定义自定义列表
<dt></dt>一般用于定义列表标题
<dd></dd>定义自定义列表内容
格式
<dl>
<dt>描述的术语或者名词</dt>
(一个dt后面可以跟多个dd标签)
<dd>对上述名词或术语的解释</dd>
</dl>
使用场合:图文混排
示例:
执行结果:
行内属性标签(内联元素)
<span></span>被用来组合文档中的行内元素
<var></var>定义变量,在浏览器中一般会斜体显示
<em></em>把文本定义为强调内容,浏览器一般以斜体显示
<a></a>锚文本,最重要的属性是href,指定连接的目标
<img/>是单标签,链接图片,有src和alt属性
<textarea></textarea>定义多行文本输入控件,可通过cols和rows属性来规定textarea的尺寸,y也可以用css的
width和height属性来控制。
<select></select>可创建单选或多选菜单 ,子标签是select
<option></option>定义下拉列表中的一个选项,位于select元素内部
<input>用于搜集用户信息。根据不同的tpye属性值,输入字段拥有很多种形式。输入字段可以是文本字段text,复选框 checkbox,掩码后的文本控件,单选按钮radio,按钮button,submit提交,重置reset,空白hidden等等
<strong></strong>把文本定义为更强的强调的内容
块属性标签特点:
标签默认撑满整行,总是在新的一行开始;
高度、行高以及顶底边距都可控制;
未设定宽度时,宽度为容器的100%;
行内属性标签特点
行内属性标签可在一行显示;
宽高即顶底边距不可控制;
内容撑开宽高;
结构标记:
作用:为了提升标记的语义性
<1>.<header></header>
作用:用于定义文档的页眉,就是html文档最上面的内容
等同于:<div id=”header”></div>
<2>.<nav></nav>
作用:用来定义页面的导航链接部分
等同于:<div id=”nav”></div>
<3>.<section></sction>
作用:表示整个页面中的主题内容
等同于:<div id=”main”></div>
<4>.<article></article>
作用:用于描述文本性较强、或艺术气息较强的
一般情况下,论坛中的帖子信息,报纸中的文章信息,博客或微博中的条目信息,用户回复信息,优先考虑放在<article>标签中
<5>.<footer></footer>
作用:定义页面中位置靠下的信息
<6>.<aside></aside>
作用:多数情况下用于定义页面中的侧栏信息
表单:
表单的作用:用于显示并将信息提交给服务器
表单中主要包含两组内容:
(1).表单元素
(2).标点控件
表单元素<form>
注意:使用表单元素提交数据时,表单不能省略。
属性:
(1).action:跟后台处理程序的地址()—服务器端工程师提供,默认提交给本页