简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML视频教程,第4章 HTML超文本(下)
Blogger Information
Blog 11
fans 0
comment 1
visits 7923
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML视频教程,第4章 HTML超文本(下)
鬼牛阿飞
Original
809 people have browsed it

课程目录：
1 HTML列表
2 HTML块元素
3 HTML布局
4 HTML表单
5 HTML文本和密码输入框
6 HTML文本域
7 HTML单选框和复选框的使用
8 HTML下拉列表框
9 HTML下拉列表框多选
10 HTML表单提交按钮
11 HTML重置按钮
12 form表单中的label标签

1 HTML列表

①有序列表ol>li，默认排序方式以数字开头，通过type属性定义其他排序，添加start属性决定起始位置

  1. <ol start="6">
  2.     <li>测试文本1</li>
  3.     <li>测试文本2</li>
  4.     <li>测试文本3</li>
  5. </ol>
  6. <ol type="a">
  7.     <li>测试文本1</li>
  8.     <li>测试文本2</li>
  9.     <li>测试文本3</li>
  10. </ol>

②无序列表ul>li,设置属性disc实心圆，circle空心圆，square方块等
③定义列表dl>dt>dd
<dl><dt>文本</dt><dd>说明补充</dd></dl>

2 HTML块元素

什么是块元素，什么是内联元素？块级元素（block属性）可定义宽width，高height及边框，边距，独占一行；内联元素(inline属性)与之相反。
①标签div
①-1：用来定义文档中的分区或节（division/seltion），没有特定含义，可以用来组合其他html元素的容器
①-2：由于它属于块级元素，浏览器会在其前后折行
①-3：容器、文档布局，取代table传统定义布局，表格table主要是用来显示表格的数据
②标签span
②-1：它用来组合文档中的其他行内元素，无特定含义，与css一起使用
②-2：它用来部分文本设置样式属性

3 HTML布局

大多数网页布局需要配合css来完成，css常用来对元素定位或者为网页面创建背景以及色彩丰富的外观

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.     </head>
  6.     <body>
  7.         <container>
  8.             <header>
  9.             </header>
  10.             <pagebody>
  11.                 <sidebar></sidebar>
  12.                 <mainbody></mainbody>
  13.             </pagebody>
  14.             <footer></footer>
  15.         </container>
  16.     </body>
  17. </html>

4 HTML表单

网站如何与用户进行交互？使用html表单(form)，表单是可以把浏览器输入的数据传送到服务器端，这样服务器端就可以处理表单传送过来的数据
①语法<form method="传送方式" action="服务器文件"></form>
②释义：
②-1：form标签成对出现
②-2：其中action为浏览者输入的数据，被传送到的地方，比方php页面(save.php)
②-3:其中method数据传送的方式为get或者post

5 HTML文本和密码输入框

①语法

  1. <form method="传送方式" action="服务器文件">
  2.     <input type="text/password" name="名称" id="" value="文本" />
  3. </form>

②释义
②-1：当type值为text时，文本输入框；当type值为password时，密码输入框
②-2:位文本框命名name属性，方便后台程序（asp、php）使用
②-3：位文本框设置默认值通过value属性值，一般起提示作用

6 HTML文本域

支持多行文本输入，当用户需要在表单中输入大段文字时，要用到文本输入框
①语法<textarea cols="列数" rows="行数">文本</textarea>
注意在文本域中输入默认值后，其中的cols域rows分别可以通过width域height代替

7 HTML单选框和复选框的使用

在使用表单设计调查表时，为了减少用户的操作，使用选择框是不错选择，html有2种选择框，即单选框和复选框
①语法
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
②释义
②-1:当type为radio时，控件为单选框；当type为checkbox时，控件为复选框；
②-2：value提交数据到服务器端的值
②-3：name属性为控件命名
②-4：checked=“checked”，默认选中
注意：同一组的单选框按钮，neme取值一定要一致，这样才可以起到单选框作用

8 HTML下拉列表框

  1. <select name="city">
  2.     <option value="北京" name="beijing">北京</option>
  3.     <option value="上海" name="shanghai" selected="selected">上海</option>
  4.     <option value="广州" name="guangzhou">广州</option>
  5. </select>

有效节省网页空间，可单选也可多选；当设置option选项时，其中的selected=”selected”为默认选中

9 HTML下拉列表框多选

  1. <select name="" multiple="multiple">
  2.     <option value="">选项卡一</option>
  3.     <option value="">选项卡二</option>
  4.     <option value="">选项卡三</option>
  5. </select>

在标签select中设置multiple=”multiple”属性，当windoes操作系统下多选为ctrl+单击

10 HTML表单提交按钮

<input type="submit" name="" id="" value="提交" />

11 HTML重置按钮

<input type="reset" name="" id="" value="重置" />

12 form表单中的label标签

语法<label for="控价名称"></label>

  1. <form action="" method="post">
  2.     <label>性别</label>
  3.     <input type="radio" name="sex" id="" value="boy"/><label for="boy">男孩</label>
  4.     <input type="radio" name="sex" id="" value="girl"/><label for="girl">女孩</label>
  5.     <input type="radio" name="sex" id="" value="wz"/ checked="checked"><label for="wz">未知</label>
  6. </form>

说明：标签的for属性应该与相邻的控件id属性一致，标签label不会向用户展示任何特殊效果，它的作用是为鼠标改进了可用性；如果你在label标签内点击文本，就会触发控件，浏览器会自动将焦点转到和标签相关的表单控件，自动选中（对别添加label标签for属性的前后变化）

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！