HTML表格、表单、标签语义化

Posted on   |     |   Views

HTML5标签结构

sublime 快捷键 !+tab 可以写成HTML5结构

字符编码

  • ASCLL
  • ansi
  • unicode
  • GBK
  • GB2312(z中文简体)
  • BIG5(只支持繁体字)
  • UTF-8(国际通用编码)

meta标签

标签说明
1
2
3
4
5
6
7
8
9
<!--编码-->
<meta charset="utf-8">
<!--关键字-->
<meta name="keywords" content="java培训, ios">
<!--name 页面里面的关键词 content 里面是给SEO用的-->
<!--网页描述-->
<meta name="description" content="给搜索引擎看的，可以看得到的内容">
<!--网页重定向-->
<meta http-equiv="refresh" content="5;http:www.itcast.com">

link标签

调用外部样式表：

1
<link rel="stylesheet" href="1.css">

ico小图标，在网页显示时的标题的前面：(必用)

1
<link rel="icon" href="../favicom.ico">

简单表格

用来存放数据的，表格是对网页重构（css+div）一个有有益补充

  • 行 tr
  • 列 td

简单结构（1行2列）

1
2
3
4
5
6
<table border="1" width="300" height="100" cellspacing="0" cellpadding="10">
      <tr>
        <td></td>
<td></td>
</tr>
</table>

表格属性介绍

  • 边框 border=”1”
  • 宽度 width=”300”
  • 高度 height=”100”
  • 单元格与单元格的距离 cellspacing=”2”，默认值2
  • 内容到边框的距离cellpadding=”2” 默认值0
  • 背景色 bgcolor=”yellow”
  • 对齐方式 align left|center|right
    • 如果align放到tr或者td里面是内容的对齐方式
    • 如果align放到table里面，是表格的对齐方式
  • 表格标题 用法和td一样
1
2
3
4
5
6
7
8
9
10
11
<table border="1" width="300" height="100" cellspacing="0" cellpadding="10">
  <caption>表头</caption>
  <tr>
    <th></th> 表格的标题
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

表格的标准结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <caption></caption>
  <thead>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

表格单元格的合并

  • 在同一行上合并 colspan=”2”
  • 在同一列上合并

表单

用来收集信息

  • 提示信息
  • 表单控件
    • action：用来处理信息（信息提交给谁，把文件提交给那个文件处理）
    • method：get|post 传递信息的方法

get 安全性很低，通过浏览器的地址栏传递信息，post 安全性高，通过action文件处理，它们的区别如下

  1. GET没有请求主体，使用xhr.send(null)
  2. GET可以通过在请求URL上添加请求参数
  3. POST可以通过xhr.send(‘name=itcast&age=10’)
  4. POST需要设置
  5. GET效率更好（应用多）
  6. GET大小限制约4K，POST则没有限制

表单控件

1
<form action="1.php" method="post"></form>

单行文本输入框

1
<input type="text" name="username" value="Hiraku" maxlength="16" readonly="readonly" >
  • name 文本输入框的名字
  • value 接收的默认值 文本框的值
  • maxlength 输入的最大字符长度
  • readonly 输入框为只读状态
  • disabled 输入框为未激活状态

密码输入框

1
<input type="password" name="密码输入框" >

单行文本输入框的属性对密码输入框都适用

单选框

1
2
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女

当将单选框name值设置相同的时候才能实现单选效果, checked 设置默认选中项。

下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
<select>
  <option selected=”selected”>下拉列表选项</option>   
  <!--设置默认选项-->
</select>
<!-- multiple="mutiple" 下拉列表多选 设置下拉列表为多选项 -->
<optgroup label="甘肃省">   对下拉列表进行分组
  <option value="">定西市</option>
  <option value="">兰州市</option>
  <option value="">庆阳市</option>
  <option value="">天水市</option>
  <option value="">嘉峪关</option>
  <option value="">酒泉市</option>
</optgroup>

多选框

1
2
3
4
<input type="checkbox" checked="checked">动漫
<input type="checkbox">电影
<input type="checkbox">电子竞技
<input type="checkbox">音乐

checked 默认选项

多行文本输入框

1
<textarea name="输入框" id="" cols="30" rows="10"></textarea>
  • cols 输入字符的长度
  • rows 输入字符的行数

上传文件控件

1
<input type="file">

提交按钮

1
<input type="submit">

普通按钮

1
<input type="button" value="普通按钮">

普通按钮不能实现表单信息提交，常配合js使用

图片按钮

1
<input type="image" src="">

表单信息分组

1
2
3
4
5
6
<form>
<fieldset>
    <legend>注册信息</legend>
<input>
</fieldset>
</form>

重置按钮

1
<input type=”reset” value=”重置信息”>

HTML5表单控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="1.php" method="post">
    <!-- 判断网址 -->
    <input type="url"><br/><br/>
    <!-- 判断邮箱 -->
    <input type="email"><br/><br/>
    <!-- 日期控件 -->
    <input type="date"><br/><br/>
    <!-- 时间控件 -->
    <input type="time"><br/><br/>
    <!-- 数字控件 -->
    <input type="number"><br/><br/>
    <!-- 滑块控件 -->
    <input type="range" max="150" min="2" step="5"><br/><br/>
    <input type="submit">
</form>

标签语义化

标签语义化即：根据内容的结构化（内容语义化），选择合适的标签

注意事项：

  • 尽可能少的使用无语义的标签div和span
  • 在语义不明显是尽量用p,即可使用div也可使用p
  • 不要使用纯样式标签:
  • 需要强调的文本尽量用和

好的标签语义化网站：去掉CSS，结构依然很清晰

感谢您的支持！