HTML基本知识梳理

来源：互联网发布：炫浪网络在线阅读手机编辑：程序博客网时间：2024/05/16 13:57

HTML<!DOCTYPE>声明标签

定义和用法：

<！DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前

<！DOCTYPE>声明不是HTML标签，它指示web浏览器关于页面使用哪个HTML版本进行

编写的指令。

在HTML4.01中，<！DOCTYPE>声明引用DTD，因为HTML4.01基于SGML。

DTD规定了标记语言的规则，这样浏览才能正确地呈现内容。

HTML5不基于SGML，所以不需要应用DTD。

各版本的声明：

HTML5：

<!DOCTYPE html>

<meta charset="utf-8">

HTML4.01：

HTML的基本架构

<html> 内容 </html> 

解释：HTML文档的文档标记，也称为HTML开始标记

功能： 这对标记分别位于网页的最前段和在最后端

<html>在最前端表示网页的开始 </html>在最后端表示网页的结束

<head> 内容 <head>

解释：HTML文件头标记，也称为HTML头信息开始标记

功能：用来包含文件的基本信息，比如网页的标题、关键字、在<head></head>内可以放

<title></title> <meta></meta> <style></style>等等标记

注意：在<head></head>标记内的内容不会在浏览器中显示

<title> 内容 </title>

解释: HTML文件标题标记

功能: 网页的”主题“，显示在浏览器的窗口的左上角的标签上

注意: 网页的标记不能太长，要短小精悍，能具体反应页面的内容，<title> </title>标记中不

能包含其他标记

<body> 内容 </body>

解释: HTML文档的主体标记

功能: <body>........ </body>是网页的主体部分，在此标记之间可以包含如<p></p>(显示段

落)，<h1>一级标题共六级</h1>、<br>换行</br>等等标记，正是由这些内容组成了

我们所看见的网页主体。

body标记常见的属性：

1、bgcolor 设置背景颜色 <body bgcolor = "red"> </body>

2、text 设置文本颜色 <body text = "green"> </body>

3、link 设置链接颜色 <body link = "yellow"> </body>

4、vlink 已经访问了的链接颜色 <body vlink = "gray"> </body>

5、alink 正在被点击的链接颜色 <body alink = "red"> </body> 

<meta> 内容 </meta>

解释: 页面的元信息 （meta-information）

功能: 提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

必须的属性: content 值：some_text 定义name属性相关的元信息

常见的属性: 常用的name属性

1、author 2、keywords 3、description 4、other

把content属性关联到一个名称，比如描绘出网页的关键字<meta name =

"keywords" content = "mjcc">

注意: meta标记必须放在head元素里面

eg：

<!DOCTYPE html> 这里说明是我们使用的是html5

<html> 

一个html标记，尖括号中间的内容不会被显示，有一个开始和结束

中间才是HTML的页面

<head>

<title> 这是抬头</title>

这是一个html源代码文件的头，是放一些配置的，告诉这个页面会显示一些特殊的东西

<meta charset = utf-8> 这里是告诉浏览器我用的是什么编码格式

</head>

<body>

<hgroup>

这个事来搞我们的一个结构的

<h1> 这是一个一级标题， 可以有6级， 并且在标题前后的文字都会被分割成远离它的一行，这个是他自己的属性<\h1>

<h2>这是一个二级标题</h2>

</hgroup>

<p>

这才是用来显示的正文的,但是显示在这里的文字是没有段落的，并且会随着页面的大小自动的换行。所以需要有一些表示段落的一些标记来终结这样的情况， this is an apple， But I love banana, It is a<wbr> beatiful</wbr> thing, 这个标签是表示这个单词是可以进行分开的

</p>

<p>

这就是表示一个段落的html的<br>标记， 但是，这只是划分了段落，并且不是我们理想中那种每段段首空两行，所以需要一些其他的标记."<br>"是用来在一段中进行换行的。“<br>”是没有结束的标志的。

</p>

</body>

</html>

HTML的文档设置标记

一、格式标记

1、<br> 强制换行标记，让后面的文字、图片、表格等等显示在下一行！

2、<p> </p> 换段落标记， 换段落，由于多个空格和回车在HTML会被等效为一个空格，

所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落！

3、<center></center> 居中对齐标记， 让段落或者文字相对于父标记居中显示

4、<pre></pre>预格式化标记，会保留预先排版的格式

5、<li></li> 列表项目标记 每个列表使用一个<li>标记

6、<ul></ul> 无序列表标记 小圆点

7、<ol></ol> 有序列表标记 数字序号

可以显示特定的一些顺序

a、格式：<ol type = "符号类型">

<li type = "符号类型"> </li>

<li type = "符号类型"> </li>

</ol>

b、有序列表的type属性值

1 ： 阿拉伯数字1.2.3等等 默认type的属性值

A : 大写字母A.B.C等等

a : 小写字母a.b.c等等

Ⅰ : 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ、Ⅵ、Ⅶ

i : 小写罗马数字(i,ii,iii,iv,v,vi,vii,viii,ix,x )

c、value 指定一个新的序列数字的起始值

d、列表是可以嵌套的

8、<dl><dt><dd>定义型列表

使用场合：对列表条目进行简短的说明

格式：<dl>

<dt> 软件说明：</dt>

<dd> 简单介绍软件的功能及基本应用 </dd>

<dt> 软件界面 </dt>

<dd> 用于选择软件的外观 </dd>

</dl>

9、<hr> 水平分割线标记 段落之间的分割线

10、<div> </div> 分区显示标记、也称之为层标记，常用来编排一大段的HTML段落，也可

以用于格式化表，和<p>很相似，层可以多层嵌套使用

二、文本标记

1、<hn></hn> 标题标记 共有6个级别，n的范围1~6，不同级别对应显示大小不同的标

题，h1最大，h6最小。<h1>一级标题<h2>

2、<font></font> 字体设置标记 设置字体的格式 

三个常用属性

a、size(字体大小) <font size = '3'> 取值范围1-7浏览器默认是3 

b、color(字体颜色) <font color = 'red'>

c、face(字体) <font face = '宋体'>

3、<b></b> 加粗

4、<i></i> 斜体

5、<sub></sub> 文字下标字体标记

6、<sup></sup> 文字上标字体标记

7、<tt></tt>打印机字体标记

8、<cite></cite> 应用方式的字体，通常是斜体的

9、<em></em> 表示强调，通常显示为斜体字

10、<strong></strong> 表示强调，通常显示为粗体字

11、<small></small> 小型字体标记

12、<big></big> 大型字体标记

13、<u></u> 下划线字体标记

<b> </b> 加粗字体

<i> </i> 斜体

<tt> </tt> 等宽的字体，打印字字体 西文字体

<small></small> 会将字变小

<del> </del> <ins> </ins>这个会将一个错误的词中间加一条横线，表示删除它，然后用后面标签中内容跟在后面表示替换了，替换的内容加了下划线

<s></s>在文字的中间加上了一条线，这里的含义和<del>的意义不一样的，这里指的是这些内容是不被提示的

<sup></sup> 表示上标

<sub></sub> 表示下标

<mark></mark> 表示高亮显示

这些其实都是可以用CSS实现的，所以我们比较提倡使用CSS 的。

<em>表示强调</em> 

<strong>表示着重</strong>

<dfn>表示定义的</dfn>

<code></code>表示的是源代码

<samp>samp 例子代码</samp>

<kbd> kbd用户输入 键盘 </kbd>

<var>variable 变量</var>

<cite>Cite引用</cite>

<address>表示地址的,这时候的字体会变成斜体</address>

<blockquote>这里可以将它之间的文字进行缩进的</blockquote>

<q>就是给之间的文本加上小引用</q>

HTML的图像标记

1、<img>

使用方法： <img src = "路径/文件名.图片格式" width = "属性值" border = "属性值" alt

="属性">

注意：<img>为单标记,不需要闭合 在加载图像文件的时候，文件的路径或者文件名文件格

式错误，图片将无法加载。

<img>标记的属性

a、src属性 作用：指定我们要加载的图片的路径和图片的名称以及图片的格式

b、width属性 作用：指定图片的宽度，单位px、em、cm、mm

c、height属性 作用：指定图片的高度，单位px、em、cm、mm

d、border属性 作用：指定图框的边框宽度，单位px、em、cm、mm

e、alt属性 作用： 当网页上的图片被加载完成后，鼠标移动上面去，会显示这个图片

的属性文字

如果图像没有下载或者加载失败，会用文字来代替图像显示。

搜索引擎可以通过这个属性的文字来抓取图片

HTML的超链接的使用

1、基本语法

<a href = "" target = "打开方式" name = "页面锚点名称">链接文字或者图片</a>

2、属性

a、href属性：链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐

等等。

b、 作用：定义超链接打开方式

属性值：

(1). _blank 在一个新的窗口中打开链接

(2). _seif(默认值) 在当前窗口打开链接

(3). _parent 在父窗口中打开页面（框架中使用比较多）

(4). _top 在顶层窗口中打开文件（框架中使用比较多）

c、name属性

指定页面的锚点位置

HTML的表格的使用

1、基本格式 <table 属性1=“属性值1” 属性2=“属性值2” ... ...> 表格内容 </table>

2、<table></table> table标记 

a、width属性：表示表格的宽度，他的值可以是像素（px），也可以是父级元素的百分比%

b、height属性：表示表格的高度，他的值可以是像素（px）,也可以是父级元素的百分比%

c、border属性，表示表格外边框的宽度。

d、align属性：表格的显示位置： left 居左显示 right 居右显示 center 居中显示 默认值

left。

e、cellspacing属性：单元格之间的距离，默认是2px，单位是px像素

f、cellpadding属性：单元格内容与单元格边框的显示距离，单位像素

g、frame属性：控制表格边框最外层的四条线框

值：

void(默认值):表示无边框

above：表示仅顶部有边框

below：表示仅有底部边框

hsides：表示仅有顶部边框和底部边框

lhs：表示仅有左边边框

rhs：表示仅有右边边框

vsides：表示仅有左右侧边框

box：包含全部4个边框

boeder：包含全部四个边框

h、rules属性

作用：

控制是否显示以及如何显示单元格之间的分割线

属性值：

none：（默认值）表示无分割线

all： 表示包括所有的分割线

rows： 表示仅有行分割线

clos：表示仅有列分割线

groups：表示仅在行组和列之间有分割线

3、<caption></caption>

什么时候使用？ 当表格需要标题的时候。

如何正确使用？<caption>属性插入的位置，直接位于<table>属性之后<tr>表格行之前

a、align属性：

属性值：

top：标题放在表格的上部

bottom：标题放在表格的底部

left：标题放在表格的左部

right：标题放在表格的右边

4、<tr></tr>

定义表格的一行，对于每一个表格行，都由一对<tr>...</tr>标记表示，每一行<tr>标记可以

嵌套多个<td>或者<th>标记。

a、bgcolor 设置背景颜色

格式： bgcolor = “颜色值”

b、align属性 设置垂直方向对齐方式 align=“值”

属性值：

top：靠顶端对齐

bottom：靠底端对齐

middle：居中对齐

c、valign属性 设置水平方向对齐方式

属性值：

left：靠左对齐

right：靠右对齐

center：居中对齐

5、<td></td> <th></th>

<td>和<th>都是单元格的标记，必须嵌套在<tr>标签内，是成对出现的。

<th>是表头标记，通位于首行或者首列，<th>中的文字会被默认的加粗，而<td>不会。

<td>是数据标记，表示该单元格的具体数据

两者标记属性都是一样的 

属性列表：

bgcolor：设置背景颜色

align：设置单元格的对齐方式

valign：设置单元格垂直对齐方式

width：设置单元格的宽度

height：设置单元格高度

rowspan：设置单元格所占的行数

colspan：设置单元格所占的列数

HTML的表格的简单布局

eg:

<html>

<head>

<title> Lesson 8 </title>

<meta charset="utf-8">

</head>

<body bgcolor="grey" topmargin="0" leftmargin="0" rightmargin="0">

<table border="0" width="960" align="center" cellspacing="0" cellpadding="0">

<tr height="90" bgcolor="yellow" align="center">

<td><font size="6" color="green"><b>网页的头部</b></font></td>

</tr>

<tr height="500">

<td>

<table bgcolor="blue" width="30%" height=500 align="left">

<tr align="center"><td>网页的左部</td></tr>

</table>

<table bgcolor="green" width="70%" height=500 align="left">

<tr align="center"><td>网页的右部</td></tr>

</table>

</td>

</tr>

<tr height="90" bgcolor="yellow" align="center">

<td><font size="5" color="green"><b>网页的底部</b></font></td>

</tr>

</table>

</bod>

</html>

HTML的框架

1、什么是框架

框架就是将浏览器划分成不同的部分，每一个部分加载不同的网页，实现在同一个浏览

器加载多个页面的效果。

2、框架标签

a、<frameset>...</frameset>

属性：

(1). cols

使用“像素数”和“%”分割左右窗口，” * “表示剩余部分，如果使用“ * ”，“ * ”

表示框架平均分为2个部分，如果使用“ * ”、“ * ”，“ * ”将表示将框架分为3个部分

(2). rows

使用“像素数”和“%”分割上下窗口，‘ * ’表示剩余部分。

(3). frameborder

指定是否显示边框，0不显示、1显示。

(4). border

设置边框的大小，默认值5像素。

b、<frame/>

<frameset>中使用了几个窗口，就必须对应使用几个<frame/>框架，而且还必须

使用src属性指定一个网页。

属性：

(1). src

加载网页文件的URL地址

(2). name

框架名称，是链接标记的target所要的参数

(3). noresize

表示不能调整框架大小，没有设置时就可以调整。

(4). scrolling 是否需要滚动条

auto：更具需要自动出现

yes：有

no ： 无

(5). frameborder 是否需要边框

1：显示边框

0：不显示边框

HTML的表单

1、表单标记

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中

的内容。

基本格式：

<form action="服务器端地址（接受表单内容的地址）" name="表单名称" 

method="post|get">.....</form>

常用属性：

a、name：表单名称

b、method：传送数据的方式，分为post和get两种方式

get方式：这种方式提交时，会将表单的内容附加在URL地址的后面，所以限

制了提交的内容的长度，不超过8192个字符，且不具备保密性。

post方式：这种方式提交，将表单中的数据一并包含在表单主体中，一起传送

到服务器中处理。没有数据大小的限制，并且具有加密性。

c、action：表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地

址，如果表单中不需要使用action属性也要指定其属性为no。

d、enctype：设置表单的资料编码方式

c、target：和超链接的属性类似，用来指定目标窗口的。

2、文本域和密码

作用：<input>标记没有结束标记

基本格式：<input type=" " name=" " value=" " size=" " maxlength=" ">

属性：

a、type属性：type属性有两个取值

text：当type=“text”的时候，<input>表示一个文本输入域

password：当type=“password”时，<input>表示一个密码输入区域

b、name属性：定义控件的名称

c、value属性：初始化值，打开浏览器时，浏览框中的内容。

d、size属性：设置控件的长度

e、maxlength属性：输入框中最大允许输入的字符数

3、提交、重置、普通按钮

当<input type="submit">时，此时为提交按钮。

当<input type="reset">时，此时为重置按钮。

当<input type="button">时，此时为普通按钮。

4、单选框和复选框

单选按钮：当<input type="radio">时，为单选框

复选框：当<input type="checkbox">时，为复选框

注意：单选框和复选框都可以使用“checked”属性来设置默认选中项

5、隐藏域

当<input type="hidden">时，为隐藏表单域，但是信息还是会被带出去

6、多行文本域

用法：使用<textarea>标记可以实现一个，能够输入多行文本的区域。

语法格式：<textarea name = "name" rows="value" value="value">...<textarea>

rows属性和cols属性分别用来指定、显示的行数和列数，单位是字符个数。

7、菜单下拉列表域

语法格式：

<select name="" size="value" multiple>

<option value="value" selected>选项1</option>

<option value="value">选项2</option>

<option value="value">选项3</option>

<select>

属性：

option标记：

<opton>...</option>

这个标记用来指定列表中的一个选项，需要放在<select></select>之间

value：给选项赋值，指定传送到服务器上的值

selected：指定默认的选项。

阅读全文

1 0