Html_总结

Html简单总结

一.概述

1.什么是Html文件

①．Html是一种描述网页的语言，英文全称是Hypertext Marked Language，中文全称是“超文本标记语言”

②．它拥有自己的一套标记标签，它使用标记标签来描述网页，它的标签都是用尖括号包围着，并且通常都是成对出现,比如段落标签

，

为开始标签,

为结束标签，中间放上你所写的内容。

③．一个Html文件的后缀名是.html或者是.htm

④．用文本编辑器就可以编写Html文件

2.Html元素

①．Html元素用来标记文本，表示文本的内容。比如body，p等就是Html元素

②．Html元素用标签表示，标签以<开始，以>结束

③．标签都是成对出现的。

④．目前Html的标签不区分大小写。比如和其实是相同的。

3.Html元素的属性

①Html元素可以拥有属性，属性可以扩展Html元素的能力。比如你可以使用一个bgcolor属性，使得页面的背景成为红色，可以进行如下设置

②属性通常由属性名和值成对出现，就像这样：name=”value”，在上个例子中的bgcolor就是name，red就是value。属性值一般用双引号表记起来

③属性通常是附加给Html的开始标签，而不是结束标签

二．大体的构架

简单介绍：

：表示该文件是html文件,此标签是成对出现的，放在最外面

：通常包含该html文件的标题，同时也可以在这里面定义js脚本，css 样式等，它也是成对出现的

：此里面放的是你要在页面上显示的内容，比如一个段落，一个图片或一个视频等内容，同时也可以在此里面写js脚本（通常我们都在标签中写），它也是成对出现的

三．标签的回顾(示例都放在了Html示例文件中)

1．换行标签
，

将此标签加在某一段的内容的后面，该标签后的内容就会另起一行进行显示，它不是成对出现的，见示例001.Html

2.段落标签

此标签是段落标签，在内容的前后加上此标签后，它会自动的在内容前后创建一些空白，内容前后各空一行，见示例002.html，此外

标签内还可以加入一些属性

①align属性：它的作用是使标记的内容以何种对齐方式进行显示，通常有居中(center)，左对齐(left)，右对齐(right)等显示样式，如

标记的内容

，内容会右对齐进行显示,此外还有一个用法（网上查到的，以前没用过），属性值是justify,作用是对行进行扩展，这样每行都有相同的长度，即两端对齐，此属性只适用于区块标记，但是它已经不被W3C所倡导，各种效果可见示例002.html

见示例002.htnl

3.标题标签

标题标签一共有六对，分别是

，

，

，

，

，

，其中

定义的是最大的标题，

定义的是最小的标题，默认情况下，浏览器会自动的在标题的前后各添加一空行，可以使标记的内容产生粗体的效果。在需要特别强调文本内容时，通常使用。效果见示例003.html

4.水平分割线标签

---

---

标签会在页面中创建一条水平线,它没有结束标签，此外在此标签中还可以加入一些常用属性，比如颜色属性(color)、对齐方式属性(align)、高度属性(size)，宽度属性(width)(这些属性已不赞成使用，常用样式来取代这些属性的使用)示例如004.html(验证的是color属性)

5.粗体文本标签

通常用标签去定义文本中比较重要的部分，被定义的部分会以粗体的样式显示。它是成对使用的，效果见示例005.html

6.斜体文本标签

斜体文本标签会让被标记的内容以斜体的样式进行显示，通常也是为了引起读者的注意，它是成对使用的，效果见示例006.html

7.超链接标签

这是一个很重要的标签，几乎在每一个网页中都会用到它，其中它最重要的属性就是href，它指定链接的目标，其中这里涉及了相对路径和绝对路径的问题。

?相对路径

①相对路径：意思是当前文档所在的路径引起的跟其它文档的路径关系。就是它

从当前文档路径出发，以它为路径的起点

②如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。举例如下：

假设info.html路径是：c:\Information\info\info.html

假设index.html路径是：c:\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

②如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。举例如下：

假设info.html路径是：c:\Information\info\info.html

假设index.html路径是：c:\index.html

在index.html加入info.html超链接的代码应该这样写：

info.html

?绝对路径

①绝对路径：通俗理解就是你所要找的文档的真实路径，通常绝对路径会引起一些错误。比如，你做的网页在另一台电脑上运行，而这个电脑上没有你所设置的路径中的某一个文件夹，那么路径就会报错，找不到你所连接的文档。超链接效果示例如007.html

此外它还有一个比较重要的属性target，通过设置它，可以把你要显示的页面用何种方式进行显示，它有四个值(此效果的例子在完成框架部分再进行演示)

①_blank 你所连接的目标对象会在一个新窗口中打开

②_self 你所连接的目标对象会在原来的窗口中打开，这也是一个默认值，即

当你不加这个target属性时，它也会出现这样的效果

③_parent 这个属性通常与框架一起使用

④_top 作用是在整个窗口中打开你链接的窗口

?name属性

①使用name属性，可以跳转到一个文件的指定部位

②使用name属性，要设置一对，一是设定name的名称，二是设定一个href指向这个name，如下

起始位置

③name属性通常用于创建一个大文件的章节的目录，便于查找每个章节

④如果浏览器不能找到Nam指定的部分，则显示文章开头，不报错，效果示例如007.html

?链接到email地址

格式如下：邮箱地址，效果示例如007.html

?title属性

①使用title属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

②如果希望注释多行显示，可以使用 ；作为换行符，效果示例如007.html

8.图片标签

图片标签的主要作用是加载一张图片在页面中显示，它加载的只是一个链接，是你所要显示的图片的链接地址，它有两个特别重要的属性，一个是src属性,另一个是alt属性。

?src属性：它的值是你所要加载的图像的路径，通常叫做Url

?alt属性：它的作用是在图像没法显示时的替代文本，即它可以告诉人们这张图像的一些信息。当鼠标移动到图片上时，会显示这些提示信息。效果示例参见008.html

?此外图片标签还有其它的一些属性，比如定义图像的高度(height)和宽度(width)，还有与周围文本的对齐方式(align)等各种属性

?当给图片加上超连接时，图片会出现边框，此时若要消去边框，只需在图片标签中，加上属性border=”0”即可。

?如果你想把图片的某一部分设置成超链接，你可以用usemap和ismap属性，这两个属性是设置图片的热区，即有超链接的地方。这两个属性的不同之处是：usemap处理客户端图像时，不要求有服务器或特殊的服务软件，而ismap 则需要有服务器或特殊的服务器软件。示例见008.html

①image-map ：

定义：一个客户端的图像映射。图像映射是指带有可点击区域的一副图像。

②map元素内部嵌套着area。area元素可定义图像映射中的区域。

③由于浏览器的问题，中的usermap属性可引用

属性(取决于浏览器)，所以我们应该同时向

④area：

此标签定义图像映射中的区域，此标签总是嵌套在

9.字体样式标签

它可以对文本的字体、字体的大小以及字体的颜色进行设置，成对出现，通常用到的属性是：

①size：规定文本字体的大小

②face：规定文本字体的样式，如宋体、楷书或者隶书等等

③color：规定文本字体的颜色

效果参见示例009.html

10.预格式化文本标签

预格式化文本标签可以原样显示你所要显示的文本，通常用来显示计算机的代码，因为计算机代码中可能有很多空格或者特殊字符，要想让它按照原样显示，用这个标签便可以实现。他用到的属性通常为:

width：表示每行可书写的最大字符数，效果示例参见010.html

11表格标签

⒈表格在html中非常重要，比如你要显示一些数据，通常就会用到表格,在以前，表格还可以用来布局，让人浏览起来感觉很舒服，不过现在通常用

标签来布局。一个简单的表格通常由行标签、列标签以及表头标签组成。用定义的表头，会出现居中加粗的效果。

在一个表格中可能有很多行很多列或者很多个表头，每一行中又可能有很多个单元格，所以在

标签中可以定义很多个、

或者

,见示例011.html ⒉Table用到的属性很多，在这里只介绍通常用到的：效果示例见011.html ①border：规定表格边框的宽度 ②bgcolor/background：规定表格的背景颜色/背景图片 ③width/height：规定表格的宽度/高度 ④align：规定表格相对周围元素的对齐方式 ⑤cellpadding：规定单元边沿与其内容之间的空白 ⑥cellspacing：规定单元格之间的空白 ⑦caption：规定表格的标题 ⑧colspan：可以设置表格的跨列效果 ⑨rowspan：可以设置表格的跨行效果 ⑩frame：此属性用来控制围绕表格的边框，它有9个值(效果见011.html) ?void：不显示外侧边框 ?above：显示上部的外侧边框。 ?below：显示下部的外侧边框。 ?hsides：显示上部和下部的外侧边框。 ?vsides：显示左边和右边的外侧边框。 ?lhs：显示左边的外侧边框。 ?rhs：显示右边的外侧边框。 ?box：在所有四个边上显示外侧边框 ?.border：在所有四个边上显示外侧边框 12.特殊字符 ?有些字符在html里有特别的含义，比如小于号<就表示Html标签的开始，而这个小于号<是不显示在网页里的，那么我们如果要显示一个小于号，就要用到特殊字符。同理，如果要显示多个空格，也要用到特殊字符，因为在网页中，不管你在两个字之间加了多少个空格，Html只会保留一个空格，而截去其余的空格。 ?最常用的特殊字符: 显示结果说明实体名字 显示一个空格  < 小于< > 大于> & &符号& “双引号" @ 版权© ×乘号× ÷除号÷ 13.框架结构标签 ?使用框架，可以使浏览器窗口显示多个网页，每个frame里设定一个网页，每个网页相互独立。 ?框架标签决定如何划分frame,有cols属性和rows属性，使用cols属性，表示按列分布frame；使用rows属性，表示按行分布frame ?用frame这个标签设置网页，里有src属性，src值就是网页的路径和文件名 ?我们在定义了一个有边框的框架时，通常我们都可以随便拖动，为了避免这种情况的发生，我们可以在标签中加入：noresize=”norsize” ?不能将标签与标签同时使用 HTML5所有标签汇总及标签意义解释 HTML5所有标签汇总及标签意义解释 HTML5所有标签汇总及标签意义解释结构标签：(块状元素) 有意义的div<article> 标记定义一篇文章 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <hgroup> 标记定义文件中一个区块的相关信息 <figure> 标记定义一组媒体内容以及它们的标题 <figcaption> 标签定义figure 元素的标题。 <footer> 标记定义一个页面或一个区域的底部 <dialog> 标记定义一个对话框(会话框)类似微信多媒体交互标签<video> 标记定义一个视频 <audio> 标记定义音频内容 <source> 标记定义媒体资源 <canvas> 标记定义图片 <embed> 标记定义外部的可交互的内容或插件比如flashWeb应用标签<menu>命令列表 <menuitem>menu命令列表标签FF（嵌入系统） <command> menu标记定义一个命令按钮 <meter>状态标签(实时状态显示:气压、气温)C、O <progress>状态标签(任务过程:安装、加载) C、F、O <datalist> 为input标记定义一个下拉列表,配合option F、O <details> 标记定义一个元素的详细内容，配合dt、dd C注释标签<ruby> 标记定义注释或音标 <rp> 告诉那些不支持Ruby元素的浏览器如何去显示<rt> 标记定义对ruby的注释内容文本其他标签 <keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F <mark> 标记定义有标记的文本(黄色选中状态) <output> 标记定义一些输出类型,计算表单结果配合oninput事删除的HTML标签纯表现的元素： basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素： frame，frameset，noframes；产生混淆的元素： acronym ，applet，isindex，dir重新定义的HTML标签 <b> 代表内联文本，通常是粗体，没有传递表示重要的意思 <i> 代表内联文本，通常是斜体，没有传递表示重要的意思 <dd> 可以同details与figure一同使用，定义包含文本，dialog也可用 HTML初级知识点总结最详细的总结 HTML 超文本标记语言，一种规范 预定义，已经定义好的各种标记，只需要我们把对应的标记放到合适的位置 一. HTML基本语法与基本结构（重点） 标记的使用 1、标记一般成对出现，包含开始标记和结束标记 2、标记可以嵌套使用，但是不能交叉使用 3、标记不区分大小写 属性的使用（属性控制内容的格式，额外的格式） 1、书写位置在开始标记中 2、格式：属性名=“属性值”，多个属性之间使用空格分割 3、不同的标记属性可能相同也可能不同 4、属性使用的标记中，只能对本标中的内容记产生影响 5、属性不冲突时，效果叠加，属性冲突时，就近原则 html的基本结构 ----声明网页 ----网页的头部信息 ----网页的标题 ----网页的主体，网页内容主要展示的部分 网页的主要内容 二. 文本格式的应用 1、标题标记,n的取值1-6,1级标题最大 效果：加粗显示，带有自动换行 属性：align控制标题的对齐方式，取值left（左对齐，默认值）|center（居中）|right（右对齐） 2、段落标记 效果：把内容分段展示，自动换行 属性：align，控制段落内容的对齐方式，取值left（左对齐，默认值）|center（居中）|right（右对齐） 3、换行符 ,单标记，不需要结束标记，换行但不分段 空格符号： 表示一个空格 强制换行符： 4、水平线标记 ,单标记 效果：水平线,默认是一个粗细为2px（像素）的线条 属性：size 控制水平线的粗细，取值为整数，单位为像素（px） HTML5终极备忘大全+API配合使用(API中带例子和各标签属性大全) 一、文字备忘之标签 HTML5中新增的标签 定义文章 定义页面内容旁边的内容