欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML 简介

程序员文章站 2022-03-19 11:06:10
...
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 元素以结束标签终止

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

某些 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

将图像作为链接

HTML 简介

表格的表头

表格的表头使用

标签进行定义。

>>>>>>>>注意

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 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.

The cat was playing in the garden.

创建按钮

创建框:

健康信息:

带有输入框和确认按钮的表单

First name:

Last name:

带有复选框的表单

I have a bike:


I have a car:


I have an airplane:



带有单选按钮的表单

Male:


Female:


垂直的表头:

姓名 Bill Gates
电话 555 77 854
电话 555 77 855

图解:姓名 Bill Gates

电话 555 77 854

电话 555 77 855


带有标题的表格

本例演示一个带标题 (caption) 的表格

横跨两列的单元格:

我的标题

横跨两行的单元格:

HTML 简介

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • HTML 简介
  • 专题推荐

    作者信息
    HTML 简介

    高洛峰

    拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,累计授课长达上万课时, 培养了近百名IT名师, 培训数万名学员成功走向IT岗位,近年来致力于推广Web开发技术。

    最近文章
    图文详解.Net语言Smobiler开发之如何仿微信朋友圈的消息样式2037
    ASP.NET代码轻松实现微信抢红包2041
    C#开发微信多客服功能及开发集成实例1753
    推荐视频教程
  • HTML 简介javascript初级视频教程
  • HTML 简介jquery 基础视频教程
  • 视频教程分类
    姓名 电话
    电话 555 77 854
    相关标签: HTML