-
目录##
什么是HTML
HTML 标签
HTML 元素
!DOCTYPE 声明
HTML头部head
HTML title元素
HTML base 元素
HTML link 元素
HTML meta 元素
HTML 属性
HTML 属性常用引用属性值
标题
HTML 段落
HTML 链接
HTML 链接 - target 属性
HTML 链接- id 属性
HTML 图像
HTML 图像- 图像标签( img)和源属性src
HTML 图像- Alt属性
HTML 图像- 设置图像的高度与宽度
HTML标题
HTML 元素语法
HTML中如何使用CSS
内联样式
内部样式表
外部样式表
HTML 表格
HTML 表格表头
HTML 表格和边框属性
HTML 列表
HTML无序列表
HTML 有序列表
HTML 自定义列表
HTML的块级元素和内联元素
HTML 块级元素
HTML 内联元素## -
开始
元素
HTML 元素
HTML 表单和输入
HTML 表单
HTML 表单 - 输入元素
文本域(Text Fields)
密码字段
单选按钮(Radio Buttons)
复选框(Checkboxes)
提交按钮(Submit Button)
HTML 框架Iframe
iframe语法
Iframe - 移除边框
HTML
什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如 和
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
1
1
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
!DOCTYPE 声明
声明有助于浏览器中正确显示网页。网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的,以下方式均可:
. doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML,因此不要求引用 DTD。
2. 对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
HTML头部head
元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为:
HTML title元素
HTML base 元素
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
为搜索引擎定义关键词:
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John “ShotGun” Nelson’
标题
HTML 标题(Heading)是通过<h1 - h6> 标签来定义的.
这是一个标题
这是一个标题
这是一个标题
HTML 段落 HTML 段落是通过标签 p来定义的.这是一个段落。
这是另外一个段落。
HTML 链接 HTML 链接是通过标签 a> 来定义的.这是一个链接
HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
实例
访问菜鸟教程!
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
HTML 图像
HTML 图像- 图像标签( img)和源属性src
在 HTML 中,图像由 标签定义。
img 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
![Big Boat](boat.gif)
![Pulpit rock](pulpit.jpg)
HTML标题
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
- 一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合)
- 标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)
HTML中如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用
内联样式
这是一个标题
这是一个段落。
一个标题
一个段落。
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
HTML 表格
表格由
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML 表格表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
Row 1, cell 1 | Row 1, cell 2 |
HTML 列表
HTML无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用
标签
- Coffee
- Milk
HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
标签。每个列表项始于
标签。
列表项使用数字来标记。
- Coffee
- Milk
HTML 自定义列表
-
Coffee
- - black hot drink Milk
- - white cold drink
HTML的块级元素和内联元素
HTML 块级元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
HTML 内联元素
内联元素在显示时通常不会以新行开始。
HTML
元素
HTML
元素是块级元素,它可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,
元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。
HTML 元素
HTML 元素是内联元素,可用作文本的容器
元素也没有特定的含义。
当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
在这里插入图片描述
HTML 表单和输入
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置:
. input 元素 .HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签()。
文本域(Text Fields)
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
Last name:
密码字段
密码字段通过标签 来定义:
单选按钮(Radio Buttons)
标签定义了表单单选框选项
Female
复选框(Checkboxes)
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
I have a car
提交按钮(Submit Button)
定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
Username:HTML 框架Iframe
iframe语法
该URL指向不同的网页
Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框
HTML 颜色
颜色值
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
HTML 脚本
javaScript 使 HTML 页面具有更强的动态和交互性。