注：文章来源于传智播客毕向东老师使用课件和网络。整理学习如下：

一、Html内容

1.   Html就是超文本标记语言的简写，是最基础的网页语言。

2.   Html是通过标签来定义的语言，代码都是由标签所组成。

3.   Html代码不用区分大小写。

4.   Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

5.   头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

体部分是真正存放页面数据的地方。

l 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

l 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

l 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

l 格式：<标签名属性名=’属性值’>数据内容</标签>

<标签名属性名=’属性值’/>

l 操作思想：

为了数据操作都需要将数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就详单与容器。对容器中的数据进行操作，就是在不断地改变容器中的属性值。

二、常用标签的使用

1、字体

1. 字体标签：<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

2. 标题标签：<h1><h2>…..<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3. 特殊字符：

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

<	<	>	>	&	&
"	“	®	®	©	©
™	™		空格

注：在Dreamweaver8中都具有联想功能。

2、列表

4. 列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

例：

<dl>

    <dt>游戏名称</dt>

       <dd>星际争霸</dd>

       <dd>红色警戒</dd>

    <dt>部门名称</dt>

       <dd>技术部</dd>

       <dd>培训部</dd>

</dl>

效果：

列表中项目符号对应的标签

<ol>：数字标签（a A 1 i I）

<ul>：符号标签（○●■）

<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

3、图像

5. 图像标签：<img>

例：<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>

align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件

6. 图像地图：<map>

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。

map标签要和img标签联合使用。Href是超连接
<img src="Sunset.jpg"alt="图片说明文字" usemap="#Map"/>

 <map >

   <area shape="rect" coords="50,59,116,104"href="1.html" />

   <area shape="circle" coords="118,203,40"href="2.html" />

  </map>

4、表格

7. 表格标签：<table>

组成：标题标签：<caption>，给表格提供标题。

表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

行标签：<tr>

单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

格式：
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->

	<caption>表格标题</caption>

	<tr>

		<th>姓名</th>

		<th>年龄</th>

	</tr>

	<tr algin=”center”>

		<td>张三</td>

		<td>23</td>

	</tr>

</table>
效果：

姓名年龄

张三 23

<table border="1" width="40%">

<tr>

	<tr>

	<th colspan="2"> <!-- colspan：th标签占两列 -->

	个人信息

	</th>

	</tr>

	<tr align="center">

		<td>张三</td>

		<td>23</td>

	</tr>

</tr>

</table>

效果：

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

THEAD、TFOOT包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

5、超链接

8. 超链接标签：<a>

两种用法：

一、超链接<a href=””>

例：

<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>



二、定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<a name=”标记”>标记位置</a>

<p>…….

<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定在href值的开始加入#标记名。

6、框架

9. 框架标签：<frameset>

注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

例：
<p><framesetrows="10%,*"></p><p>    <framesrc="1.html" name="top" /></p><p>    <framesetcols="30%,*"></p><p>       <framesrc="2.html" name="left" /></p><p>       <framesrc="3.html" name="right" /></p><p>    </frameset></p><p></frameset></p>
这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

效果：

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

10. 画中画标签：<iframe>

<iframe src=”1.html” >

很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。

</iframe>

框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。

7、表单

11. 表单标签：<form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签：接收用户输入信息。

其中的type属性指定输入标签的类型。

文本框 text。输入的文本信息直接显示在框中。

密码框 password。输入的文本以原点或者星号的形式显示。

单选框 radio 如：性别选择。

复选框 checkbox 如：兴趣选择。

隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

提交按钮 submit 用于提交表单中的内容。

重置按钮 reset 将表单中填写的内容设置为初始值。

按钮 button 可以为其自定义事件。

文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

图像 image 它可以替代submit按钮。

<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

<textarea>：多行文本框。如：个人信息描述。

<label>：用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。

例：

<label for="user"accesskey="u">用户名(u)</label>

<inputtype="text" id="user" />

8、头标签

Other

头标签都放在<head></head>头部分之间。包括：title base meta link

12.   <title>：

指定浏览器的标题栏显示的内容。

13.   <base>：

href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

14.   <meta>：

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

例：

<metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>

表示打开此页面3秒后自动转到新浪页面。

15.   <link>：

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media：指定目标文档在哪种设备上起作用。

例：

<linkrel="stylesheet" type="text/css" media="screen,print"href="a.css" />

9、Other

16.<marquee>

direction 属性：left right down up

behavior 属性：scroll alternate slide

17.<pre>：

可以将文本内容按在代码区的样子显示在页面上。

三、XHTML XML比较

XHTML是可扩展的超文本标记语言（ExtensibleHyperText Markup Language）。

XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。

XHTML的代码结构更为严谨，是基于XML的一种应用。

XML是可扩展标记语言（Extensible MarkupLanguage）

XML是对数据信息的描述。HTML是数据显示的描述。

XML代码规定的更为严格，如：标签不结束被视为错误。

XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

各个服务器，框架都将XML作为配置文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>html测试Sunsea</title>

</head>

<body>

	<a href="http://cxxy.seu.edu.cn"><img src="img2_small.jpg" ="访问东大"title="访问东大成贤"/></a>

<hr color="#CC9933" size="8"/>	

	<a name="top">顶部位置</a>

	<a href="http://www.baidu.com" target="_blank">百度网站</a>

<br />

	<a href="mailto:xiangyang_zhu@163.com?subject=主题&cc=kk@sina.com">联系我们</a>

<br />

	<a href="thunder://hahaa">唐山大地震枪版</a>

<hr color="#CC9933" size="8"/>	

	<img src="testImg.jpg" alt="aaa测试图片" height="560" width="390" border="10"/>

<hr color="#CC9933" size="8"/>

	<table border="1" bordercolor="#CC3366" width="70%" cellspacing="0" cellpadding="10">

		<caption>表格标题</caption>

		<tbody>

		<tr>

			<th colspan="2">单元格1</th> 

			

		</tr>

		</tbody>

		<tbody>

		<tr>

			<td align="center"><b>单元格1</b></td>

			<td>单元格2</td>

		</tr>

		</tbody>

	</table>

<a href="#top">回到顶部</a> 

</body>

</html>

Html标签使用——文字、列表、表格、超链接的更多相关文章

HTML 初识 HTML【整体结构文字图片表格超链接】
HTML 超文本标记语言,页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 网页的本质就是超级文本标记语言,万维网是建立在超文本基础之上的.TML 通过标记符号来标记要 ...
HTML&CSS精选笔记_列表与超链接
列表与超链接列表标记无序列表ul 无序列表的各个列表项之间没有顺序级别之分,是并列的 <ul> <li>列表项1</li> <li>列表项2< ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果
1.效果及功能说明仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...
在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
WPF中动态更新TextBlock文字中的超链接，文本
1.------------------------------------------------------------------------- 修改超链接的文本文字: <TextBloc ...
Word 文字转表格
今天工作的时候遇到一个问题,需要整理出一个工程下依赖的jar的名称和大小,并且按照大小排序,我在使用一个java程序打印出名称和大小之后,需要将这些文字整理到word文档表格中,刚开始是想一个个的拷进 ...
Atitit 列表表格按照字段排序数据解决方案
Atitit 列表表格按照字段排序数据解决方案 1.1. 排序ui1 1.1.1. C:\Users\Administrator\Desktop\00oa\com.attilax\ui\orderAr ...

随机推荐

【转】Intellij IDEA常用配置详解
1. IDEA内存优化先看看你机器本身的配置而配置. \IntelliJ IDEA 8\bin\idea.exe.vmoptions -------------------------------- ...
dispatch_after中时间的计算
dispatch_after中用的时间是纳秒,所以需要进行转换:desDelayInSeconds(目标时间,比如2s)* NSEC_PER_SEC double delayInSeconds = 0 ...
string转object-兼容低版本浏览器（eval实现）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
中小企业 DevOps 从 0 到 1
原文:http://www.sohu.com/a/145065274_262549 今天主要有四个课题: 先聊一聊 DevOps: 然后跟大家聊一聊运维知识的体系和职业发展: 再是中小企业基于开源的 ...
Python Windows文件操作
获得目录和文件名 os.getenv()获取环境变量 os.putenv()设置环境变量 os.getcwd() 获得当前目录 os.chdir(‘要设置的当前目录’) os.listdir() 返回 ...
sprint3 【每日scrum】 TD助手站立会议第九天
站立会议组员昨天今天困难签到刘铸辉 (组长) 整合原来做过的功能,并做相应的改进,整合其他的功能团队进入最终的功能测试阶段,准备发布Beta版在测试阶段BUG太多,不知道如何解决 Y ...
sprint3 【每日scrum】 TD助手站立会议第八天
站立会议组员昨天今天困难签到刘铸辉 (组长) 调整闹钟和整个项目的显示效果,最后做出了微信界面滑动的显示效果整合原来做过的功能,并做相应的改进,整合其他的功能在界面的设计和用户交互上始 ...
征信报告页面的input验证收集
https://ipcrs.pbccrc.org.cn/ function checkLoginName() { var loginName = $.trim($("#loginname&q ...
spark+kafka 小案例
(1)下载kafka的jar包 http://kafka.apache.org/downloads spark2.1 支持kafka0.8.2.1以上的jar,我是spark2.0.2,下载的kafk ...
实现Nullable 可空类型
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace demo ...

Html标签使用——文字、列表、表格、超链接

一、Html内容

二、常用标签的使用

1、字体

1. 字体标签：<font>

2. 标题标签：<h1><h2>…..<h6>

3. 特殊字符：

2、列表

4. 列表标签：<dl>

3、图像

5. 图像标签：<img>

6. 图像地图：<map>

4、表格

7. 表格标签：<table>

5、超链接

8. 超链接标签：<a>

6、框架

9. 框架标签：<frameset>

10. 画中画标签：<iframe>

7、表单

8、头标签

12. <title>：

13. <base>：

14. <meta>：

15. <link>：

9、Other

16.<marquee>

17.<pre>：

三、XHTML XML比较

Html标签使用——文字、列表、表格、超链接的更多相关文章

随机推荐

热门专题

姓名	年龄
张三	23

Html标签使用——文字、列表、表格、超链接

一、Html内容

二、常用标签的使用

1、字 体

1. 字体标签：<font>

2. 标题标签：<h1><h2>…..<h6>

3. 特殊字符：

2、列 表

4. 列表标签：<dl>

3、图 像

5. 图像标签：<img>

6. 图像地图：<map>

4、表 格

7. 表格标签：<table>

5、超链接

8. 超链接标签：<a>

6、框架

9. 框架标签：<frameset>

10. 画中画标签：<iframe>

7、表单

8、头 标 签

12. <title>：

13. <base>：

14. <meta>：

15. <link>：

9、Other

16.<marquee>

17.<pre>：

三、XHTML XML比较

Html标签使用——文字、列表、表格、超链接的更多相关文章

随机推荐

热门专题

1、字体

2、列表

3、图像

4、表格

8、头标签