html5基础探索(一)
1、简述
超文本标记语言(英语:HyperText Markup Language，简称:HTML)是一种用于创建网页的标准标记语言。
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。
2、组成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
3、说明
注：根据版本不同进行兼容性适配
HTML5
<!DOCTYPE html>
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
4、字符编码
注：根据版本不同进行兼容性适配
HTML5
<meta charset="UTF-8">
XHTML
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5、常用标签
<b> 文字粗体
<i> 文字斜体
<u> 文字下划线
<br/> 换行
<p> 段落
<pre> 格式化段落
<sub> 上标
<sup> 下标
<hr/> 水平线
<h1>~<h6> 标题
<big> 定义大号字
<em> 着重文字
<small> 小号字
<strong> 加重语气
<code> 定义计算机代码
<abbr> 定义缩写
<address> 地址
<blockquote> 大段引用
6、图片标签
<img src="img/hero.png" />
<img src="img/hero.png" alt="Big Boat"/>
<img src="img/hero.png" width="100" height="100"/>
7、相对路基及绝对路径设置
图示
8、列表
• 有序列表
<ol type=“1,a,A,i,I” start=“3”>
<li>a</li>
<li>b</li>
</ol>
• 无序列表
<ul type=“disk,circle,square”>
<li>a</li>
<li>b</li>
</ul>
9、超链接及锚标记
超链接
• <a href=“www.kaishengit.com”>官方网站</a>
电子邮件超链接
• <a href=“mailto:fankai@kaishengit.com”>给我发邮件</a>
锚标记
• 定义锚标记
• <a name=“news”>下面都是新闻</a>• 使用锚标记
• <a href=“#news”>新闻</a>
10、特殊字符
注：殊字符 -> 转义码
空格 ->
< -> <
> -> >
¥ -> ¥
“ -> "
© -> ©
® -> ®
± -> ±
‰ -> ‰
÷ -> ÷
11、meta标签
网页描述
–<meta name=“description”content=“描述内容">
关键字
–<meta name=“keywords”content=“ 关键字">
12、表格table
table //表格双标签
tr //行
td //列
th //行居中
thead //表头
tbody //表体
tfoot //表尾
caption //表标题
示例：
<table bgcolor="#000" border="0" width="1000" cellspacing="1">
<caption>数据统计</caption>
<thead>
<tr bgcolor="#fff">
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#fff">
<th rowspan="3">三年级一班</th>
<th>小明</th>
<th>15</th>
<th>170</th>
</tr>
<tr bgcolor="#fff">
<th>小东</th>
<th>21</th>
<th>160</th>
</tr>
<tr bgcolor="#fff">
<td>小红</td>
<td>31</td>
<td>166</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#fff">
<td colspan="4" align="right">总共三个人</td>
</tr>
</tfoot>
</table>
表格table其他属性：
背景色 -> bgcolor
背景图片 -> background
文本对齐 -> align
单元格填充 -> cellpadding
单元格间距 -> cellspacing
图示
