1.2基本格式
1. <!DOCTYPE html> 文档声明,告诉计算机这是一个HTML5 文档, 不分大小写但一般都这样写。
对比一下HTML4 的声明文档:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd ">
2. <html> </html> 双标签,所有的文档内容均包含在这个标签里面。
3. <head></head> 不可见内容,包含文档标题、字符编码等。
4. <body> </body> 可见内容, 图片、文本表单等所有可见内容
<!DOCTYPE html> <!-- 文档声明 -->
<html> <!-- 表示文档的开始 -->开始标签
<head> head标签存放文档的基本信息,不可见元素
<meta charset="utf-8"> <!-- 声明字符编码 -->
<title></title> <!-- 声明文档标题 -->
<script> alert(‘xxx’)</script> 弹出对话框输出内容“xxx”
</head>
<body> <!—body标签存放文档可见内容 -->
</body>
</html> <!-- 表示文档结束 -->结束标签
1.3 元素的概念与3个常用标签
HTML 元素指的是从开始标签到结束标签的所有代码。
开始标签
元素内容
结束标签
<h1>
h标签用来表示标题
</h1>
<p>
p标签表示一个段落
</p>
<hr>
我是一个单标签,我会给文档加一个横线
*注意我没有结束标签哦!
1.5 文本元素
文本元素,就是讲一段文本设置成相匹配的结构和含义
1.b元素: 我的作用就是 加粗文字;
2.br元素: 我的作用就是强制换行;在同一个段落要换行用这个<br>
3.i元素: 我的作用就是让 文字倾斜;
4.del元素:我的作用就是
删除文子5.strong元素:我的作用是强调一段文本我的实际作用也是加粗文字.
6.wbr元素: 我的作用是表示安全换行Theshiyigehenchanghenchangdedanci.
再来对比一下没有安全换行的文本Theshiyigehenchanghenchangdedanci.
7.em元素: 我的作用是强调,我的实际作用也是让文字倾斜
8.s元素:我的实际作用就是
删除线;从语义上来看,表示不准确的删除。9.u元素: 我的实际作用就是 给文字加下划线
10.ins元素: 我的实际作用也是 给文字加下划线;从语义上来看,是添加一段文字,起到强调作用。
11.small元素: 我的作用是 添加小号字体 ,从语义上来看,用于免责声明和澄清声明。
12.sub和sup元素:我们的作用就是添加下标和上标: sub表示下标:HTML5;sup表示上标我的房子100m2
13.dfn元素: 我的作用从语义上看表示定义术语,是对一个词或短语的解释,实际效果就是倾斜文本
14.abbr元素: 我的作用是表示一段文本的缩写,在文本显示上没有任何实际效果,比如WTO
15.q元素: 我的作用从语义上看表示引用来自其他地方的的内容, 我的实际作用就是给文本加上双引号
16.code等元素: code元素用来表示计算机代码片段;function(){}
var元素用来表示编程语言中的变量; num
samp元素表示程序或计算机的输出您没有权限浏览该网页
kbd元素表示某部分内容是由用户利用键盘输入如:请按Enter键
*这几个元素属于英文范畴,必须将lang="en",英语才能体现效果。
17.ruby元素: 我的作用是表示位于表意文字上方或右方的注音符<ruby>英雄<rt>yingxiong</rt></ruby>***不常用,浏览器支持不太好,很多浏览器不支持此功能
18.cite元素: 我的作用从语义上来看就是表示引用其他作品的标题。 实际效果就是文本
19.bdo元素: 我的功能是设置文字方向,必需使用dir属性才可以设置,共两个值,rtl(从右到左);ltr(从左到右)默认为ltr
rtl就是从右到左,即:right to left
20.mark元素: 我的作用是突出显示文本,用于记号, 我的实际作用就是加上一个黄色的背景。
21.time元素: 我的作用从语义上来看就是表示日期和时间,例如 2015-9-18
22.span元素: 我的作用就是表示一般性的文本,没有特殊效果
dir 属性规定元素内容的文本方向, 共两个值,rtl(从右到左);ltr(从左到右)默认为ltr ;
dir 属性在以下标签中无效:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>以及<script>。
1.7超链接1
学习要点:掌握a标签建立连接的几种方式
1.连接其他网址(输入要连接到的网址)
<a href="http://www.baidu.com">1.百度一下</a><br>
2.连接本地文档 (直接输入本地文件地址)
<a href="1_3.html">八阵图</a><br>
3.图片链接(必须假后缀名啊)
<a href="http://www.baidu.com"> <img src=”图片地址.后缀名” alt=” ”> </a><br>
这个是元素的嵌套,图片地址必须要有后缀名不然无法打开 通过点击图片会跳转到对应链接
src 属性:加图片链接地址,可以是本地的也可以是网页的;<img src="http://www.baidu.com/img/bdlogo.gif" />
<img src="bdlogo.gif" />
4.邮箱连接(服务器配置要发邮件就会自动打开)
<a href="mailto:[email protected]">联系我</a><br>
5.下载链接(服务器要提供下载的东西,当浏览器不能解析就是下载)
<a href="11.tar.gz">11</a>
目录语法:
同一个目录:直接写文件名称 或 ./ 文件名 比如: tp.jpg 或者 ./tp.jpg
在下级(子)目录: xxx/tp.jpg
在下下级目录: xx/xxx/tp.jpg
在上级(父)目录: ../tp.jpg
在上上级目录: ../../tp.jpg
1.7超链接2
1.target 属性的四个值:_self:点击超链接时就在当前位置打开页面,默认值;
<a href="1_3.html" target=”_self”>八阵图</a><br>
_blank:
点击超链接时新建一个窗口打开
;
<a href=”http://www.baidu.com target=”_blank”>百度</a>
_top(
最顶层框架
)
和
_parent(
父框架
)
2.id属性:通用属性,可以理解为元素的身份证;name属性:可以理解为元素的名字
<a href=”#id属性值”>锚点1</a> 作用:点击上面的就会定义到下面对应的内容
<a href=”#id属性值”>锚点2</a> href属性值是#+下面定义的id属性值
<a href=”#id属性值”>锚点3</a>
<a id=”a”>锚点1 只有<a>标签没有结束标签
这里就可以输入锚点1的内容了
<a id=”b”>锚点2
锚点2内容
<a id=”c”>锚点3
锚点3内容
1.9元素嵌入图片
img的属性
1.src:必要属性,指定图片来源的路径;2.alt属性:当图片无法显示时的替代文字;
3.width和height属性,指定图片的宽度和高度;单位是像素px或百分比(width百分比是相对与body页面大小,heigth百分比无意义)
<img src=”1.png” alt=”当图片无法显示时的替代文字” width=”100px” height=”100px” title=”11221”>
title属性
title属性:属性值为字符串,效果是当鼠标移动到该位置时显示该内容。
1.10绝对路径和相对路径
绝对路径
需要指出链接资源的绝对位置,与你的HTML文档的位置无关;
1. 服务器中的位置:href="http://www.nipic.com/show/2/52/8144173k9c3cc84f.html"
2. 本地存储的位置:file:///D:\桌面\HTML5课程\HTML5入门实例课程\lesson9\西施.png
如果链接资源与你的HTML文档位于同一个路径或者文件夹里,可以省略;否则必须指出相对路径,和HTML文档的位置有关;
目录语法:
同一个目录:直接写文件名称 或 ./文件名 比如:tp.jpg或者./tp.jpg
在下级(子)目录:xxx/tp.jpg
在下下级目录:xx/xxx/tp.jpg
在上级(父)目录:../tp.jpg
在上上级目录:../../tp.jpg
1.11列表
无序列表
1无序列表的基本格式
<ul>定义无序列表,<li>是列表项
<ul>
<li> 列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
……………
</ul>
2无序列表type的属性
无序列表的type属性有三个值:1.disc(默认值实心小圆;2.circle空心小圆;3.square小方块
<ul style="list-style:none">这个样式表示列表前面什么都没有
<ul type=”disc”>
<li> 列表内容</li>
<li>列表内容</li>
</ul>
<ul type=”circle”>
<li> 列表内容</li>
<li>列表内容</li>
</ul>
注意:type属性,html5不提议直使用type属性设置样式,应该用css样式表实现内容和样式的分离来。css可以设置复杂的样式。
有序列表1有序列表的基本格式
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
……………
</ol>
2有序列表的type属性
整数(默认值);2.大(小)写字母A\B\C...3.大小写的罗马字母:i ii .../I II III
<ol type=”a/A”>
<li> 列表内容</li>
<li>列表内容</li>
</ol>
<ol type=”I/i”>
<li>列表内容</li>
<li>列表内容</li>
</ol>
3有序列表的start属性
定义列表的开始序号,比如第一项不是数字1,而是从10开始.......
<ol start=”10”>
<li>列表内容</li>
<li>列表内容</li>
</ol>
4有序列表的value属性
定义某个单个列表项的序号.......value属性是放在<li>标签里面的
<ol type=”1”>
<li>列表内容</li>
<li>列表内容</li>
<li value=”10”>列表内容</li>
<li>列表内容</li>
<li value=”19”>列表内容</li>
<li>列表内容</li>
</ol
自定义列表
自定义列表项组成:由 dl定义列表;dt定义列表项目;dd定义列表内容
<dl>
<dt>列表名称1</dt>
<dd>列表内容</dd>
<dt>列表名称2</dt>
<dd>列表内容</dd>
<dt>列表名称3</dt>
<dd>列表内容</dd>
</dl>
1.12表格元素
学习要点:
表格的基本构成
表格的属性
表格的合并
table:表格的范围,外框;用来定义表格,表格的其他元素包含在table标签里面;
tr: 表格的行;
td:表格的单元格
border属性定义表格的边框宽
<table border=”1”>
<tr><td>单元格1</td><td>单元格2</td></tr> 第一行
<tr><td>单元格1</td><td>单元格2</td></tr> 第二行
</table>
<table style=”border:1;text-align:center;margin:0”> margin属性设置页面外边距为0,margin:0; padding:0; list-style:none;全部布满网页中所有的元素的外边距和内边距都为0项目列表前的类型为无
2.关于表格的一点说明
HTML5中删除了HTML4中table的大部分属性,HTML5中推荐使用CSS设定原来table属性实现的效果
3.th元素,为表格添加标题行
th元素用来定义表格的标题单元格,他是tr元素的子元素,必须放在tr标签里边(和td元素一样);tr元素的内容会自动居中对齐并加粗文字
<table>
<tr><th>标题1</th><th>标题2</th><th>标题3</th></tr> --->表格的标题
<tr><td>单元格1</td><td>单元格2</td></tr> 第一行
<tr><td>单元格1</td><td>单元格2</td></tr> 第二行
……………………
</table>
4.colspan元素用来横向合并单元格
属性值为正整数,表示该单元格合横向合并的列数,语法为 <td colspan="3"> </td>则在右边两列删除2个单元格才行
<table>
<tr><th colspan=”2”>标题1</th><th>标题2</th></tr> --->表格的标题
<tr><td colspan=”2”>单元格1</td></tr> 第一行
<tr><td>单元格1</td><td>单元格2</td></tr> 第二行
……………………
</table>
5.rowspan元素用来纵向合并单元格
属性值为正整数,表示该单元格合纵向向合并的行数数,语法为 <td colspan="3"></td>则在下面两行分别删除一个单元格才行
<table>
<tr><th rowspan=”3”>标题1</th><th>标题2</th><th>标题3</th></tr>
<tr><td >单元格1</td><td>单元格2</td></tr> 第一行
<tr><td>单元格1</td><td>单元格2</td></tr> 第二行
<tr><td>标题1</td><td>标题2</td><td>标题3</td></tr>
<tr><td>单元格2</td></tr>
<tr><td>单元格2</td></tr>
……………………
</table>
6.caption元素用来为表格添加标题
用来制定表格的标题或者说明;是table的子元素,必须放在table中使用。
caption的align属性可以 设置标题的位置,但是,在HTML5中已经被废弃,不推荐使用,建议使用CSS样式设置。
<table border=”1”>
<caption>表格标题</caption>
<tr><td>单元格1</td><td>单元格2</td></tr> 第一行
<tr><td>单元格1</td><td>单元格2</td></tr> 第二行
</table>
7.thead/tbody/tfoot元素
thead元素:表格的表头;tfoot元素:表格的页脚;tbody元素:表格的主体;表格规范的写法应该包含这三部分内容。注:这三个主要结合CSS、javaScript来使用
<table border="1">
<caption>标题</caption>
<thead style=”background:blue”> --表格的表头
<tr><th colspan="3">标题行1</th><th>标题行2</th></tr>
</thead>
<tbody style=”background:green”> 表格的主体
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格1</td><td rowspan="3">单元格2</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格1</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格1</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr>
</tbody>
<tfoot style=”background:blue”> 表格的页脚
<tr><td>备注:</td><td colspan="3"></td></tr>
</tfoot>
</table
8.colgroup元素 设置列的宽度
colgroup元素用来组合列,他的span属性可以设置组合列的数目;它可以包含一个子元素 col;
colgroup元素为table元素的子元素,必须放在caption元素之后,thead元素之前。
<table border="1">
<caption>table</caption>
<colgroup span="1" style="width:100px"><col style=”background:red”></colgroup> span默认为1,表示1列,span=n表示n列都是后面的宽度,
<colgroup span="1" style="width:300px"></colgroup> 要设置不同列不同宽度,就像这样写几个colgroup。
<colgroup span="1" style="width:600px"></colgroup>
<thead>
<tr><th colspan="3">title</th></tr>
</thead>
<tbody>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td style=”height:25px”>单元格</td><td>单元格</td><td>单元格</td></tr> 设置这行单元格高度
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tbody>
<tfoot>
<tr><td>备注:</td><td colsapn="2"></td></tr>
</tfoot>
</table>
9.col元素 是单标签,设置列的属性,如颜色
col元素用来设定列的属性,他也可以使用span属性;
col元素一般作为colgroup元素的子元素配合使用。
<colgroup span="1" style="width:100px"><col style=”background:red”></colgroup>
表格例子:
<!DOCTYPE HTML>
<html>
<head>
<title>css样式表格</title>
<meta charset="utf-8">
<style type="text/css">
caption{font-size:30px;color:red}
td{height:25px;font-size:15px;align:center}
th{height:25px}
thead{background:blue}
tfoot{background:blue}
</style>
</head>
<body>
<table border="1" align="center">
<caption >特殊符号的使用</caption>
<colgroup span="1" style="width:100px"><col span="1" style="background:#FAEBD7"></colgroup>
<colgroup span="2" style="width:200px">
<col span="1" style="background:#00FFFF">
<col span="1" style="background:#8A2BE2">
</colgroup>
<colgroup span="1" style="width:100px"><col style="background:#006400"></colgroup>
<thead>
<tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td colspan="4">其他的特殊符号大家可以在网上查看就可以。</td></tr>
</tfoot>
</table>
</body>
</html>
1.14特殊符号的使用
1.HTML 实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
实体元素:有些特殊符号浏览器是不能解析的,就要用特殊符号的实体代替,eg:
 表示一个空格,参考
《HTML实体符号参考手册》