HTML基础

首页 > 代码库 > HTML基础

2024-10-14 20:45:02 213人阅读

HTML标记的语法

双边标记：<标记名称属性1=“属性值1” 属性2=“属性值2”></标记名称>

一个人可以看成一个对象，人对象有身高、体重、年龄、学历等特征。

例如：<张三 height=”180” weight=”200” age=”200” edu=”研究生”>

例如：<font size=”7” color=”red” face=“黑体”>李四</font>

单边标记：<标记名称属性1=“属性值1” 属性2=“属性值2”>

说明：单边标记起一个特殊的作用，比如：换行标记、水平线等

例如：<hr> 水平线标记 <br>换行标记

字体修饰标记

加粗：<b>内容</b>

斜体：<i>内容</i>

下划线：<u>内容</u>

下标：<sub></sub>

上标：<sup></sup>

字体颜色、大小：<font size=“字号大小，取值1-7” color=“颜色单词”>内容</font>

例如：<font size=”6” color=”blue”>大家好</font>

解决网页乱码的问题：要保证各个环节的字符编码一致

（1）编辑器的编辑环境的字符集： ----->>>建议保存的时候选择为UTF-8

常用的编码 GB2312(简体)、GBK(简体)、BIG5(繁体)、UTF-8(多国语言编码)

（2）<meta>标记的字符集设定与编辑环境的字符集一致

字符集设置：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” >>>>应当与要保存的编码一致

（3）PHP的字符集设置

（4）MySQL的字符集设置

注意：浏览器编码也选择为对应编码例如UTF-8

任何软件的默认字符编码都是ANSI编码，ANSI在中国，对应的具体的编码是GBK或GB2312。

<body>的常用属性

text：指网页的前景颜色，就是指网页中的文本颜色；

bgcolor：网页的背景颜色

background：网页背景图片路径。background=”images/bg.gif”

例如：<body bgcolor="#999999" background="bgcolor.jpg">

排版标记

1、水平线：<hr size=“线的粗细” width=“线的宽度” align=“水平对齐方式” noshade>

常用的属性：

size：指定水平线的粗细，单位默认是像素，例如：size=5

width：指定水平线的宽度，取值：固定值、百分比。例如：width=500 width=50%

align：水平线的水平对齐方式，取值：left、center、right

noshade：不加阴影，也就是纯色显示，该属性没有属性值。

提示：HTML中的标记及属性，不区分大小写。

例如：<hr size=“5” width=“50%” align=“center” noshade>

2、段落标记：<p></p>

align：水平对齐，取值：left、center、right

提示：在段落的前后，会自动插入一个空行。

3、标题标记

一级标题：<h1 align=“left|center|right”></h1>

二级标题：<h2></h2>

三级标题：<h3></h3>

四级标题：<h4></h4>

五级标题：<h5></h5>

六级标题：<h6></h6>

4、预排版标记<pre></pre>

含义：将保留其中的所有的空白字符(空格、换行符)。原封不动的输出结果。

说明：真正排网页过程中，<pre>标记几乎用不着。但在PHP中用于打印一个数组时使用。

HTML字符实体

空格："&nbsp"

>："&gt"

<："&lt"

&："&amp"

人民币："&yen"

版权："&copy"

乘号："&time"

除号："&divide"

项目符号(无序列表)标记

标记结构：

<ul>

……

</ul>

常用属性：

type：指定项目符号的类型，取值：disc(实心圆点)、circle(小圆圈)、square(方块)

提示：这个type属性，既可能给<ul>添加，也可以给<li>添加。

注意：项目符号可以是图片，但是通过CSS设置<li>标记的背景图片来实现。

项目符号之间相互嵌套

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

说明：项目符号嵌套，是在某一个<li>标记中来嵌套一个完整的<ul>标记。

编号列表(有序列表)标记

<ol>

……

</ol>

常用的属性：

type：编号的类型，取值：1、a、A、I(大罗马)、i(小罗马)

start：从第几开始编号，取值只能是数字。

<h2>编号列表的应用</h2>

<ol>

<li type="a" start="3">JavaScript</li>

<li>PHP+MySQL</li>

</ol>

编号列表相互嵌套：跟上面<ul>的嵌套一样，也都是在<li>标记中，来嵌套一个完整的<ol>。

定义列表的格式：

<dl>

</dl>

标记的解释说明：

dl，define List

dt，define title

dd，define description

<dl>标记中，至少包含一个<dt>或<dd>标记，也可以包含多个<dt>或<dd>。

<dt>定义标题，这个标记是必须的；

<dd>描述信息，可以根据情况使用，如果不需要它，可以不用加。

<div>和<span>

<div></div>和<span></span>标记，没有任何意义，但在网页中，又是使用最多的标记。

这两个标记，基本上没有太多的属性。

<div>和<span>这两个标记，一般要结合CSS来实现效果

块元素和行内元素

块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。

比如：<div>、<p>、<ul><ol><dl>、<pre>、<h1>、<h2>等

行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。

比如：<font><b><i><u><a><span>等

网页颜色表示

英文单词表示：red、green、blue、yellow等。

10进制表示：

有10基本数：0、1、2、3、4、5、6、7、8、9

红色：rgb(255,0,0)

绿色：rgb(0,255,0)

蓝色：rgb(0,0,255)

16进制表示：

有16个基本数：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F

红色：#FF0000

绿色：#00FF00

蓝色：#0000FF

滚动字幕标记

常用属性：

direction：滚动的方向，取值：left、 right、up、 down

behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次)

bgColor：背景颜色

width：滚动的宽度

height：滚动的高度

align：水平对齐方向，取值：left center right

scrollAmount：滚动的步长值，值越大，滚动的越快。

scrollDelay：两次滚动间的停留时间

例如：<marquee direction="up" width="450" height="300" bgcolor="#FFFF99" behavior="scroll" scrollamount="10" scrolldelay="1000">I can fly</marquee>

超级链接

1、概念：要想从一个网页跳转到另一个网页，就需要使用“超级链接”来实现。

2、超级链接的标记<a></a>，双边标记，是行内元素

常用属性：

href：目标URL，如：href=http://www.mamicode.com/http://www.sina.com.cn href=http://www.mamicode.com/“about/index.html”

name：主要用于设置一个锚点的名称。

target：设置目标页面打开方式。

_blank：在新窗口中来打开目标文件，原来的窗口不关闭

_self：在当前窗口中来打开目标文件，原来窗口中的内容将被替换掉。

_top：在最顶层窗口中来打开目标文件，常用于“框架技术”中

_parent：在父级窗口中来打开目标文件，常用于“框架技术”中

例如：<a href=http://www.mamicode.com/“http://www.sina.com.cn”></a>

3、URL介绍

URL(Uniform Resource Locator，统一资源定位器)

例如：http://php.cn/view/index.html

一个URL(网址)由四个部分构成：

第一部分：协议，比如：http:// ftp://

如何判断是什么服务器？主要是看安装了什么样的服务器软件？Apache软件是WWW服务器

如果安装了FTP的软件的服务器，FTP服务器；

如果安装了邮箱服务器的软件，那就是“邮件服务器”；

如果安装了MySQL软件的服务器，那就是“数据库服务器”；

第二个部分：主机名，比如：php.cn就是一个主机的二级域名(一级域名是以WWW开头的)。

第三部分：目录名，比如：view/

第四部分：文件名，比如：index.html

4、其它常用的链接

E-mail链接：<a href="mailto:976296751@qq.com">给我发邮件</a>

下载链接：任何网页不能直接执行的文件，都会出现下载对话框。

网页可以直接执行的文件：.html .jpg .png .gif .htm

空链接：<a href="http://www.mamicode.com/#">bruce</a>

JS空链接：<a href="javascript:void(0)">JS的空链接</a>

提示：在HTML中写JS程序时，一般是以“javascript:”开头，void(0)返回一个假值，什么也不做

JS的弹出一个警告窗口：<a href="javascript:alert(‘Hello bruce ！‘)">请点我！</a>

提示：alert()是JS的Window对象的一个方法，弹出一个字符串信息。

5、锚点链接：实现在一个网页的不同部分进行跳转

第一步：先定义一个锚点(记号)

<a name=“top”></a> 中间一般不写内容

第二步：链接到定义的锚点所在的位置

锚点：通过锚点(记号)，可以访问到一个网页的不同地方。

定义锚点：<a name=“top” id=“top”></a>

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

HTML的注释：是对某个模块的解释说明，最终在网页中是看不见的。

<!—注释的内容-->

图片标记

单边标记：<img>

常用的属性

src：指图片的路径，如：src=http://www.mamicode.com/“images/bg.gif”

width：指图片的宽度，不加单位。Width=400

height：指图片的高度。

align：指图片的水平对齐方式，取值：left center right

border：图片的边框线的粗细

alt：如果图片不显示时，将显示alt指定的内容

hspace：指图片左右的边距

vspace：指图片上下的边距

title：指定图片的提示信息，有利于SEO优化(关键字优化)

说明：title是一个公共的属性，任何标记都有title属性。

注意事项：

（1）如果要想保证图片等比例缩放，请只设置width和height其中一个。

（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。

（3）所有的外部文件，图片、视频、音乐、附件等，都没有真正的插入到网页中，而是写入一个链接的地址，在需要显示文件时，就从服务器上调用该文件。因此，网页的大小，是由文本和标记决定的。

XHTML

（1）XHTML介绍

XHTML，Extensible Hypertext Markup Language，可扩展超文本标注语言。

XHTML的主要目的，是为了取代HTML，也可以理解为HTML的升级版。

HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。

XHTML与HTML4.0的标记基本上一样。

XHTML是严格的、纯净的HTML。

（2）编写XHTML的规范

1)所有标记元素都要正确的嵌套，不能交叉嵌套。<h1><font></font></h1>

2)所有的标记都必须小写。

3)所有的标记都必须关闭。

双边标记：<span></span>

单边标记：<br> 转成 <br /> <hr> 转成 <hr /> <img src=http://www.mamicode.com/“URL” />

4)所有的属性值必须加引号。<font color=“red”></font>

5）所有的属性必须有值。<hr noshade=“noshade”>

6）XHTML文档开头必须要有DTD文档类型定义

XHTML编写规范

1）所有的标记、属性都要小写；

2）所有的标记都要关闭，如：<hr /> <br /> <meta /> <img />

3）所有的属性值都要加引号

4）所有的属性都必须要有值，例如：<hr noshade=“noshade” />

5）DTD文档类型定义，DTD就是一套标记的验证规则而已。

严格型：结构(HTML标记)和表现(CSS)完全分离

过渡型：可以在结构中，来书写样式、格式。

框架型：主要用来作框架，将一个浏览器窗口划分成不同的小窗口，一个小窗口中可以来显示一个网页。

DTD文档类型定义

DTD，Document Type Definition文档类型定义，是一套标记的规则，理解为一种“验证机制”。

DTD有三种类型：

第一种：Strict严格型：在这种XHTML中，结构中不能出现格式或表现的内容。

格式标记：<font>、<b>、color属性、background属性

这种类型下，在<body>中只有结构标记，不能出现任何的表现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

第二种：Transitional过渡型：在这种XHTML中，结构中可以出现格式标记或表现(CSS)的内容。(用的最多)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第三种：Frameset框架型：在这种XHTML中，可以使用框架技术，实现多个网页在一个浏览器窗口中呈现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<meta>

（1）<meta>标记的概念

（2）<meta>的两个属性

http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。

name：描述信息，指定网页关键字、网页描述、作者、版权信息

（3）常用的<meta>设置

设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />

网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页

延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />

设置网页的关键字：<meta name=“keywords” content=“关键字” />

网页描述：<meta name=“description” content=“描述信息” />

网站作者：<meta name=“author” content=“Bruce” />

表格标记

1、表格的结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

表格结构的说明：

<table>是表格标记，里面包含<tr>行标记；

<tr>代表一个行

<td>或<th>代表一个单元格(列)，<th>标题单元格(内容居中加粗显示)，<td>普通单元格

2、<table>的常用属性

width：表格的宽度

height：表格的高度

border：表格的边线粗细

bordercolor：表格的边线颜色

align：表格的水平对齐方式，取值：left center right

cellpadding：指单元格边线到内容间的距离(内边距)

cellspacing：指两个单元格之间的距离(外边距)

bgColor：表格背景色

background：表格的背景图片

注意：在HTML中所有的属性值都不加px单位，但在CSS中所有数值都必须加单位。

3、<tr>的常用属性

height：一行的高度

bgColor：行的背景色

align：一行的内容水平居中显示，取值：left、center、right

valign：行的内容垂直居中，取值：top、middle、bottom

4、<td>或<th>的属性

width：单元格的宽度

height：单元格的高度

bgColor：背景色

background：背景图片

align：单元格内容水平对齐

valign：单元格内容垂直对齐

rowspan：合并行的单元格(跨行合并)

colspan：合并列的单元格(跨列合并)

表格：很细表格边线的制作

CSS的写法：style="border-collapse:collapse;"

制作网站的一个思路

1）业务员与客户进行沟通，确定客户的需求。

2）网站美工来设计一个效果图(Photoshop)，直到客户满意为准。

3）将效果图源文件，交给排版人员，用HTML+CSS还成效果图所展示的样式。

4） 排版人员，将原效果图进行切割成一个一个的小图片，然后用HTML+CSS还原效果图所展示的样式。

5）后台程序员开始写程序。

6）将前台HTML页面与PHP程序综合排版。

表单

1、表单的主要作用：收集用户信息的。

2、表单的工作原理

1）填写有表单的网页，点击“提交按钮”进行提交；

2）表单数据，通过互联网传递到了服务器

3）服务器上有专门的程序，对提交的表单数据进行验证；

4）如果验证通过，直接写入数据库；

5）如果验证失败，将返回一个错误信息；

因此，表单的开发分两个部分，一是前台表单页面的制作和排版，二是后台PHP程序对表单数据的验证和写入数据库。

3、实例：用户登录的表单

用户名：<input type="text" name="username" size="40" />

密码：<input type="password" name="password" size="40" />

</form>

4、<form>标记常用属性

name：表单的名称，用于JS来操作或控制表单时使用；

id：表单的名称，用于JS来操作或控制表单时使用；

action：指定表单数据的处理程序,如：action=“login.php”

method：表单数据的提交方式，一般取值：get(默认)和post

GET方式：将表单数据，以“name=value”形式追加到action指定的处理程序的后面，两者间用“?”隔开，每一个表单的“name=value”间用“&”号隔开。

特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。

Action指定的处理程序可以获取到表单数据。

特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)

Enctype：表单数据的编码方式(加密方式)，取值：application/x-www-form-urlencoded、multipart/form-data

Enctype只能在POST方式下使用。

Application/x-www-form-urlencoded默认加密方式：除了上传文件之外的数据都可以

Multipart/form-data：上传附件时，必须使用这种编码方式。

5、单行文本框：

type：指定文本框的类型，取值：text(文本框)、password(密码)、radio(单选)、checkbox(复选框)

name：指定文本框的名称

value：指文本框中默认显示的文本；

size：指文本框的宽度(字符数)

maxlength：最大可以输入多少个字符

注意：表单和表格嵌套时，是在<form>标记中赋套<table>标记。

6、单行密码框

7、单选项

<input type=“radio”name=“sex”value=http://www.mamicode.com/“先生” checked=“checked” />先生

<input type=“radio”name=“sex”value=http://www.mamicode.com/“女士” />女士

Checked属性：是默认选择其中一项。

提示：单选是一组相互排斥的选项，每次只能选择一个，不能同时选择多个。

8、复选框：同时选择多个，也可以一个都不选

<input type=“checkbox” name=“hobby”value=http://www.mamicode.com/“泡妞” checked=“checked” />泡妞

<input type=“checkbox” name=“hobby”value=http://www.mamicode.com/“篮球” />篮球

<input type=“checkbox” name=“hobby”value=http://www.mamicode.com/“吹牛” />吹牛

checked属性：默认选中哪几个选项

提示：复选框也是一组选项，名称是一样的，最终用PHP来获取值时，将产生一个数组(一个名称好几个不同的值)的结果。

9、上传文件

提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

10、文本区域

<textarea name=“name” cols=“宽度” rows=“高度”>默认的显示文本</textarea>

11、下拉列表

</select>

Selected属性：是默认选中一个下拉列表项；

12、提交按钮、重置按钮、普通按钮、图片按钮

提交按钮：<input type=“submit” name=“submit” value=http://www.mamicode.com/“提交表单” />

注意：如果按钮上的文本，不想发送到服务，可以不用加name属性

重置按钮：<input type=“reset” name=“reset” value=http://www.mamicode.com/“重新填写” />

普通按钮：<input type=“button” name=“button” value=http://www.mamicode.com/“普通按钮”/>

普通按钮没有任何功能，既不会提交表单，也不会重置表单；如果想实现“提交”“重置”功能，将需要配合JS来实现。

图片按钮：<input type=“image” src=http://www.mamicode.com/“图片的URL”/>

说明：图片按钮的默认动作，就是提交表单。

浮动框架(行内框架、内嵌框架)

浮动框架，就是在一个网页中开一个“小窗口”，在小窗口中来显示一个网页的内容。

<iframe>的常用属性

src：引入哪一个网页文件进来；

width：指浮动框架的宽度

height：指浮动框架的高度

frameborder：是否显示框架边框，取值：yes、no、1、0

scrolling：网页内容该如何显示，取值：auto、yes、no

align：实现框架和文本混排

hspace：左右间距

vspace：上下间距

HTML基础

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML基础

HTML基础

HTML标记的语法

字体修饰标记

<body>的常用属性

排版标记

HTML字符实体

项目符号(无序列表)标记

编号列表(有序列表)标记

<div>和<span>

网页颜色表示

滚动字幕标记

超级链接

图片标记

XHTML

DTD文档类型定义

<meta>

表格标记

表单

浮动框架(行内框架、内嵌框架)

看完仍有疑问？有类似问题直接问程序猿