HTML笔记（1）_html/css_WEB-ITnose
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文档的结构
文档类型声明
整个文档的包含元素
页面头部 页面主体部分-----------------------------------------------------
2015-9-01
1、
元素作用：网页头部，主要包含网页的说明信息。
① 网页标题
----标题内容出现在浏览器最上方；标题标签没有任何属性；标题只能出现在head标签中；一个网页最多只能有一个标题。
② 网页的编码格式
默认编码：ISO-8859-1
通过meta标签
通过meta标签
③ 声明内部样式表
④ 引入外部样式表
⑤ 声明内部的js（javascript）脚本
⑥ 引入外部的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：图片不显示的时候的文字
属性： href：链接URL
target：目标，可取值为_blank(新窗口中打开)、_self（在自身所在的页面打开网页）
name：锚点名称
链接的各种表现形式：
① 下载资源：下载
② 页面跳转：网页
③ 电子邮件链接：联系我们
⑤ 链接到JavaScript：JS
锚点
通过a定义锚点：html中的锚点相当于是html文档中某个位置的记号
2015-9-02
4、表格元素
表格的作用：具备固定格式的信息的布局。
定义表格用
| （单元格） 所有放在table里的内容必须放在td里 边框属性：border 边框宽度 bordercolor 边框颜色 尺寸： width 宽 height 高 （可以是绝对的数值，也可以是百分比） 背景： bgcolor 背景色 background 背景图 细节： align 水平对齐方式 cellspacing 单元格与单元格之间的距离（单元格的外边距） cellpadding 单元格内文本与单元格边框的距离（单元格的内边距） |
| 属性 | 属性 |
|---|
上一篇： AngularJS自定义指令及指令配置项的实现技巧
下一篇： 无new构建详解
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论