HTML入门与进阶以及HTML5

表1 <head>内部标签
<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

<head>的内部标签也非常重要，在前期大家只需要感性认知就可以。

(3)body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

后续课程讲解的标签都是在<body>标签内部的各种标签。

3、段落与文字

(一)、段落标签

(1)、段落与文字标签

表1 段落与文字标签
标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

(2)、文本格式化标签

表2 文本格式化标签
标签	语义	说明
<strong>	strong（加强）	加粗
<em>	emphasized（强调）	斜体
<cite>	cite（引用）	斜体
<sup>	superscripted（上标）	上标
<sub>	subscripted（下标）	下标

(二)、网页特殊符号

网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。

(三)、自闭合标签

HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。

一般标签可以在开始符号和结束符号之间插入其他标签或文字。

自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。

(1)、一般标签

举例：<body></body>

(2)、自闭合标签

举例：<br/>、<hr/>

(四)、块元素和行内元素

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

(2)、块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；

常见块元素有：h1~h6、p、hr、div等。

(3)、行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

常见行内元素有：strong、em、span等。

(五)、练习题

(1)、下面是一个网页在浏览器上的效果，请制作一张一模一样的网页。

HTML段落与文字训练题

(6)标签的语意

标签语义对照表
标签名	英文全称	中文解释
div	division	分割（块元素）
span	span	区域（行内元素）
p	paragraph	段落
ol	ordered list	有序列表
ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述
h1~h6	header1 ~header6	标题1~标题6
hr	horizontal rule	水平线
a	anchor	锚点，超链接
strong	strong	强调（粗体）
em	emphasized	强调（斜体）
sup	superscripted	上标
sub	subscripted	下标
br	break	换行
fieldset	fieldset	域集
legend	legend	图例
caption	caption	（表格、图像等）标题
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表身单元格

4、列表

3种列表的语义记忆：

表1 3种列表记忆
标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

(一)、HTML3种列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。

目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。

(1)、有序列表

<ol>

<li>有序列表项</li>

</ol>

表1 有序列表type属性
type属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。

(2)、无序列表

无序列表是三个列表中最为重要的列表。

语法：

<ul type="列表项符号">

<li>无序列表项</li>

</ul>

表1 无序列表type属性
type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

学习了CSS之后，无序列表列表项符号由list-style-type定义，到时候应该摒弃type属性。

(3)、定义列表

语法：

<dl>

<dt>定义名词</dt>

<dd>定义描述</dd>

……

</dl>

说明：

<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

(二)、HTML学习中的误区

学习HTML的目的就是在你需要的地方用到符合语义的标签，把标签用“对”这才是HTML学习的目的。例如一段文字，应该使用p标签，而不是使用div标签或者其他标签。

网页语义结构良好，对于搜索引擎来说也是极为重要的一点。

(三)、练习题

1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。

要求：

（1）大标题使用<h3>标签；
（2）问卷调查题目使用<h4>标签
（3）前2个问题选项使用有序列表；
（4）最后一个问题选项使用无序列表

绿叶学习网问卷调查

5、表格

(一)、表格语义记忆

通过语义化记忆表格标签：

表1 表格基本标签
标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

表2 表格结构标签
标签	语义	说明
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

(二)、表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

HTML表格基本结构

语法：

<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

</table>

说明：

<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

(三)、表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

HTML表格完整结构

语法：

<table>

<caption>表格标题</caption>

<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>

<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table>

说明：

<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。

(四)、合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

(1)、合并行

语法：

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>合并行rowspan</title>

</head>

<body>

<table>

<tr>

<td>姓名:</td>

<td>小明</td>

</tr>

<tr>

<td rowspan="2">喜欢水果:</td>

<td>苹果</td>

</tr>

<tr>

<td>香蕉</td>

</tr>

</table>

</body>

</html>

在浏览器预览效果如下：

rowspan

(2)、合并列

语法：

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>合并列colspan</title>

</head>

<body>

<table>

<tr>

<td colspan="2">绿叶学习网精品教程</td>

</tr>

<tr>

<td>HTML教程</td>

<td>CSS教程</td>

</tr>

<tr>

<td>jQuery教程</td>

<td>SEO教程</td>

</tr>

</table>

</body>

</html>

在浏览器预览效果如下：

colspan

6、图像

(一)、图像标签

在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。

语法：

表1 img标签常用属性
属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到<img>还有别的属性，你不用去记忆它们。

(二)、相对路径和绝对路径

相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。

绝对路径，指的是文件的完整路径。

详细复习内容，请查看相对路径和绝对路径。

(三)、图片格式

虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。

2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差，但是可以制作动画。

7、链接

超链接使用a标签，语法如下：

表1 <a>标签target属性
target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。

超链接根据链接对象的不同分为：

（1）外部链接

（2）内部链接：①内部页面链接；②锚点链接；

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>锚点链接</title>

</head>

<body>

<div>

<a href="#music">推荐音乐</a><br />

<a href="#movie">推荐电影</a><br />

<a

最低0.47元/天解锁文章

wuyxinu

关注

3308
点赞
踩
19271

收藏

觉得还不错? 一键收藏
130
评论
HTML入门与进阶以及HTML5

目录一、简介1、前端开发最核心技术（1）HTML是什么？（2）CSS（3）JavaScript2、前端开发其他技术二、基础内容1.基础总结2.HTML的基本标签(1)HTML标签(2)head标签(3)body标签3、段落与文字(一)、段落标签(二)、网页特殊符号(三)、自闭合标签(四)、块元素和行内元素(五)、练...
复制链接

扫一扫

专栏目录