新长城 Html标签
来源：互联网 发布：pkpm软件pmsap什么锁 编辑：程序博客网 时间：2024/05/20 11:51
基本标签
1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
5.<font></font>
6.<h1></h1>~<h6></h6>
7.<br/>
Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”。他对大小写不敏感。
1.<html></html>
<html>标签用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。
2.<head></head>
<head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标签对，这些标签对都是描述Html文档相关信息的标签对，<head></head>标签对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
3.<body></body>
<body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。<body>标签中还可以有以下属性：
属性
用途
示例
<body bgcolor="#rrggbb">
设置背景颜色。
<body bgcolor="red">红色背景
<body text="#rrggbb">
设置文本颜色。
<body text="#0000ff">蓝色文本
<body link="#rrggbb">
设置链接颜色。
<body link="blue">链接为蓝色
<body vlink="#rrggbb">
设置已使用的链接的颜色。
<body vlink="#ff0000">
<body bgproperties="fixed">
设置背景固定
<body topmargin/leftmargin
设置上/左边距
<body alink="#rrggbb">
设置正在被击中的链接的颜色。
<body alink="yellow">
4.<title></title>
注意：<title></title>标签对只能放在<head></head>标签对之间。
5.<font></font>
在文字前加上<font>标签文件后加上</font>可以对文字进行属性的修饰。
例如：文字大小，文字颜色等属性。color size...
color属性可用颜色单词.也可用十六进制数表示.示:#FFFFFF
6.<h1></h1>~<h6></h6>
用于定义网页主体内容的标题
7.<br/>
是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。
特殊符号
大于号>
小于号<
与符号&
"双引号
空格
®注册符
©版权符
TM符™
<
>
&
"
®
©
™
总结：
<head></head>放的是头部分的属性信息，他会先加载。
<body></body>标签放的是网页的显示内容。
Html的标签必须成对出现，但是有些标签不需要成对出现，比如<br/>。
Html的标签操作思想：标签就像容器一样，我们操作标签的样式，就等于在操作标签的内容，对标签进行一个样式的修改，就等于操作标签的所有内容的样式。
总结代码示例:
<html>
<head>
<title>网页标题</title>
</head>
<body>
<font color="Green" size="12">这个我的第一个网页！<br/>哦耶！</font>
</body>
</html>
列表标签
1.<dl></dl><dt></dt><dd></dd>
2.<ol></ol><ul></ul><li></li>
3.<hr/>
4.<img/>
5.<!--注释文字-->
1.<dl></dl><dt></dt><dd></dd>
<dl></dl>用来创建一个普通的列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。
2.<ol></ol><ul></ul><li></li>
数字标签.默认是数字样式.可用type修改 a A i I 1. Start属性是从多少开始.可设置.
3.<hr/>
表示的是水平线.有color属性和size属性...
4.<img/>
图片标签.指定图片的位置 src属性. 给图片加个说明文字 alt.图片高度height属性.宽度width.边框border
5.<!---->
Html文档注释.注释的内容不会在网页上显示.
列表标签总结代码示例：
<html>
<head>
<title>普通列表</title>
</head>
<body>
<dl>
<dt>城市</dt>
<dd>北京</dd>
<dd>天津</dd>
<dd>重庆</dd>
<dd>上海</dd>
<dl>
<!--数字列表标签列表-->
<hr color="green" size="5"/>
<ol type="1" start="3">
<li>技术部</li>
<li>财务部</li>
<li>管理部</li>
</ol>
<ul type="circle">
<li>技术部</li>
<li>财务部</li>
<li>管理部</li>
</ul>
<!--图片标签-->
<img src= "img/1.jpg" alt="美女图片"/>
</body>
</html>
表格标签
1.<table></table><tr><td></td></tr>
2.<thead></thead><tbody></body><tfoot></tfoot>
1.<table></table><tr><td></td></tr>
<table border="边框距离" bordercolor="边距颜色" cellspacing="单元格与单元格边距"
cellpadding="单元格数据与单元格边距" width="固定像素值或相对页面百分比">
</table>
cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线
<table><caption>表格标题</caption></table>给表格加标题，是表格的一部分
<td rowspan="2">列占两行
第一行第一个单元格
第一行第二个
第二行只有一个
<td colspan="2">行占两列
单元格一
单元格二
2.<thead></thead><tbody></body><tfoot></tfoot>
table标签中默认都有一个tbody标签
浏览页面时,浏览器解析由table标签封装的页面数据时,读到</table>表格结束标记才会显示数据,若封装页面数据的表格很大,没读到结束标记就不显示任何数据,用户体验
不佳,所以将表格分为多个部分,读一个</tbody>就显示一部分.用tbody将表格分体.
超链接标签
1.<a></a>
1.<a></a>
超链接标签:<a href="http://www.so.com/">360搜索</a>
点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。
href属性，可以指定协议，mailto:987688882@qq.com?subject="邮件主题"&cc="抄送地址"
mailto thunder…… 不指定协议默认启动文件协议解析
href="http://www.so.com/"默认使用file协议打开的是一个本地文件 并不是主机地址
超链接实现页面内跳转：定位标记、锚
<a name="top">顶部位置</a>
用a标签的name属性为当前位置指定一个名字，不使用href属性
…很多页面内容…
在适当位置用a标签链接到指定名字的位置 用#标示当前页面
<a href="#top">回到顶部位置</a>
target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开
title属性：当鼠标悬停在文字上时显示的文字内容
表格超链接总结：
<html>
<head>
<title>TableList</title>
</head>
<body>
<a href="http://www.so.com" name="top">360搜索</a>
<a href="http://blog.csdn.net/u012840558?viewmode=contents">博客中心</a>
<a href="http://www.2345.com?koten">2345主页</a>
<a href="http://www.qqcaller.com">返回首页</a>
<table border="1" bordercolor="#FF3300" cellspacing="0" cellpadding="5" width="40%">
<thead>
<caption><br />用户登陆</caption>
</thead>
<tbody>
<tr>
<td>帐号:</td>
<td>新长城</td>
</tr>
<tr>
<td>密码:</td>
<td>******</td>
</tr>
</tbody>
</table>
<hr /><table border="1" bordercolor="#FF3300" cellspacing="0" cellpadding="5" width="40%">
<tbody>
<tr>
<td colspan="2" align="center">用户登陆</td>
</tr>
<tr>
<td>帐号:新长城</td>
<td>密码:******</td>
</tr>
</tbody>
</table>
<hr />
<table border="1" bordercolor="#FF3300" cellspacing="0" cellpadding="5" width="40%">
<tbody>
<tr>
<td rowspan="2">用户登陆</td>
<td>帐号:新长城</td>
</tr>
<td>密码:******</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="#top" target="_top" title="点击返回">返回顶部</a></p>
</body>
</html>
表单标签
1.<form></form>
2.<input></input>
3.<select><selcet>
4.<textarea><textarea/>
5.<fieleset></fieleset>
6.<lable></lable>
7.<pre></pre>
8.<p></p><b></b><strong><i></i><u></u>
9.<sub></sub><sup></sup>
10.<marquee></marquee>
11.<base></base>
12.<meat></meat>
13.<link></link>
1.<form></form>
表单标签：用于与服务端交互
<form action="表单提交目的地(url)" method="表单提交方式（post|get）"></form>
form标签内的组件：input接收用户输入数据 select下拉列表 textarea文本区域
form中的method指定提交方式，有7中，常用get和post
用Java自定义服务端与form交互 查看数据提交不同之处
get：
信息显示在地址栏中，敏感信息泄露，不安全；
地址栏存储信息量有限，不利于大数据量提交；
将信息封装在服务端消息头前边；
提交至服务端的中文乱码需要再次编码后再解码
post：
地址栏上不显示提交的信息，避免信息泄露，安全；
提交数据量无限制，方便大数据提交；
将信息封装在服务端消息头后边（空行后）的数据体中；
中文乱码可通过设定字符集方法简单搞定
Tomcat服务端默认使用的iso8859编码，两种提交方式提交中文时，服务端会显示乱码，需要在服务
端使用指定字符集解码，request.setCharacterEncoding("GBK")但设定字符集方法只对数据体中
的数据有效，get方式提交的信息封装在服务端消息头中，不能使用这种方法。但可以通过先用iso8859
编码再GBK解码的方式解决。推荐使用post方式提交。
暴力提交、暴力注册
<a href="http://注册地址?name=value&id=value......">暴力开始</a>
超链接默认就是get方式提交.
客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验.
2.<input></input>
<input type="text" name="user" value="Xcc" />
input标签内要指定name属性，服务端才能获取到对应的value
input内包含的组件类型 通过type指定：
text文本框 password密码框
radio单选框 属于同一组的选择框name属性要一致，不然单选框不能实现单选
checkbox复选框 分组 同单选框 单选框不加属性时还不让你选
file 提供一个文件浏览按钮，多用于上传文件
hidden 隐藏组件，不需用户看到但服务端要用到，可通过JavaScript将其值在用户端
运算后再提交至服务端使用
button 按钮 通过onclick方法添加事件监听
reset 重置按钮 submit 提交按钮
image 和submit一样，但可通过src属性指定一个图片充当按钮 美化效果
3.<select></select>
<select>选择列表，默认单选下拉式 设定multiple属性使选项全部列出，无下拉效果
size属性指定显示多少项，显示不完出现滚动条
通过<option></option>标签封装列表项.
4.<textarea></textarea>
<textarea cols="列数" rows="行数"> 文本区域 可指定行数和列数
5.<fieleset><fieleset>
<fieleset>区域设置，可给form加外框 外框上的文字可用legend标签指定
6.<lable></lable>
label标签：用于给各元素定义快捷键
for属性指定快捷键起作用的表单元素，其值必须与该表单元素的id值相同
accessKey指定快捷键，要与Alt合用
例：<label for="user" accessKey="u">user name</label>
<input type="text" id="user" />
label使用技巧：
将label标签加到tr标签上，for属性指向该tr里的文本框，在这行的任意位置点击鼠标，文本框都将获得焦点。
7.<pre></pre>
<pre></pre>此标签内封装的文本数据格式将保持原样，包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
8.<p></p><b></b><strong><i></i><u></u>
<p></p>段落标签，两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线
9.<sub></sub><sup></sup>
<sub>下标 <sup>上标
10.<marquee></marquee>
<marquee direction="left | right | down | up" behavior="scroll | alternate | slide">
此标签内可以让内容动起来，scroll滚动穿过 | alternate来回弹 | slide一下摔死
11.<base></base>
base：href指定页面中所有超链接的目录，可本地，也可网络，结尾一定要用斜杠/表示目录，只作用于相对路径文件。 target指定打开方式
12.<meta></meta>
meta： <meta name="keywords" content="电影，视频，关键字……" />
<meta http-equiv="refresh" content="3, url=http://www.sina.com.cn" />
http-equiv：模拟HTTP协议响应消息头，3秒后刷新，打开指定网页
13.<link></link>
link：给HTML关联一些文件，如CSS，JS等
<link rel="stylesheet" href="1.css" media="print,screen">
rel指定关联文件与HTML的关系 media指定文件作用的设备，多个设备用逗号分隔
XHTML是可扩展的（Extensible）超文本标记语言，可理解为HTML向XML的过渡。
XML是可扩展标记语言，是对数据信息的描述，而HTML是对数据显示的描述。XML规定更为严格，
如标签不结束即错误。XML规范可被更多应用程序解释，将成为一种通用的数据交换语言，各个服
务器、框架都将XML作为配置文件。
Dreamweaver创建HTML文件自动生成的头部信息中，又一个规范约束文件（.dtd），描述一些标签信
息，由此文件来约束标签的自动闭合，删除这些头部信息后，DW中输入标签将不会自动闭合。前边的
网址并不代表此文件要从网络获取，只表示名称空间，可自定义。
表单标签总结代码示例：
<html>
<head>
<title>表单标签</title>
</head>
<body>
<fieldset>
<legend>注册区域</legend>
<form method="get" action="http://192.168.9.103:10009/">
<table width="70%" border="1" align="center"
cellpadding="10" cellspacing="0" bordercolor="#0066FF">
<tr>
<th colspan="2">注册页面</th>
</tr>
<label accesskey="u" for="user">
<tr>
<td>帐号：(U)</td>
<td><input type="text" id="user"/></td>
</tr>
</label>
<tr>
<td>密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>技术方向:</td>
<td>
<input type="checkbox"/>android<input type="checkbox" />云计算<br />
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="country" ><!--select:multiple="multiple" size="4"-->
<option>--选择城市--</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>重庆</option>
</select>
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file"></td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="checkbox" checked="checked"/>我已阅读并同意相关服务条款
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<input name="提交" type="submit" value="立即注册" />
<input type="reset" value="清空列表"/>
</td>
</tr>
<!--
<tr>
<td colspan="2">
意见反馈：<br /><textarea cols="102" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="button" value="提交"/>
<input type="hidden" name="id" value="12345" />
</td>
</tr>
-->
</table>
</form>
</fieldset>
</body>
</html>
- 新长城 Html标签
- 新长城 CSS样式
- 新长城 JavaScript总结
- 新长城 Dom 概述
- 新长城 Dom Day01
- HTML link标签新属性
- 演示HTML的一个新标签
- HTML新标签汇总及使用详解
- HTML 5新标签及含义总结
- Html 5 新标签之Media
- 【转载】HTML的新标签template
- 【HTML & CSS & JavaScript】HTML5新标签
- 长城
- Html-设置链接在新标签页中打开
- HTML5学习_day11(1)--HTML新标签
- KindEditor-新添加的字符串进行html标签删除
- 禁止html上拖动图片打开新标签页
- （HTML）学了<a>新标签的简单试验
- 获取DataGridView中的的选中行
- 用 ObjectiveSugar 扩展NSArray NSDictionary NSSet NSNumber
- 开发sdk（编写带资源的库工程要注意的）
- C语言中volatile关键字的作用
- poj 3675 Telescope 圆和多边形的公共面积
- 新长城 Html标签
- 使用开源库 TWMessageBarManager 展示系统级别的通知
- 新的开始
- 安装并配置nfs服务器
- Service与Android系统设计（5）-- libbinder
- VC 为程序创建快捷方式的详细讲解
- jquery和DOM比较
- escape,encodeURI,encodeURIComponent 解决乱码
- fgets函数
