首页 > 代码库 > Html内容
Html内容
Html 内容
|
l 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
l 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
l 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
l 格式：<标签名 属性名=‘属性值‘> 数据内容 </标签名>
<标签名 属性名=‘属性值‘ />
l 操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。
常用标签的使用
|
字 体 |
||||||||||||||||||
例：<font size=5 color=red>字体标签示例</font> 注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
注：在Dreamweaver8中都具有联想功能。 |
|
列 表 |
<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。 |
|
图 像 |
例：<img src=http://www.mamicode.com/”1.jpg” align=”middle” border=”3” alt=”图片说明文字 图片不显示是 出现文字”/> align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件 Title 鼠标放上去会有 说明文字
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。 map标签要和img标签联合使用。Href是超连接 <img src="http://www.mamicode.com/Sunset.jpg" alt="图片说明文字" usemap="#Map" /> <map > <area shape="rect" coords="50,59,116,104" href="http://www.mamicode.com/1.html" /> <area shape="circle" coords="118,203,40" href="http://www.mamicode.com/2.html" /> </map> |
|
表 格 |
组成：标题标签：<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> 效果：
<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>。 |
|
超 链 接 |
两种用法： 一、超链接<a href=http://www.mamicode.com/””> 例： <a href=http://www.mamicode.com/”http://www.sina.com.cn” target=”_blank”>新浪 <!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 --> 二、定位标记<a name=””> 一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。 注：定位标记要和超链接结合使用才有效。 例： <a name=”标记”>标记位置</a> <p>…….<!--很多空行以制造网页过长的效果 --> <a href=http://www.mamicode.com/”#标记”>返回标记位置 注：使用定位标记时一定在href值的开始加入#标记名。 |
|
框 架 |
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。 例： <frameset rows="10%,*"> <frame src="http://www.mamicode.com/1.html" name="top" /> <frameset cols="30%,*"> <frame src="http://www.mamicode.com/2.html" name="left" /> <frame src="http://www.mamicode.com/3.html" name="right" /> </frameset> </frameset> 这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html 效果：
注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize” 10. 画中画标签：<iframe> <iframe src=http://www.mamicode.com/”1.html” > 很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。 </iframe> 框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。 |
|
?表 单? |
|
11. 表单标签：<form> 表单标签是最常用的标签，用于与服务器端的交互。 <input>：输入标签 ：接收用户输入信息。 其中的type属性指定输入标签的类型。 l 文本框 text。输入的文本信息直接显示在框中。 l 密码框 password。输入的文本以原点或者星号的形式显示。 l 单选框 radio 如：性别选择。 l 复选框 checkbox 如：兴趣选择。 l 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。 l 提交按钮 submit 用于提交表单中的内容。 l 重置按钮 reset 将表单中填写的内容设置为初始值。 l 按钮 button 可以为其自定义事件。 l 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。 l 图像 image 它可以替代submit按钮。 <select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。 <option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。 <textarea>：多行文本框。如：个人信息描述。 <label>：用于给各元素定义快捷键。 for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。 accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。 例： <label for="user" accesskey="u">用户名(u)</label> <input type="text" id="user" />
表单提交： 1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。 2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。
get和post这两种最常用的提交方式的区别： 1．get提交将数据显示在地址栏，对于敏感信息不安全。 post提交不显示在地址栏，对于敏感信息安全 2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。 post可以提交大体积数据。 3．对提交数据的封装方式不同： get：将提交数据封装到了http消息头的第一行，请求行中。 post：将提交的数据封装到消息头后，在请求数据体中。 注意：通常表单使用post提交，因为编码方便。 对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。 通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。 如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。 |
|
头 标 签 |
|
头标签都放在<head></head>头部分之间。包括：title base meta link 12. <title>：指定浏览器的标题栏显示的内容。 13. <base>： href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。 target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。 14. <meta>： name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。 http-equiv 属性：模拟HTTP协议的响应消息头。 例： <meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /> 表示打开此页面3秒后自动转到新浪页面。 15. <link>： rel 属性：描述目标文档与当前文档的关系。 type 属性：文档类型。 media：指定目标文档在哪种设备上起作用。 例： <link rel="stylesheet" type="text/css" media="screen,print" href="http://www.mamicode.com/a.css" /> |
|
Other |
|
16. <marquee> 让内容动起来。 direction 属性：left right down up behavior 属性：scroll alternate slide 17. <pre>：可以将文本内容按在代码区的样子显示在页面上。 |
|
XHTML XML |
|
XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。 l XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。 l XHTML的代码结构更为严谨，是基于XML的一种应用。 XML是可扩展标记语言（Extensible Markup Language） l XML是对数据信息的描述。HTML是数据显示的描述。 l XML代码规定的更为严格，如：标签不结束被视为错误。 l XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。 l 各个服务器，框架都将XML作为配置文件。 |
|
|
|
|
|
是大夫撒旦防撒地方撒 |
|
色人防守对方萨芬的 |
|
|
|
||||||
|
|
|
Html内容