HTML笔记（1）_html/css_WEB-ITnose

HTML

2015-8-31

HTML超文本标记语言（HyperText Markup Language）

是一种纯文本类型的语言。使用带有尖括号的“标记”将网页中的内容逐一标识出来。

  用来设计网页的标记语言

用该语言编写的文件，以.html或者.htm为后缀

由浏览器解释执行

HTML页面上，可以嵌套用脚本语言编写的程序段，如：VBScript，JavaScript

 

HTML基础语法

1、标记语法

HTML用于描述功能的符号称为“标记”，比如

、

等

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

有封闭类型标记，也有非封闭类型的标记

封闭：成对出现，有开始，有结束，也叫双标签。如：

非封闭：只有开始没有结束，也叫单标签。如：
、

---

、

2、元素，即标记

每一对尖括号包围的部分

如

包围的部分就叫做body元素

元素就像是小标签，用于标识网页文档的不同部分

元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记

元素嵌套

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

注意：要注意嵌套的标签顺序；代码要以缩进的方式体现出来 

3、属性和值

属性用来修饰元素

标记名称>

属性的声明必须位于开始标记里；一个元素的属性可能不止一个，多个属性之间用空格隔开；多个属性之间不区分先后顺序

每个属性都有值

属性和属性的值之间用等号连接；属性的值包含在引号中

这是一个P

 

标准属性（公共属性、通用属性）：

大部分标签所具备的属性，

如：id（定义所在标签的唯一标识名称）

Title（鼠标移入到当前标签所在区域时所显示的文字）

Class（引用样式表中的指定类样式）

Style（定义当前标签的行内样式）

4、注释

注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示

为代码添加适当的注释是一种良好的编码习惯

添加注释的语法如下：

 

Ps：“”之间的任何内容都不会显示在浏览器中；注释不可以嵌套在其他注释中；注释不可以嵌在标记中；

5、HTML和XHTML、HTML5

1999年12月24日，W3C推荐标准HTML4.01

XHTML于2000年的1月26日成为W3C标准

与HTML4.01几乎相同；更严格更纯净的HTML版本

HTML5的目标，就是更为简洁的HTML代码（不再严格要求，并保证兼容性）

6、HTML文档的结构

文档类型声明  nbsp;html>

    整个文档的包含元素

页面头部

页面主体部分

-----------------------------------------------------

2015-9-01

1、

元素

 作用：网页头部，主要包含网页的说明信息。

①　网页标题  

 

----标题内容出现在浏览器最上方；标题标签没有任何属性；标题只能出现在head标签中；一个网页最多只能有一个标题。

②　网页的编码格式 

默认编码：ISO-8859-1

通过meta标签 

          通过meta标签  

③　声明内部样式表 

④　引入外部样式表

⑤　声明内部的js（javascript）脚本 <script></script>

⑥　引入外部的js（JavaScript）脚本

⑦　声明其他元素，如关键字、描述等

 添加网页的描述和关键字。Meta：一般做说明信息的声明。

常用属性：http-equiv(编码)  content  name  charset（编码）

添加关键

添加描述  

2、文本标记

作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。

特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.

空格： 

 

 > ：>  大于

 ¥ ：¥  人民币

 ©：©  企业标识

“："  引号

文本样式：对文本进行修饰。

... 加粗

...倾斜

...下划线

...删除线

^...上标

_...下标

 

3、标题元素  

标题元素让文字以醒目的方式显示，旺旺用于文章的标题

 一级标题

 二级标题

.

.

 六级标题

4、段落元素 

P提供了结构化文本的方式，具备一定的格式。

与其他文本用换行区分；添加垂直空白距离，作为段落的间距

P标签的常用属性：align：文本在p标签内的水平对齐方式

                  align=”center/left/right”

5、换行标记 

在任何地方创建手工换行

6、分区元素

多用于布局；方便以后对文本添加不同的样式

块分区元素：该元素会自动占一行

行内分区元素：众多的行内元素不会换行，在一行内显示

7、块级元素和行内元素

块级元素：div , p , hr , hn , ol , ul ....

作用：多数用于网页布局

行内元素：span, b, s, u, i,sub,sup.....

作用：包围文本，方便为文本添加效果 

8、分割线 

---

作用：在网页构建一条水平线。空标记。属于块级元素。

常用属性：size：尺寸，水平线的粗细程度

width：水平线的长度。（取值可以给具体值，可以给百分比（可随浏览器大小调整））

align：水平对齐方式（center、left、right）

color：颜色

9、预格式化标签

保留源文件当中的空格和换行格式

 

1、图像与链接

URL：统一资源定位器，用来标识网络中的任何资源

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

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

路径在web页面主要有三种形式：

绝对路径：文件从最高级目录下开始的完整路径

 如： E:\LXD_silence\HTML5Basic\Day01\demo01.html。

完整的URL组成：协议（http://）；主机名或域名（www.baidu.com）；                              

                     目录路径（img）；资源名称：音视频、图片、html（logo.gif）

           如： http://www.baidu.com/img/logo.gif

特点：无论当前资源路径是什么，使用绝对路径总能找到需要的资源。

相对路径：指文件的位置相对于当前文件的位置。它包括目录名，或指向一个可

以从当前目录出发找到该文件的路径。

平级用名字；子级进目录；父级向上返

根相对路径： /image/user.jpg

2、图像元素

使用元素将图像添加到页面；是一个空标记

属性： src：指定显示图像的路径

width：图像宽度

height：图像高度

title：鼠标移动到图片上所显示的文字

alt：图片不显示的时候的文字

3、链接元素

使用元素创建一个超级链接，语法如下：

文本

属性： href：链接URL

target：目标，可取值为_blank(新窗口中打开)、_self（在自身所在的页面打开网页）

name：锚点名称

 

链接的各种表现形式：

①　下载资源：下载

②　页面跳转：网页

 

③　电子邮件链接：联系我们 

④　返回页面的空链接：

⑤　链接到JavaScript：JS

锚点

通过a定义锚点：html中的锚点相当于是html文档中某个位置的记号

定义锚点： 

跳转到锚点：

跳转到其他锚点处：

 

 

2015-9-02

4、表格元素

表格的作用：具备固定格式的信息的布局。

定义表格用 

定义行

定义列

属性

height

align 内容在单元格的水平位置（left/center/right）

valign  内容在单元格的垂直位置（top/middle/bottom）

属性

width 宽    height 高

bgcolor  背景颜色

align 水平位置对齐方式       valign 垂直位置对齐方式

colspan  跨列  

rowspan  跨行

属性

  标题默认将在表格上方居中显示。紧随table标签之后

属性

列标题，与td是平级的（th是表头，默认居中、加粗）

行分组

表头行分组：thead

表主体行分组：tbody

表尾行分组：tfoot

 

5、结构标记

header  文档头部、页头（使用率较高，可以在同一个页面多次使用）

nav  导航   一般用于制作页面中的主导航

section  文档的节；文档的主体内容（使用率高，可多次使用）

aside  独立于主体内容之外的内容。如 边栏、侧导航...

article    文档中引用的一段文字。如文章、帖子、博客....

footer  页脚、文章结尾（使用率较高）

 

6、列表

有序列表：

 

属性：type: A / a / I / i / 1 定义序列的样式（a/A/I/i/1）

start  定义列表项是从几开始的

列表项：

1. 无序列表：

  

属性：type: disk/circle/square (实心圆、空心圆、方块) 

                列表项前的样式

列表项：

• 定义列表：

  多数出现在图文混排的样式效果中

         定义列表

      列表标题（可以插入图像）

     列表内容（做文字描述 ）

   

  7、表单

  ①表单标签：

（不放在form中的数据是提交不到服务器上的）

属性：action动作（服务器处理数据的程序地址，由服务器端开发人员来

提供，默认提交到本页。）

  method  表单将以什么样的方式将数据提交给服务器

（是以明文还是密文的方式）， 默认值：get

取值：post 以密文的方式发送数据到服务器上，

不限制传递数据的长度

   get 以明文的方式发送数据到服务器上，

限制传递数据的长度2kb

name  定义表单的名称

enctype  表单数据的编码方式

 

②表单元素(控件)

作用：专门接受用户的数据

1.Input元素

type:类型

 文本框。接受用户输入的普通数据

 密码框。

以密文的方式显示数据，密码的录入使用该控件

 复选框。注意：name属性要一致

 提交按钮。

功能：用于提交表单到服务器上

 重置按钮。

作用：将所有的表单元素恢复到默认值状态

 

2、textarea多行文本域

3、select和option

4、其他元素

（单元格）

所有放在table里的内容必须放在td里

属性

边框属性：border 边框宽度

bordercolor 边框颜色

尺寸： width 宽     height 高   （可以是绝对的数值，也可以是百分比）

背景： bgcolor 背景色     background 背景图

细节： align  水平对齐方式

cellspacing  单元格与单元格之间的距离（单元格的外边距）

cellpadding  单元格内文本与单元格边框的距离（单元格的内边距）