HTML 标签说明

  • 超文本

web是一个超文本文件的集合

超文本文件是web的基本组成单元,也称为网页或HTML文档,web页等,通常以 .html或 .htm为后缀的文件

web页之间通过超文本中的超级链接组织在一起

 

 

HTML 超文本标记语言,一种纯文本类型的语言

  1. 使用带有尖括号的“标记”网页中的内容逐一标识出来
  2. 用来设计网页的标记语言
  3. 由浏览器解释执行
  4. HTML页面上可以嵌套脚本语言编写的程序段,如VBScript,JavaScript

 

  • 标记语法

 

用于描述功能的符合称为“标记”,比如

标记在使用时必须使用尖括号括起来

有封闭类型标记,也有非封闭类型标记

 

封闭类型标记(双标记),必须成对出现;<标记> 内容

非封闭类型标记(空标记/单标记),不能包含内容; <标记 /> 或者  <标记>

 

 

 

  • 元素

即标记

每一对尖括号包围的部分; 如 包围的部分叫做body元素

元素就像小标签,标识网页文档的不同部分

元素可以包含文本内容和其他元素,也可以是空的。

 

元素之间可以相互嵌套的,形成更为复杂的语法

在嵌套元素时需注意标记的嵌套顺序

 

 

属性和值

属性,修饰元素

属性的声明必须位于开始标记里

一个元素的属性可能不止一个,多个属性之间用空格隔开

多个属性之间不区分先后顺序

每个属性都有值

属性和值之间用等号连接

属性的值包含在引号中

< p align = "center" >段落一

      注:align属性名称,center属性值

 

 

每个元素都有自己所特有的属性

标准属性(通用属性):绝大多数元素都支持的, ( id , title , class , style )

 

注释

不可嵌套在其他注释中,不可位于嵌在< >中

 

  • HTML文档的结构

html页面

文件头:

文档主体部分:   

 

 

 

文档类型声明

在文档的起始用DOCTYPE 声明指定 版本和风格

让浏览器清楚文档的版本、类型和风格

• Strict DTD

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Transitional DTD

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Frameset DTD

Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

• HTML 5

 

 

  • 元素

整个文档的包含元素

在DOCTYPE的文档类型声明之后

– 按照严格版本(Strict XHTML 1.0),起始的 标

记中必须包含命名空间标识符

 

 

有两个子元素

– :页面的头部内容

– :页面的主体内容

 

 

元素

• 元素用于为页面定义全局信息

– 所有其他头元素的容器

– 紧跟在起始标签 之后

• 可包含

– title、meta、script、style、link等

HTML 文档

 

 

文档头部内容-- </strong></span></p> <p><span>• 标题元素 <title> 用于为文档定义标题

– 标题元素的内容出现在浏览器顶部

– 没有属性

– 必须出现在 元素中

– 一个文档只能有一个标题元素

我的第一个HTML页面

 

 

 

文档头部内容 --

• 元数据元素 用于定义网页的基本信息

• 为空标记

• 常用属性有:content、http-equiv

HTML 文档

content="text/html;charset=utf-8" />

 

 

元素

• 元素出现在 元素之后,包含网页

要显示给读者的内容,称为主体内容

• 可以包含除了html、head外所有元素

我的第一个HTML页面

页面的主要内容

 

 

文本与特殊字符 • 文本是网页上的重要组成部分

– 直接书写的文本会用浏览器默认的样式显示

– 包含在标记中的文本则会被显示为标记所拥有的样式

• 空格折叠

– 多个空格或制表符压缩成单个空格,即只显示一个空格

• 特殊字符(如空格),需要进行转义(使用字符实体)




    
    


The <p> element.    © 2011 by tarena.

     HTML 标签说明_第1张图片

结果显示 /|\

 

文本样式

• 文本样式的作用是对文本进行修饰,如加粗、倾斜等

:加粗

:倾斜

:下划线

:删除线

:上标

:下标

粗体文本

斜体文本

下划线文本

删除线文本

下标文本

上标文本

 

 

 

标题元素

• 标题元素让文字以醒目的方式显示,往往用于文章的 标题

• 基本语法: ...

– #=1, 2, 3, 4, 5, 6

– 从

,即 标题1-标题6

h1 text

h2 text

 

段落元素

元素提供了结构化文本的一种方式

元素中的文本会用单独的段落显示

– 与前后的文本都换行分开

– 添加一段额外的垂直空白距离,作为段落间距

– 常用属性: align

The first paragraph.

The second paragraph.

 

 

 

 

换行元素

• 使用
元素在任何地方创建手工换行

– 空标记

This is a
paragraph.

 

 

 

分区元素

• 分区元素用于为元素分组,常用于页面布局

• 块分区元素:

• 行内分区元素:

– 设置同一行文字内的不同格式

style="color:blue;">

first

second

一周畅销style="color:red;">榜

 

 

 

行内元素与块级元素

• 块级元素

– 默认情况下,块级元素会独占一行,即元素前后都会自动 换行

– 如:

• 行内元素

– 不会换行,可以和其他行内元素位于同一行

– 如:

 

 

  • URL

统一资源定位器,

用来标识网络中的任何资源

– 文本、图片、音视频文件,段落,或其他超文本

• 即路径,指从当前位置到目标位置所经过的路线

• Web 页面常用 URL 形式:

– 绝对路径

– 相对路径

 

 

图像元素

• 使用 元素将图像添加到页面

– 空标记

• 必须属性:src

• 常用属性:width、height

 

 

链接元素

• 使用 元素创建一个超级链接,语法如下:

文本

– href 属性:链接 URL

– target 属性:目标,可取值为 _blank、_self 等

– name 属性:锚点名称

To Google


To other page

 

 

 

 

链接的表现形式

• 目标文档为下载资源

• 电子邮件链接

• 返回页面顶部的空链接

• 链接到JavaScript

下载

联系我们

...

JS 功能

 

 

 

锚点

• 锚点是文档中某行的一个记号

– 用于链接到文档中的某个位置

• 使用方式

– 1、定义锚点

– 2、链接到锚点:在锚点名前加上#

锚点一

...

如果文本/图像与锚点存在同一页面

...

如果文本/图像与锚点存在不同页面

 

定义锚点







Return to top

 

使用链接,导航到锚点

 

 

  • 表格

 

定义表格:使用成对的

标记

• 创建表行:使用成对的 标记

• 创建单元格:使用成对的 标记

第1行,第1列 第1行,第2列
第2行,第1列 第2行,第2列

 

 

 

表格的常用属性

元素

– width,设置表格宽度

– height,设置表格高度

– align,设置表格对齐方式(left|center|right)

– border,设置表格边框宽度

– cellpadding,设置内边距(单元格边框与内容之间的距离)

– cellspacing,设置外边距(单元格之间的距离)

– bgcolor,设置表格背景颜色

 

元素

– align,设置水平对齐方式(left|center|right)

– valign,设置垂直对齐方式(top|middle|bottom)

元素

– align,设置水平对齐方式(left|center|right)

– valign,设置垂直对齐方式(top|middle|bottom)

– width,设置宽度

– height,设置高度

– colspan,设置单元格跨列

– rowspan,设置单元格跨行

 

 

 

不规则表格

• 设置单元格

的跨行或者跨列属性

• 跨列:colspan

– 水平方向延伸单元格,值为一正整数,代表此单元格

水平延伸的单元格数

• 跨行:rowspan

– 垂直方向延伸单元格,值为一正整数,代表此单元格

垂直延伸的单元格数

 

 

 

  • 列表

 列表是指将具有相似特征或者具有先后顺序的几行文字

进行对齐排列

• 所有的列表都由列表类型和列表项组成

– 列表类型:有序列表

    和无序列表

      – 列表项:

    • ,用于指示具体的列表内容

       

       

      有序列表

          元素编写有序列表,用于列出页面上有特定次序的 一些项目

            元素中只能包含列表项元素

            • type 属性值

            – 1,数字(默认)

            – a,小写字母

            – A,大写字母

            – i,小写罗马数字

            – I,大写罗马数字

             

            1. MySQL
            2. MS SQL Server
            3. Oracle
            4. Sysbase
            5. Informix

             

             

            无序列表

                元素表示无序列表,用于列出页面上没有特定次序 的一些项目

                  元素中只能包含具体的列表项元素

                  • type 属性值

                  – disc,实心圆(默认)

                  – circle,空心圆

                  – square,实心矩形

                   

                  • HTML/XHTML
                  • XML
                  • CSS
                  • JavaScript

                   

                   

                  列表嵌套

                  • 将列表元素嵌套使用,可以创建多层列表

                  – 常用于创建文档大纲、导航菜单等

                  • Web基础知识

                    • Web的工作原理

                  • HTML快速入门

                    • 基础语法

                   

                   

                   

                  • 表单

                   

                  表单的作用 

                  • 表单用于显示、收集信息,并提交信息到服务器

                  • 表单有两个基本部分

                  – 实现数据交互的可见的界面元素,比如文本框或按钮

                  – 提交后的表单处理

                  • 界面元素

                  – 使用

                  元素创建表单

                  – 在 元素中添加其他表单可以包含的控件元素

                   

                  表单元素

                  • 定义表单:使用成对的 标记

                  • 主要属性

                  – action:定义表单被提交时发生的动作,通常包含服务方脚本的URL(比如JSP、PHP)

                  – method:指出表单数据提交的方式,取值为 get 或者 post

                  – enctype:表单数据进行编码的方式

                  – name:表单名称

                   

                   

                  表单控件

                  • 表单可以包含很多不同类型的表单控件

                  • 表单控件元素是包含在表单元素中具有可视化外观的 HTML元素,用于访问者输入信息

                  • 表单控件元素有

                  – input元素:文本输入控件、按钮、单选和复选按钮、选项 框、文件选择框和隐藏控件等

                  – textarea元素

                  – select和option元素

                  – 其他元素

                   

                   

                  • 元素

                   

                  元素用于收集用户信息

                  • 该元素是一个单标记,语法为:

                  • 主要属性

                  – type:根据不同的 type 属性值,可以创建各种类型的输 入字段,比如文本框、复选框等

                  – value:控件的数据

                  – name:控件的名称

                  – disabled:禁用控件

                   

                  文本框与密码框

                  • 文本框:

                  • 密码框:

                  • 主要属性

                  – name:名称

                  – value :由访问者自由输入的任何文本

                  – maxlength :限制输入的字符数

                  – readonly :设置文本控件只读

                   

                  姓名:

                                                 value="mary" maxlength="6" />



                  密码:

                   

                   

                  单选框和复选框

                  • 单选框:

                  • 复选框:

                  • 主要属性

                  – name:设置名称,并用于分组,一组单选框或者复选框

                  的名称必须相同

                  – value:文本,当提交 form 时,如果选中了此单选按钮,

                  那么 value 就被发送到服务器

                  – checked: 设置默认被选中

                   

                   

                  性别:

                  保密



                  喜欢的城市:

                  北京

                  厦门

                  敦煌

                  杭州

                   

                   

                   

                  按钮

                  • 提交按钮:

                  – 传送表单数据给服务器端或其它程序处理

                  • 重置按钮:

                  – 清空表单的内容并把所有表单控件设置为最初的默认值

                  • 普通按钮:

                  – 用于执行客户端脚本

                  • 主要属性

                  – name:名称

                  – value:按钮的标题文本

                   

                   

                  隐藏域和文件选择框

                  • 隐藏域:

                  – 在表单中包含不希望用户看见的信息

                  – name 属性:名称

                  – value 属性:值

                  • 文件选择框:

                  – name 属性:名称

                   

                   

                   

                  • 其他控件

                   

                  • 语法:

                  • 主要属性:

                  – for:表示与该元素相联系的控件的 ID 值

                  • 作用:

                  – 将文本与控件联系在一起后,单击文本,效果就同单 击控件一样

                   

                   

                  选项框

                  • 两种:下拉选项框和滚动列表

                  选择课程:

                  -----------------------------------------------+

                  选择课程:

                   

                   

                  • 主要属性:

                  – name:名称

                  – cols:指定文本区域的列数

                  – rows:指定文本区域的行数

                  – readonly:只读

                   

                  多行文本框:

                   

                   

                   

                  #工作再忙也要让眼睛稍息一会哦~

                   

                  你可能感兴趣的:(HTML 标签说明)