HTML

来源：互联网发布：家庭网络组建编辑：程序博客网时间：2024/06/05 17:13

一、HTML基本概念

HTML：Hyper Text Markup Language 超文本标记语言

Html文件是以.html或者.htm结尾的文件

二、HTML文档结构

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

</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>标签的作用有很多，目前我认为常用的就作用就是定义编码格式

UTF-8 编码是一种被广泛应用的编码，这种编码致力于把全球的语言纳入一个统一的编码

3、<link/> 引入外部css文件

4、<script></script> 可以定义JavaScript也可以引入JavaScript文件

如果是定义的话，直接在 <script>标签中写定义文件即可，引入外部js文件格式如下所示：

（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：跟后台处理程序的地址（）—服务器端工程师提供，默认提交给本页

0 0