Html常用标签介绍

来源：互联网发布：杭州seo公司哪家好编辑：程序博客网时间：2024/05/29 19:49

使用Dreamweaver来设计网页，对于好的网页设计，通过搜索直接到效果的源代码，看起如何实现的。

（一）Html（Hyper Text Markup Language）：超文本标记语言

1、标记(标签或元素)的形式

<元素名>内容</元素名>

<元素名/>

<imgsrc=“…”/>

<元素名>

<br>

2、位于尖括号内，可以具有属性值

3、属性值必须“” 或‘’，不写也可以解析，但是不推荐（不符合XHTML）

4、有开始必须有结束(XHTML)

5、标签不能嵌套

6、不区分大小写，但应该养成良好的编程习惯，推荐都用小写

7、网页的注释标签为：

8、网页插入空格：&nbsp；注意后面有个分号，不要忘记 &：&amp；在添加网址属性值时会用到

（二）<head>头部标签

作用的范围是整篇文档，可以有<meta>元信息定义，文档样式表定义和脚本等信息，定义在头部标签的内容往往不会再网页上直接显示。

一、head标签中的元信息标签<meta>

一般用来定义页面信息的说明（description），关键字（keywords），编辑工具（generator），网页编码（http-equiv=“content-type”），网页定时跳转（http-equiv=“refresh”）等信息。

1、关键字（keywords）

可提高被搜索引擎搜索到的概率，关键字不止一个。

格式：<meta name="keywords" content="关键字" >

2、网页编码（http-equiv）

格式：<meta http-equiv="content-type" content="text/html; charset="UTF-8" >

3、网页定时跳转

格式：<meta http-equiv="refresh" content="跳转的时间；url=跳转到的地址" >

二、<base>标签：<base> 标签为页面上的所有链接规定默认地址或默认目标。

三、<style>标签：定义网页的样式

四、<script>标签：定义网页的动作

（三）<body>主体标签

网页的标签都会有自己的一些属性，用来设置网页的样式，但是，现在网页的大部分样式设置都是采用CSS样式来设置,更加的方便和统一。

id标记：可用于标识一个唯一的元素，会用于CSS样式的选择器。

（四）文字与段落标签

一、标题字标签

各级标题由<h1>到<h6>元素来定义。其中<h1>是最高级别的标题，依次递减。

二、换行标签：<br/> 不换行标签：<nobr>内容</nobr>

三、下划线标签：<u>内容</u>

四、段落标签：<p>

五、插入水平线标签：<hr/>

（五）插入图像标签

格式：<img src="图像文件的地址" alt="图像的提示文字" > alt：表示当图片没有加载出来时，在图片位置显示的提示内容

一、图像热区链接

然后定义热区图像以及热区的链接属性

<map name="映射图像的名称" > //热区的名字与图像的usemap名字相对应（注意#）

</map>

实例：

（六）使用列表

列表分为：有序列表，无序列表，定义列表

一、有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

二、无序列表

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

三、自定义列表

自定义列表是：项目和其注释的组合，自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每项的注释以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

（七）使用表格：重点（表格多用于展示数据，div用于布局）

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。表格的标题由<caption>定义，表头由<th>定义。

一、<td>标签：定义HTML表格中的标准单元格

1、rowspan：单元格可横跨的行数

2、colspan：单元格可横跨的列数

实例：

<caption>个人信息</caption>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th> //一行三个表头
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>

<caption>个人信息</caption>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td> //一行一个表头
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>

一、路径问题（重点）

1、本地路径

局限性：只适合于本地（不提倡）

实例：" F:\java视频\java\html "

2、绝对路径

局限性：绝对路径是包括服务器在内的完全路径，不利于站点的测试和移植。（使用网站上的资源，会导致受制于人，资源不受自己控制）

实例：http://www.foo.com/img_url.jpg

3、相对路径（一定要区分清楚）

相对路径是相对于当前URL地址来说的。

../：表示上级目录

实例："../../images/01.jpg"

实例：<img src ="/"> 这里的斜杠/：表示当前站点的根目录

二、区分urL，urn，uri

1、urL（uniform resource locator）：统一资源定位符，通过看地址就可以知道资源的位置

网络协议＋主机名＋端口号＋资源名（定位标记）

http://www.baidu.com:80/index.html#top

2、urn

urn（uniform resource name）：持久可用的资源标准名称

3、uri

uri（uniform resource identifier）：包含url和urn

三、区分/（斜杠）和\（反斜杠）

其中\（反斜杠）：java中具有转义字符的功能

1、windows本地路径使用\（反斜杠）

2、linux和网络以及dos命令使用的是/（斜杠）

3、在java语言文件操作中写："C:\\User\\new\\sss.dat"与"C:/User/new/sss.dat"都可以，但是C:\user\new\sss.dat是错误的。

一、锚点链接

用于解决页面内容过长，通过锚点链接，直接链接到用户想要的页面。

建立锚点格式：<a name="锚点名称" >

创建链接到锚点的链接

1、链接到同一页面中的锚点

<a href="#锚点的名称" > 其中需要#以及锚点的名称作为href的值

2、链接到其他页面中的锚点

（九）使用表单（<form>）（重点）

表单主要用来收集客户端提供的相关信息，使网页具有交互功能。由许多不同的表单标签组成，有文字字段，单选按钮，复选框，菜单和列表以及按钮。

一、表单标签中的属性

1、action：用于指定表单数据提交到哪个地址进行处理（一般采用相对路径：相对于当前URL路径来说的）

2、method：传递方法（get和post）

注意get与post的区别

1、get提交方法：有字节限制（256byte），参数显示在url中，格式：url/userinfo?username=李四&password=heihei 参数用&号连接

2、post提交方法：没有长度限制，不会显示在url中

3、target：目标显示方式

一、输入标签：<input>

value：用来定义文本框的默认值

通过属性type来指示是哪种输入表单元素

1、text：输入文字字段

2、radio：单选按钮

在单选按钮中必须设置value的值，对于一个选择列表中所有的单选按钮，必须设置为相同的名称便于判断，

同时，在单选按钮中只有一个按钮可以设置为checked（表示默认被选中）。

value的值用于提交到服务器代替标签的内容。

（1）value的用法

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

<form action="url">
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female">Female
</form>

3、Checkbox：复选框

对于复选框可以是不同的名字，不会产生影响。

4、button：普通按钮

普通按钮一般要配合脚本来进行表单处理

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="点我" onclick="msg()">
</form>

5、submit：提交按钮

6、reset：重置按钮

7、image：将图片作为一个按钮

8、hidden：定义隐藏字段，用户不可见

9、file：用于上传文件

选择一个文件: <input type="file" name="img">

（十）、下拉列表标签：<select>

1、size属性：用来显示列表的项数

2、multiple属性：表示可以选择多个选项（按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项。）

3、列表项通过<option>标签显示,格式：<option value="选项值" selected>选项显示内容</option>

selected（默认被选中）：表示该选项在默认情况下是选中的，一个下拉菜单中只能有一个默认选项被选中。

<select size="2" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

（十一）、文本域标签：<textarea>

用户需要输入多行文本时，可以使用文本域而不是文字字段。

1、属性cols：表示列 rows：表示行

2、wrap 属性规定在表单提交时文本区域中的文本是如何换行的

<textarea rows="10" cols="30" wrap="soft|hard">
我是一个文本框。
</textarea>

3、wrap属性值的描述

值描述soft在表单提交时，textarea 中的文本不换行。默认。hard在表单提交时，textarea 中的文本换行（包含换行符）当使用 "hard" 时，必须指定 cols 属性。

（一）Html中的区块元素与内联元素

一、块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table> <div>

二、内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>,<span>

其中可以使用<div>标签用于页面布局。使用<table>显示数据。

标签描述<div>定义了文档的区域，块级 (block-level)<span>用来组合文档中的行内元素，内联元素(inline)

（二）框架结构

框架一般由框架集和框架组成。框架集是一个框架的集合。

一、<frameset>标签来设置框架集

框架页面的结构是在框架集中设置的，通过框架的分割方式分为水平分割窗口（rows），垂直分割窗口（cols）

1、在当前文件直接分割

2、在当前文件分割，在引用的子文件再进行分割。

嵌套分割窗口

</frameset>

其中高度与宽度的取值：一组用逗号分隔的像素值，百分比或者相对度量值。

实例：

<html>
<head><title>Frame</title></head>


<frameset cols="20%, *">
<frame name="left"src="01.html" noresize>
<frameset rows="40%,*">
<frame name="righttop"src="02.html">
<frame name="rightbottom"src="03.html">
</frameset>
</frameset>

</html>

二、<frame>标签

用来定义一个单独的框架页面，框架页面的属性设置都在<frame>标签中进行。

格式：<frame src="页面源文件的地址" name="页面名称" scrolling="是否显示滚动条（yes|no|auto）">

属性noresize：表示禁止调整窗口的尺寸。

三、浮动框架标签<iframe>

（四）建立超链接（使用<a>标签）（与框架结合使用）

格式：<a href="链接目标" target="目标窗口的打开方式" > 网页内容 </a>

target参数的取值：

值描述_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档。

实例：

<html>
<head><title>Frame说明</title></head>
<body>
<a href="20_1.html">链接到20_1</a>
<br>
<a href="20_2.html">链接到20_2</a>
<br>
<a href="20_1.html" target="righttop">链接到20_1，但在右上窗口显示</a>
<br>
<a href="20_1.html" target="_parent">链接到20_1，但在我的父窗口显示</a>
<br>
<a href="20_1.html" target="_top">链接到20_1，但在最上层窗口显示</a>
<br>
<a href="20_1.html" target="_blank">链接到20_1，但在新窗口显示</a>
<br>
</body>
</html>

（三）添加多媒体

网页的多媒体元素一般包括动态文字，动态图像，声音以及动画等。

一、设置滚动标签<marquee>

可以移动文字，图片，表格等。

格式：<marquee direction="滚动方向" behavior="滚动方式" scrollamount="滚动速度" >滚动内容</marquee>

1、direction取值：up,down,left(默认),right

2、behavior取值：scroll(默认):循环滚动 slide：只滚动一次就停止 alternate：来回交替滚动

3、scrollamount取值：实际上是设置每次滚动时移动的长度，以像素为单位

二、插入多媒体文件（flash动画，音频和视频文件）

语法：<embed src="多媒体文件地址"autostart="是否自动播放" width="宽度" height="高度" ></embed>

三、网页背景音乐标签<bgsound>

在网页中，除了可以嵌入普通的声音文件外，还可以为某个网页设置背景音乐。

<bgsound src="背景音乐地址" autostart="是否自动播放" loop="播放次数" >

如果无限播放可以把loop设为true即可

阅读全文

0 0