HTML列表,表格,表单标签

一.注释

代码中进行补充说明,不参与页面解析,可提高代码可读性

格式:    </--注释内容-->  

快捷方法:选中注释内容---crtl+/                     [想去掉注释的话还是选中后crtl+/]

                                        ---苹果系统:CMD+/

由于HBiilder里自带Emmet插件(可自动生成html,css标签),

eg:打标签时可以直接打h2+tab键,系统自动补齐标签代码

代码缩进更美观---crtl+K

二.列表标签

有序列表更强调列表项之间的顺序关系

1.无序列表

(1.)格式

<ul>       

       <li> 内容</li>      

 </ul>

[ul(unordered lists)--无序列表的外边界]

[ li  (list item) --列表项]

(2.)emmet方法简便操作:

h3+ul中:“+”表示兄弟(并列)关系

>:表示包含关系

*3:表示有3个li标签

输完之后按tab键就出来了下图的代码格式

(3.)3种无序列表项类型

<ul type="disc">

(默认类型)

<ul type="circle">

<ul type="square">

注:html5中不再支持<ul>type属性,建议使用css代替

2.有序列表

(1.)只需把无序列表的<ul>换为有序列表的<ol>

【ol(order lists)--有序列表的外边界】

按tab后出现所要的代码形式,往里填内容后如下图:

(2)5种有序列表类型

如果想从特定的数字开始排序,使用start标签定义序列起始值 <ol type=" " start="  ">

 <ol type=" " start="  ">

有序列表和无序列表同样可以相互嵌套使用,形成多级列表效果

3.自定义列表   --   <dl>标签

起到名词解释或问答效果,即每个列表项都是有标题,内容默认缩进的形式

【dl(definition lists)---自定义列表的外边界】

【dt(definition term)--列表项中的标题】

【dd(definition description)--列表项中的内容】

格式:

<dl>

        <dt>名词或问题</dt>

        <dd>解释或答案</dd>

</dl>

三.表格标签

1.输入table--tab键,自动生成代码

<table boder="" cellspacing="' cellpadding="">
    <tr><th>Header</th></tr>
    <tr><td>Data</td></tr>
</table>

【table---表的外边界】

【tr(table row)---表格的一行】

【td(table data cell)---一个单元格】

【th(table head)---表头】

一行三个单元格

两行,每行三个单元格

2.emmet语法快速生成多行多列

1)代码

(tr>td*7)*9

以上代码输完之后按tab键直接生成(9行7列)

2)表格相关设置:

(1)border(表格边框宽度)--- px像素值

(2)cellspacing(单元格之间的距离)  ---px像素值

   (3)  cellpadding(文字到她外边单元格之间的距离) ---默认1px

eg:

(4)width(表格宽度)  ---px/百分比

500px

80%

(5)height(表格高度)---px/百分比

(6)bgcolor(背景颜色)---white/red/green

(7)align(表格在网页中的对齐方式)---left/right/center

注:以上属性在html5中被废弃,可以用css替代

3)合并单元格

1.colspan(column):内容贯穿几列单元格------横向合并
<td colspan=""> 内容 </td>

2.rowspan(row):内容贯穿几行单元格------纵向合并

把对应单元格注释掉,表格显示才会正常

3.举例(做一个课程表)

源代码:

<title>课程表</title>
		<table border="4" cellspacing="10px" cellpadding="10px" width="80%">
			<!-- <tr><th>Header</th></tr> -->
			<tr>
				<td colspan="2"></td>
				<!-- <td></td> -->
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
				<td>五</td>
				
			</tr>
			<tr>
				<td rowspan="5">上午</td>
				<td>1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="7" align="center">中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;午</td>
			</tr>
			<tr>
				<td rowspan="3">下午</td>
				<td>6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>7</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> -->
				<td>8</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

网页效果:

补充:

th ---表头,表格第一行默认加粗【想要加粗文字处理用b标签,还可将td改为th】

 caption ---表格的标题

四.表单标签

1.form,action,method

<form action="网址" method="get">
      <!-- form:定义表单,收集内部控件的信息发送给指定页面 -->
	  <!-- action:定义表单发送的目标地址>
	  <!-- method:定义表单发送方式 -->
			<input type="submit" value="按钮上的文字"/>
      <!-- input:定义文本框及提交按钮 -->
</form>

input 

<form action="https://www.baidu.com/" method="get">
			<input type="text" name="wd" />
			<input type="submit" value="按钮"/>
		</form>

2.method:get,post

1)

#用于表示当前网页

get方式提交:以“明文”方式发送,网址长度不超过2048个字符,用于发送非安全数据
post方式提交:表单信息包含在http1请求正文中,不在网址上显示,无大小限制,可发送大量数据,用于发送敏感信息,个人信息或者文件上传 

2)键值对:"名称/值”的形式,通常用等号或冒号来连接

键:值的名字或编号       值:要存放的数据

(1)get 方式提交多个数据时形成的网址格式为:

目标网址 ?键1=值1 & 键2=值2

eg:

网址栏:   .html?username=女神&password=520#

3.属性type,name, value, placeholder

  1).type

控制 input 控件的交互形式

  2).name

name是控件向服务器提交信息时的“键名”,是自定义的,可使用字母、数字、下划线、中划线,不能包含其他特殊字符和空格

  3).value

控制默认填充的数字,用来设置默认值供用户参考

 点击提交按钮时,name和value会以键值对形式发送给服务器

 4).placeholder

占位文字,光标聚焦输入文字时消失,即用鼠标定义文本框时可让文字自动消失

  4.常见文本框设置

文本框type属性
           type="text"           文本输入框
           type="password"                 密码输入框
           type="checkbox"                 复选框
           type="radio"                单选框
           type="file"                文件上传
           type="button"                普通按钮
           type="reset"                重置按钮

           type="submit"

               表格提交按钮

                         备注:checked="checked"选项默认选中的状态

1):单选框

性别:<input type="radio" name="gender" value="1" checked="checked" />男
	  <!-- name值只有设置得相同才会出现互斥,从而起到单选的效果 -->
      <!-- checked="checked"设置默认选项 -->
      <input type="radio" name="gender" value="0"  />女

2):复选框

<p> 爱好:
      <input type="checkbox" name="hobby" value="read" />看书
	  <input type="checkbox" name="hobby" value="piano" />弹琴
	  <input type="checkbox" name="hobby" value="music" />听音乐
	  <input type="checkbox" name="hobby" value="sports" />运动
</p>

3):文件上传按钮 

【配合post形式上传文件】

4):图片形式的按钮

<input type="image" src="  " title="按钮"/>

5):html5中新定义的date格式------定义日期输入框

6):hidden----定义隐藏的输入字段

<p>
   <input type="hidden" name="token" value="i336677d" />
</p>

7): select------下拉列表框

所在地:
		<select name="province">
			<option value="bj">北京市</option>
			<option value="zj">浙江省</option>
		</select>

所在地:
<select name="province" multiple="multiple"  size=“3”>
<!--multiple="multiple"  可以选多个选项
<!--size:表示选中的个数设置-->
	<option value="bj" selected="selected" >北京市</option>
<!--selected="selected"  用于select里被默认选中的状态-->
	<option value="zj">浙江省</option>
</select>

 8)textarea------文本区

<textarea name="profile" id="" cols="30" rows="10" placeholder="我的志愿经历">默认文本内容</textarea>
<!--cols=列数,rows=行数-->

9)fieldset------表单分组

<fieldset id="" style="width:26%"><!--fieldset:为表单分组-->
			<legend>调查小问卷</legend><!--legend:为fieldset标签定义标题-->
            <form>            </form>  
</fieldset>