二.HTML基础(2)

发表于 | 分类于 | | 阅读次数

1. 复习与回顾

#1.1 单标签

1
2
3
4
5
<!-- 文本内容--> 注释标签 Ctrl+/
<br> 换行标签
<hr> 横线标签

1.2 双标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p></p> 段落标签
<hn></hn> n 的取值 1-6 标题标签
<font size=”10” color=”red”></font>
<strong></strong> <b></b> 文本加粗
<em></em> i 文本斜体
<ins></ins> u 文本下横线
<del></del> s 删除线

1.3 img标签与属性

src 属性:

  • alt 属性 : 图片无法显示，对图片的描述
  • title 属性: 鼠标放到图片上显示的文字
  • width 属性 : 宽度
  • height 属性 : 高度

1.4 锚链接

1
2
3
<p id="cat">猫</p>
<a href="#cat">抓猫</a>

1.5 列表

  • 无序列表
1
2
3
4
5
<ul>
    <li></li>
    <li></li>
</ul>
  • 有序列表
1
2
3
4
5
<ol>
    <li></li>
    <li></li>
</ol>
  • 自定义列表
1
2
3
4
5
6
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

2. 标签介绍

2.1 Meta标签介绍 (作用在head标签)

    • Charset ：字符集
    • ASCII
    • ANSI
    • Unicode
    • Gbk
    • Gb2312
    • Big5


  • 作用 : 对网站进行优化的作用SEO与网址的描述.


  • 作用 : 网址重定向

2.2 Link标签介绍 (作用在head标签)


  • 作用 : 给网页 titile 中放置小图标


  • 作用 : 引入外部样式表

2.3 表格 (table)

作用 : 显示数据

  • 组成 :
    • table 定义表格
    • tr 行
    • td 列 (单元格)

  • 属性介绍 :

    • border : 设置表格边框
    • width : 设置表格宽度
    • Height : 设置高度
    • cellspacing : 设置单元格之间的距离
    • cellpadding : 文字距离单元格边框的距离
    • bgcolor=”red” : 设置背景颜色
    • align=center left| right : 给 td 或者 tr 设置让文字居中
    • table 设置表格居中

  • 设置表格标题，用法和 td 一样

  • 设置表格表头
    <caption> <h3>课程表</h3></caption>

  • 单元格的合并

    • 横向和合并
1
2
3
4
5
<tr>
        <td></td>
        <td  colspan="2"></td>
        <td></td>
</tr>
  • 纵向合并
1
2
3
4
5
<tr>
        <td></td>
        <td  rowspan="2"></td>
        <td></td>
</tr>

3. 表单 (from)

3.1 作用

表单的作用用来收集信息

3.2 组成

1
2
3
<form  action="">
</from>
  • 属性 :
    • action | 处理用户数据信息
    • Method : get | post
      • Get 数据提交 : 通过地址栏的方式进行数据提交,将用户输入的信息显出来.
      • Post 提交 : 数据通过后台进行提交,不会将用户信息显示出来,安全性比较好.

3.3 表单控件

表单文字输入

1
2
用户名  :  <input type="text" maxlength="6">
密码  :  <input type="password">

  • 属性 :
    • maxlength : 设置文本输入框最多能输多少字符
    • readonly=”readonly” 设置文本输入框为只读（只能读不能编辑）
    • disabled=”disabled” 控件属于非激活的状态
    • name=”username” 给输入框设置名称
    • Value=”” 设置或者显示输入的值

单选按钮

1
2
<input type="radio" name="xb"  checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女

  • 属性 :
    • checked=”checked” 设置默认选中项

下拉按钮

1
2
3
4
5
6
7
<select multiple="multiple">
      <option>山东</option>
      <option>山西</option>
      <option>河南</option>
      <option>河北</option>
      <option  selected="selected">北京</option>
</select>
  • 属性 :
    selected=”selected” 设置默认选中项
    multiple=”multiple” 可以实现多选效果

下拉列表分组显示

1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="name">
	<optgroup label="北京市">	 	
			<option> 西城区 </option>
			 <option>东城区</option>
	</optgroup>
	 <optgroup label="山东省">  	 	
			<option> 西城区 </option>
			<option>东城区</option>
	</optgroup>
</select>

多选控件

1
2
3
<input type="checkbox" checked="checked">java
<input type="checkbox">android
<input type="checkbox">ios

多行文本输入框

1
2
3
<textarea>
</textarea>

图片上传控件

1
<input type="file">

按钮系列

1
2
3
4
<input type="submit"  value="登录">
<input type="button"  value="普通按钮" >
<input type="reset" value="重置按钮">
<input type="image" src="图片按钮.jpg">`

表单分组控件

1
2
3
<fieldset>
    <legend>用户注册</legend>
</fieldset>

表单补充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 网址判断 -->
<input  type="url">
<!-- 邮箱判断 -->
 <input type="email">
<!-- 日期控件 -->
<input type="date">
<!-- 时间控件 -->
<input type="time">
<!-- 只能输入数字的控件 -->
<input type="number"  step="5">
<!-- 进度条 -->
<input type="range"  max="100"  step="5">