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文档的结构
文档类型声明
整个文档的包含元素
页面头部
页面主体部分
-----------------------------------------------------
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:图片不显示的时候的文字
3、链接元素
属性: 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 单元格内文本与单元格边框的距离(单元格的内边距)
属性
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 定义列表项是从几开始的
列表项:
无序列表:
属性:type: disk/circle/square (实心圆、空心圆、方块)
列表项前的样式
列表项:
定义列表:
多数出现在图文混排的样式效果中
定义列表
列表标题(可以插入图像)
列表内容(做文字描述 )
7、表单
①表单标签:(不放在form中的数据是提交不到服务器上的)
属性:action动作(服务器处理数据的程序地址,由服务器端开发人员来
提供,默认提交到本页。)
method 表单将以什么样的方式将数据提交给服务器
(是以明文还是密文的方式), 默认值:get
取值:post 以密文的方式发送数据到服务器上,
不限制传递数据的长度
get 以明文的方式发送数据到服务器上,
限制传递数据的长度2kb
name 定义表单的名称
enctype 表单数据的编码方式
②表单元素(控件)
作用:专门接受用户的数据
1.Input元素
type:类型
文本框。接受用户输入的普通数据
密码框。
以密文的方式显示数据,密码的录入使用该控件
复选框。注意:name属性要一致
提交按钮。
功能:用于提交表单到服务器上
重置按钮。
作用:将所有的表单元素恢复到默认值状态
2、textarea多行文本域
3、select和option
4、其他元素
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
相关文章
相关视频
网友评论
文明上网理性发言,请遵守 新闻评论服务协议我要评论
立即提交
专题推荐独孤九贱-php全栈开发教程
全栈 100W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
玉女心经-web前端开发教程
入门 50W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
天龙八部-实战开发教程
实战 80W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
php中文网:公益在线php培训,帮助PHP学习者快速成长!
Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1