李洪强和你一起学习前端之(2)表格、表单、标签语义化

大家早上好!新的一天开始了,学如逆水行舟,不进则退,一起加油吧!

在学习的过程中有任何问题想与我交流的,加我QQ: 990625403

好了,让我们开始今天的学习吧!

 

温故而知新

1 复习昨天的知识

1.1 单标签  (单标签是只有开始标签,没有结束标签)

<!--文本内容--> 文本注释标签  快捷键是: Ctrl +/

<br>      换行标签

<hr>      横线标签

1.2 双标签

<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 超链接a以及属性

<a href = "02.html"  title = "描述">跳转</a>锚链接

<p id = "db"></p>

<a href = "#db">返回顶部</a

下载:(在a标签中放一个压缩文件)

<a href = "1.rar">下载</a>

 

给a标签设置跳转到新的页面:(默认是跳转到当前页面)

<a href = "02.html"  target ="_blank"  title = "描述" ></a>

如果设置全局的属性是跳转到新的页面: 

在head中: 

<base target = "_blank">

锚链接: 

是a标签的另一种用法

<p id = "db"></p> /*id属性与js配合使用*/

<a href = "#db">返回顶部</a>

 

1.5列表

第一类: 无序列表

<ul>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

第二类:有序列表

<ol>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ol>

第三类: 自定义列表

 

<dl>

  <dt></dt>

  <dd></dd>

  <dd></dd>

  <dd></dd>

 </dl>

1.6特殊字符

 &lt;    <  小于号

&gt;    >  大于号

&nbsp;       空格

以上是昨天的内容

 


 

 

2 新知识

2.1 Meta标签介绍[本次四种用法均在head标签里面]

<meta charset = "utf-8">

Charset:字符集

ASCII

ANSI

Unicode

Gbk

Gb2312

utf-8: 编码格式

1:<meta name = "keywords"  content = "前端培训">关键字

作用: 对网站进行优化的作用 (SEO)对搜索的时候比较好

不推荐写太多的字

一方面: 通过技术,另外去百度买

2:<meta name = "descroption" content = ""> 对网站的描述

 

3:<meta http-equiv = refresh content = "5"; url ="http://www.baidu.com">

这是网页重定向 

一秒或者几秒钟跳转到另一个页面

4:<meta name = "Author" content = "李洪强">告诉走索引擎你的站点的制作的作者

5:

 

2.2Link标签介绍[本次两种用法均在head里面]

 

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

 

引入外部样式表

 

2: <link rel = "icon" href = "favicon.ico">

给网页title中放置小图标

注意: 只能放置"ico"格式的图片,其他格式的不可以

 

2.3表格 (table)

作用: 显示数据(原来是网页布局用的)

 

组成

  table    定义表格(告诉浏览器,我要定义一个表格)

  tr      行

  td       列(单元格)

 

给大家举个例子:

 

<table>

  <tr>

    <td>姓名</td>

    <td>班级</td>

    <td>职业</td>

    <td>籍贯</td>

 

  </tr>

</table>

属性介绍:

border: 设置表格边框

width : 设置表格宽度

Height: 设置高度

cellspacing 设置单元格之间的距离

cellpadding: 文字距离单元格之间的距离

bgcolor = "red"设置背景颜色

align = center/left/right  让表格中的文字居中

这个属性如果给 td设置的话就是让文字居中,如果给表格设置的话是让表格居中

 

<th></th>  设置表格标题,用法和td一样

 

<table border = "1"  width = "400"  height = "300"  cellspacing = "0"  cellpadding = "20"

bgcolor = "red">

  <tr>

    <td>姓名</td>

    <td>年龄</td>

    <td>职业</td>

    <td>籍贯</td>

  <tr>

 

  <tr>

    <td>小红</td>

 

    <td>28</td>

 

    <td>挖掘机</td>

 

    <td>山东</td>

 

  <tr>

 

设置表格表头居中

<caption><h3>人员信息表</h3></caption>

 

caption标签是放在table里面的

注意: h系列的标签不能嵌套!

表格结构

<table>

  <thead></thead>  头

  <tbody><tbody>  身体

  <tfoot><tfoot>     脚

</table>

表格结构的练习

 

补充知识

单元格的合并

横向和合并

<tr>

  <td></td>

  <td  colspan = "2"></td>

  <td></td>

</tr>

纵向合并:

<tr>

  <td></td>

  <td  rowspan = "2"></td>

  <td></td>

  <td  rowspan = "2"></td>

</tr>

回顾上午知识:

mata:

01浏览器对文档进行解析,不会出现乱码 

02解决网站优化

03 description 对整个网站进行描述

04 网页重定向

link标签

引用外部样式表

给网站设置小图标

 

table

属性: border:边框

width

height

cellsspacing

cellpadding

 

3 表单 (form)

3.1作用

表单的作用是用来收集信息

3.2组成

->1-提示信息

->2-表单控件

表单域

表单介绍:

<form  action = "">

 

</form>

属性:

action: 处理用户数据信息

Method :get / post

 

Get数据提交:

  通过地址栏的方式进行数据提交,将用户输入的信息显示出来

  Get提交安全性差

 

Post提交

  数据通过后台进行提交,不会将用户信息显示出来,安全性比较好

 

3.3 表单控件

<!--文本输入框-->

用户名: <input  type  = "text"  maxlength = "6">

属性:

maxlength:       设置文本输入框最多能输入多少字符

readonly = "readonly"   设置文本输入框为只读(只能读不能编辑)

disabled = "disabled"     控件属于非激活的状态

name = "username"  给输入框设置名称

Value = ""       设置或者显示输入的值(名字不能取相同的)

 

密码输入框:

<!--密码输入框-->   

密码: <input  type = "possword">

属性用法与文本输入框的用法一样

 

单选按钮

<!--单选按钮-->

性别: <input  type = "radio"  name = "xb">男<input  type = "radio"  name "xb">女

注意: 实现单选按钮效果一定要给控件设置相同的名称

属性:

checked = "checked"  设置默认选中项

性别: <input  type "radio"  name = "xb"  checked = "checked">男

 

注意: 如果给男和女两个按钮都设置了checked的话,那么会显示第二个

下拉列表

<select>

  <option>山东</option>

  <option>山西</option>

  <option>河南</option>

  <option>河北</option>

  <option>北京</option>

</select>

 

属性:

设置默认选中项

<option  selected = "selected">北京</option>

multiple = "multiple"  可以实现多选效果

省: <select  multiple = "multiple">

 

多选控件:

<input  type = "checkbox"  checked = "checked">抽烟

<input  type = "checkbox"  checked = "checked">喝酒

<input  type = "checkbox"  checked = "checked">烫头

设置默认选中项: checked = checked

 

多行文本输入框

<textarea>

 

 

</textarea>

 

图片上传控件

<input  type = "file">

按钮系列:

<!--表单提交按钮-->

<input  type = "submit">

<!--普通按钮-->

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

注意: 该按钮不能进行表单提交,通常和js代码配合使用

<!--重置按钮>

<input  type = "reset">

将控件中的值恢复到默认值状态

<!--图片按钮-->

<input  type = "image"  src = "按钮.jpg">

该控件也可以进行表单的提交

 

表单分组控件

<fieldset>

    <legend>用户注册</legend>

 

</fieldset>

 

 

 

Emmet缩写语法

http://www.cnblogs.com/cnjava/archive/2013/07/30/3225174.html

 

表单补充:

<!--网址判断-->

<input  type = "url">

<!--邮箱判断-->

<input  type = "email">

<!--判断日期-->

<input  type = "date">

<!--判断时间-->

<input  type = "time">

<!--判断输入数字-->

<input  type = "number">

<input  type = "range"  max = "100"  step = "5">

 

4 标签语义化

  4.1  概念: 什么样的标签干什么样的事

  4.2  意义: 

      

  

4.3什么样的网页语义化比较好

  让网页裸奔(css样式去掉),结构依然清除

4.4做法

  1.尽可能少的使用无语义的标签div和span

  网页布局

  2.在语义不明显时,既可以使用div或者p时,尽量使用有语义的标签

  3.不要使用纯样式标签,如:b,font,u等,改用css设置

  4.需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i)

 

以后大家在写代码的过程中,尽量使用有语义的标签

  本节知识点到这里就结束了,大家掌握的怎么样,让我们一起进步吧!

                      2017年3月14日

                      李洪强于北京

 

posted @ 2017-03-14 11:19  李洪强  阅读(360)  评论(0编辑  收藏  举报