李洪强和你一起学习前端之(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 href = "1.rar">下载</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: 编码格式

<meta name = "keywords"  content = "">

作用: 对网站进行优化的作用 SEO

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

网页重定向

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

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

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

给网页title中放置小图标

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

引入外部样式表

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"