HTML标签

今天复习的HTML标签。参考资料：《W3school web技术教程》、《毕向东Java基础及笔记》

列表标签：dl
上层项目：dt
下层项目：dd：封装的内容是会被缩进的。有自动缩进效果。

<dl>
   <dt>上层项目内容</dt>
   <dd>下层项目内容</dd>
</dl>

有序和无序的项目列表
有序：<ol>
无序：<ul>
无论有序和无序，条目的封装用的都是<li>
而且他们都有缩进效果。

不建议在列表中定义列表的type，使用CSS代替。

在无序列表中使用type属性：
属性值：disc 默认值。实心圆。
   circle 空心圆。
   square 实心方块。

<ul type="square">
   <li>HTMl</li>
   <li>XHTML</li>
   <li>CSS</li>
</ul>

在有序列表中使用type属性：
属性值：1 默认值。数字有序列表。
   a 按字母顺序排列的有序列表，小写
   A 同上，大写。
   i 罗马字母，小写。
   I 同上，大写。

<ol type="I">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ol>

演示图片标签。
<img src="1.jpg" height=350 width=500 border=10 alt="啊，帅哥！"/>

简单的HTML表格由table元素以及一个或tr、th或td元素组成。
tr元素定义表格行，th元素定义表头，td元素定义表格单元。
更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。

<table>
<tbody>
   <tr>
       <th>标题</th>
   </tr>
   <tr>
       <td>表格内容</td>
   </tr>
</tbody>
</table>

超链接：
作用：连接资源。
当有了href属性才有了点击效果。
href属性的值的不同，解析的方式也不一样。

如果在该值中没有指定过任何协议。
解析时，是按照默认的协议来解析该值的。
默认的协议是file协议。

<a>标签的target属性规定在何处打开链接文档。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开呗链接文档。

<a href="http://www.baidu.com" target="_blank"/>百度</a>
<a href="1.jpg">帅哥自拍</a>
<a href="mailto:cde@sina.com">联系我们</a>
<a href="http://www.xunlei.com/movies/abcde.rmvb">冰河世纪</a>
<a href="thunder://adfsadghsdfag==">种子</a>
<a href="javascript:void(0)" onclick="alert('警告')">请猛击鼠标</a>

定为标记。专业术语：锚。

<a name=top>顶部位置</a>
<hr/>
<img src="1.jpg" height=900 width=400 border=1/>
<hr/>
<a name=center>中间位置</a>
<hr/>
<img src="1.jpg" height=900 width=400 border=1/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>

画中画标签。
<iframe src="1.jpg" height=400 width=200></iframe>

<form>标签用于为用户输入创建HTML表单。
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含menus、textarea、fieldset、legend和label元素。
表单用于向服务器传输数据。
如果要给服务端提交数据，表单中的组件必须有name和value属性。
用于给服务端获取数据方便。

<form>
   输入名称：<input type="text" name="user" value="" /><br/>
   输入密码：<input type="password" name="psw" /><br/>
   选择性别：<input type="radio" name="sex" value="nan" />男
          <input type="radio" name="sex" value="nv" />女<br/>
   选择技术：<input type="checkbox" name="tech" value="java" />JAVA
          <input type="checkbox" name="tech" value="html" />HTML
          <input type="checkbox" name="tech" value="css" />CSS<br/>
   选择文件：<input type="file" name="file" /><br/>
   一个图片：<input type="image" src="1.jpg" /><br/>
   隐藏组件：<input type="hidden" name="myke" value="myvalue" /><br/>
   一个按钮：<input type="button" value="有个按钮" onclick="alert('猛点鼠标')" /><br/>

select元素可创建单选或多选菜单。
当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将<select>表单数据提交给服务器时包括name属性。
option元素定义下拉列表中的一个选项（一个条目）。
浏览器将<option>标签中的内容作为<select>标签的菜单或是滚动列表中的一个元素显示。
option元素位于select元素内部。
可选的属性：
disabled 规定此选项应在首次加载时被禁用。
label   定义当使用<optgroup>时所使用的标注。
selected 规定选项（在首次显示在列表中时）为选中状态。
value   定义送往服务器的选项值。

<select name="country">
   <option value="none">--选择国家--</option>
   <option value="usa">美国</option>
   <option value="en">英国</option>
   <option value="cn" selected="aes">中国</option>
</select>

<textarea>标签定义多行的文本输入控件。
文本区可以容纳无限数量的文本，其中的文本默认字体是等宽字体。
可以通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS和height和width属性。
<textarea name="text"><textarea><br/>

<input type="reset" value="清除数据" /><input type="submit" value="提交数据" />
</form>

GET提交和POST提交的区别？
1,
get提交，提交的信息都显示在地址栏中。
post提交，提交的信息不显示地址栏中。

2，
get提交，对于敏感的数据信息不安全。
post提交，对于敏感信息安全。

3，
get提交，对于大数据不行，因为地址栏存储体积有限。
post提交，可以提交大体积数据。

4，
get提交，将信息封装到了请求消息的请求行中。
post提交，将信息封装到了请求体中。

在服务端的一个区别。
如果出现将中文提交到tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，
通过iso8859-1进行编码，在用指定的中文码表解码。即可。
这种方式对get提交和post提交都有效。

但是对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端一个对象
request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。


综上所述：表单提交，建议使用post。

和服务端交互的三种方式：
1，地址栏输入url地址。get
2，超链接。 get
3，表单。 get 和 post


如果在客户端进行增强型的校验(只要有一个组件内容是错误，是无法继续提交的。只有全对才可以提交)
问，服务端数据后，还需要校验吗？
需要，为了安全性。

如果服务端做了增强型的校验，客户端还需要校验吗？
需要，因为要提高用户的上网体验效果，减轻服务器端的压力。

<from action="http://11.1.21.88:8080" method="post">
   <table border="1" bordercolor="#0000ff" cellpadding=10 width=600>
       <tr>
           <th colspan="2">注册表单</th>
       </tr>
       <tr>
           <td>用户名称：</td>
           <td><input type="text" name="user" /></td>
       </tr>
       <tr>
           <td>输入密码：</td>
           <td><input type="password" name="psw" /></td>
       </tr>
       <tr>
           <td>确认密码：</td>
           <td><input type="password" name="repsw" /></td>
       </tr>
       <tr>
           <td>选择性别：</td>
           <td>
               <input type="radio" name="sex" value="nan" />男
               <input type="radio" name="sex" value="nv" />女
           </td>
       </tr>
       <tr>
           <td>选择技术：</td>
           <td>
               <input type="checkbox" name="tech" value="java" />JAVA
               <input type="checkbox" name="tech" value="css" />CSS
               <input type="checkbox" name="tech" value="html" />HTML
           </td>
       </tr>
       <tr>
           <td>选择国家：</td>
           <td>
               <select name="country">
                   <option value="none">--选择国家--</option>
                   <option value="en">--英国--</option>
                   <option value="usa">--美国--</option>
                   <option value="cn">--中国--</option>
               </select>
           </td>
       </tr>
       </tr>
           <th colspan="2">
               <input type="reset" value="清除数据" />
               <input type="submit" value="提交数据" />
           </th>
       </tr>
   </table>
</form>

pre元素课定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈等宽字体。
<pre>标签的一个常见应用就是用来表示计算机的源代码。

<pre>
class Demo{
   public static void main(String[] args){
       System.out.println("hello world");
   }
}
</pre>

<marquee>标签属性：
width宽 height高 bgcolor背景颜色 direction滚动方向
behavior行为（滚动方式）
值有scroll（连续不断的滚动） slide（滚动一次并停止） alternate（交替式滚动）
scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数
onmouseover="this.stop()" onmouseout="this.start()"
鼠标经过的时候停止，离开的时候继续滚动

<marquee direction="down" behavior="slide">我pia~pia~的飞~~~</marquee>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
X<sub>2</sub>下标
X<sup>2</sup>上标

标签分为两大类。
1,块级标签(元素):标签结束后都有换行。div p dl table title ol ul
2,行内标签(元素):标签结束后没有换行。 font span img input select a

frameset元素可定义一个框架集，它被用来组织多个窗口（框架）
frameset元素在框架集中存在多少列或多少行。必须使用cols或rows属性。
重要事项：
不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果需要为不支持框架的浏览器添加一个 <noframes> 标签，务必将此标签放置在 <body></body> 标签中！
cols="pixels%,*" 定义框架集中列的数目和尺寸。
rows="pixels%,*" 定义框架集中行的数目和尺寸。

<frameset rows="30%,*">
   <frame src="top.html" name="top" />

   <frame set cols="30%,*">
       <frame src="left.html" name="left" />
       <frame src="right.html" name="right" />
   </frameset>
</frameset>

发表于 2013-04-04 17:41 JavaLaw 阅读(213) 评论(0) 编辑收藏举报

公告