本文详细介绍了HTML的基础知识，包括文档结构、文本标签、列表、表格、图片、超链接、表单和多媒体等内容，深入探讨了自闭合标签、块元素、行内元素等概念，适合初学者和进阶者学习。
参考资料
http://www.lvyestudy.com/les_hj/html_list.aspx
章节排序及内容以书籍为准
知识梳理：
1、html基础
head标签——换行标签——文本标签——自闭合标签——块元素——行内元素
2、基本样式
列表——表格——图片——超链接——表单——多媒体——浮动框架
第三章——基本标签
1、HTML结构
一个HTML文档由4个基本部分组成：
- ① 一个文档声明：<!DOCTYPE HTML>
- ② 一个html标签对：<html></html>
- ③ 一个head标签对：<head></head>
- ④ 一个body标签对：<body></body>
2、head标签
一般来说，只有6个标签能放在<head>标签内：
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 规定页面上所有链接的默认 URL 和默认目标 |
- title标签
定义网页的标题
- meta标签
辅助性标签，一般用来定义页面的关键字、页面的描述等，便于搜索引擎来搜索到此页面的信息
name主要属性值及其作用，说明 keywords 网页的关键字（关键字可以是多个，而不仅仅是一个）
description 网页的描述
author 网页的作者
copyright 版权信息
1
2
3
4
5
6
7
8
9
10
<head>
<!--网页关键字-->
<metaname="keywords"content="绿叶学习网"/>
<!--网页描述-->
<metaname="description"content="绿叶学习网是一个富有活力的技术学习网站"/>
<!--本页作者-->
<metaname="author"content="helicopter">
<!--版权声明-->
<metaname="copyright"content="本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。"/>
</head>
定义页面所使用的语言
1
2
3
<head>
<metahttp-equiv="content-type"content="text/html; charset=gb2312"/>
</head>页面自动跳转
1
2
3
<head>
<metahttp-equiv="refresh"content="6;url=http:/www.baidu.com"/>
</head>
- style标签
定义元素的CSS样式
<style type="text/css">
<!--这里写CSS样式-->
</style>- script标签
定义页面的js代码，也可以引入外部的js文件
| 1 2 3 4 5 |
|
- link标签
引入外部样式文件（css文件）
| 1 2 3 |
|
3、body标签
之后介绍的所有标签都是位于<body>标签内部
4、HTML注释
“<!--”表示注释的开始，“-->”表示注释的结束。
第四章——文本
1、标题标签
在HTML中，共有6个级别的标签：<h1>~<h6>，文章标题使用h1标签，大标题使用h2标签……以此类推。
- title标签与h标签
- title标签用于显示地址栏标题
- h标签用于显示文章标题
3、段落标签（换行）
- 分段:<p></p>
段落标签会自动换行，并且段落与段落之间有一定的空隙
- 换行：</br>
换行标签是自闭合标签 ，其中br指的是“break（换行）”，之间不会有空隙
4、文本标签
针对文本进行各种格式化的标签
| 文本格式化标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（块引用） | 斜体 |
| <sup> | superscripted（上标） | 上标 |
| <sub> | subscripted（下标） | 下标 |
5、水平线标签
<hr/>，它是一个自闭合标签。hr，指的是horizon（水平线）
6、div标签
div，即division（分区），用来划分一个区域
div标签内可以放入<body>标签的任何内部标签：段落文字、表格、列表、图像等。
7、自闭合标签
常见的自闭合标签
1、<meta/>
定义页面的说明信息，供搜索引擎查看。
2、<link/>
用于连接外部的CSS文件或脚本文件。
3、<base/>
规定页面上所有链接的基准URL 和默认目标。
4、<br/>
用于换行。
5、<hr/>
水平线。
6、<input/>
用于定义表单元素
7、<img/>
图像标签。
- 一般标签：由于有开始符号和结束符号，可以在标签内部插入其他标签或文字；
- 自闭合标签：由于没有结束符号，没办法在内部插入其他标签或文字，只能定义自身的一些属性。
8、块元素
块元素占据整行，排斥其他元素与其位于同一行，可以容纳行元素和其他的块元素
| 块元素 | 说明 |
|---|---|
| div | div层 |
| h1～h6 | 1到6级标题 |
| p | 段落，会自动在其前后创建一些空白 |
| hr | 分割线 |
| ol | 有序列表 |
| ul | 无序列表 |
9、行内元素
行内元素可以与其他行内元素共存在同一行，可以容纳其他行内元素
| 行内元素 | 说明 |
|---|---|
| strong | 加粗强调 |
| em | 斜体强调 |
| s | 删除线 |
| u | 下划线 |
| a | 超链接 |
| span | 常用行级，可定义文档中的行内元素 |
| img | 图片 |
| input | 表单 |
第五章——列表
1、有序列表
<ol>，即“ordered list（有序列表）”。<li>，即“list（列表项）”
<ol>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签，文本不能直接放在ol元素内部
文本元素的前缀名称按照一定的顺序命名
<ol type="">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
- type
通过有序列表type属性来改变列表项符号
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
2、无序列表
<ul>，即“unordered list（无序列表）”。<li>，即“list（列表项）”
<ul>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签，文本不能直接放在ul元素内部
文本元素的前缀没有顺序
- type属性
| type属性值 | 列表项的序号类型 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
3、定义列表
<dl>即“definition list（定义列表）”
<dt>即“definition term（定义名词）”
<dd>即“definition description（定义描述）”
描述内容有首行缩进
| 1 2 3 4 5 |
|
第六章——表格
1、基本结构
table标签（表格）、tr标签（行）、td标签（单元格）
tr，即“table row（表格行）”。td，即“table data cell（表格单元格）”。
<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效
2、完整结构
- caption
表格一般都有一个标题，表格标题使用<caption>标签
表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题
- th，即“table header（表头单元格）th
它一般位于第一行，用来表明这一行或列的内容类别
浏览器会以粗体和居中的样式显示<th>元素中的内容
3、语义化
HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
4、合并行
<td rowspan="跨度的行数">
5、合并列
<td colspan="跨度的列数">
第七章——图片
1、图片标签
| 属性 | 说明 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
- src属性
src，即“source（源文件）”。img标签的src属性用于指定图像源文件所在的路径
- alt属性
alt属性用于设置图片的描述信息
- title属性
title属性用于设置鼠标移到图片上的提示文字，这些提示文字是给用户看的。
<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">2、相对路径
图片相对当前页面的位置
“网页1”引用海贼王图片
<img src="海贼王.jpg" alt="海贼王"/>
“网页2”引用海贼王图片
<img src="../images/海贼王.jpg" alt="海贼王"/>
第八章——超链接
1、a链接
<a href="链接地址" target="目标窗口的打开方式">超链接文字</a>
| target属性值 | 语义 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
2、锚点链接
它链接对象是当前页面的某一个部分
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
<div id="music">
<h3>推荐音乐</h3>
</div>
<div id="movie">
<h3>推荐电影</h3>
</div>
<div id="article">
<h3>推荐文章</h3>
</div>
3、href和src的区别
a、src 的内容，是页面必不可少的一部分，是引入。
src 表示来源地址（srouce），在 img、iframe、embed、bgsound 等元素上
b、href 的内容，是与该页面有关联，是引用。
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用
第九章——表单
1、表单
<form name="名字" action="地址" method="post" target="_blank"
enctype="application/x-www-form-urlencoded">
</form>
- name
name属性来给表单进行命名
- action
提交地址
- method
提交方式
表单数据被传送到action属性指定URL，然后这个新URL被送到处理程序上
post 表单数据被包含在表单主体中，然后被传送到处理程序上
- target
指定目标窗口的打开方式
_self 默认值，表示在当前的窗口打开页面
_blank 表示在新的窗口打开页面
_parent 表示在父级窗口中打开页面
_top 表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面
- enctype
设置表单信息提交的编码方式。
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。 |
2、input标签
input标签自闭合标签，没有结束标签。
表单元素要与文本要用label标签关联起来
<label for="name值">文本</label> <input type="" name="" /><label>表单元素+文本 </label>
- 文本框text
<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
- 密码文本框password
<input type="password" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>| 属性 | 说明 |
|---|---|
| value | 定义文本框的默认值，也就是文本框内的文字 |
| size | 定义文本框的长度，以字符为单位 |
| maxlength | 设置文本框中最多可以输入的字符数 |
- 单选按钮radio
<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" checked/>- 复选框checkbox
<input type="checkbox" value="复选框取值" checked="checked"/>- 下拉列表
<select multiple="multiple" size="可见列表项的数目">
<option value="选项值" selected>选项显示的内容</option>
……
<option value="选项值">选项显示的内容</option>
</select>
size 下拉列表展开之后可见列表项的数目
当设置multiple=“multiple”时，下拉列表可以选择多项
- 按钮button
<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
<input type="submit" value="提交按钮的取值"/>
<input type="reset" value="重置按钮的取值"/>- 隐藏域hidden
<input type="hidden" value="隐藏值"/>- 文件域file
<input type="file"/>- 多行文本框textarea
<textarea rows="行数" cols="列数">多行文本框内容</textarea>第十章——多媒体
1、网页中插入音频和视频
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>
2、网页插入背景音乐
loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放
<bgsound src="背景音乐的地址" loop="播放次数">第十一章——浮动框架
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
<a href=" " target="show">商品列表</a>
<iframe name="show" height=" " width=" " frameborder="0" scrolling="no"></iframe>
| scrolling属性值 | 说明 |
|---|---|
| auto | 默认值，整个表格在浏览器页面中左对齐 |
| yes | 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留 |
| no | 在任何情况下都不显示滚动条 |
扫一扫
2967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
