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

    HTML 简介

    高洛峰高洛峰2016-10-31 11:45:56原创2036
    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. 牛奶

    定义列表

    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.

  • -->
    1/1

    PHP中文网