首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

HTML 简介

高洛峰
高洛峰 原创
2016-10-31 11:45:56 2806浏览

HTML 简介

1.Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2.

My First Heading

My first paragraph.

# 与 之间的文本描述网页

# 与 之间的文本是可见的页面内容

#

与

之间的文本被显示为标题

#

与

之间的文本被显示为段落


HTML 链接

1.HTML 链接是通过 标签进行定义的。

This is a link

HTML 图像

HTML 图像是通过 标签进行定义的。


HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

空的 HTML 元素

没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。


就是没有关闭标签的空元素（
标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。

在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。

HTML 居中

拥有关于对齐方式的附加信息。

拥有关于背景颜色的附加信息。


HTML 水平线

标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它！

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：

This is
a para
graph with line breaks


元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

这是                            这是
预格式文本。        >>>>>>>>>>> 预格式文本。
它保留了      空格              它保留了      空格
和换行。                         和换行。
 
pre 标签很适合显示计算机代码
 
地址
此例演示如何在 HTML 文件中写地址。
 
唐老鸭的地址：
Donald Duck
BOX 555
Disneyland
USA
 

 
W3School 的地址：
  用户服务信箱
  上海赢科投资有限公司
  金桥开发区 789 号
结果：
唐老鸭的地址：
 
Donald Duck
BOX 555
Disneyland
USA
 
用户服务信箱
上海赢科投资有限公司
金桥开发区 789 号
 
缩写和首字母缩写
UN
WWW
 
文字方向
Here is some Hebrew text
Here is some Hebrew text
 
块引用
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
This is a heading
This is a paragraph.
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
A heading
A paragraph.
text-align 属性规定了元素中文本的水平对齐方式：
This is a heading
 
将图像作为链接
 
表格的表头
表格的表头使用  标签进行定义。
           >>>>>>>>注意
HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
 
表格中的空单元格
table border="1">
row 1, cell 1
row 1, cell 2
row 2, cell 1
 
 
无序列表:
一个无序列表：
      
  • 咖啡
    •   
  • 茶
    •   
  • 牛奶
 
有序列表 :
一个有序列表：
      
  1. 咖啡
    2.   
  2. 茶
    3.   
  3. 牛奶
 
定义列表
Coffee
Black hot drink
Milk
White cold drink

表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（
）定义。
输入
多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。
文本域
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
 
First name:

Last name:
 
单选按钮
 Male    name和value什么意思？

 Female
复选框
I have a bike

I have a car
表单的动作属性（Action）和确认按钮
                                                  name,action,method是什么意思？
Username:
          value是什么意思？
 
实例：
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
文本域
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.