HTML基础

一、认识web

「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

「浏览器」是网页显示、运行的平台。

「浏览器内核」(排版引擎、解释引擎、渲染引擎)

IE	Trident	-ms-
firefox	Gecko	-moz-
Safari	Webkit	-webkit-
chrome	WebKit	-webkit-
Opera	Presto(新：blink)	-o-

web标准

结构标准：用于对网页元素进行整理和分类(HTML)

表现标准：用于设置网页元素的版式、颜色、大小等外观属性(CSS)

行为标准：用于对网页模型的定义及交互的编写(JavaScript)

优点：

易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

二、HTML

HTML (Hyper Text Markup Language):超文本标记语言

1. 含义:

a. 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）

b. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

2. 格式：

实例

<!DOCTYPEhtml><!--页面中最大的标签根标签--><htmllang="en"><!--头部标签--><head><metacharset="UTF-8"><!--标题标签--><title></title></head><!--文档的主体--><body></body></html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

说明：

●<!DOCTYPEhtml>

<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。

●lang

lang指定该html标签内容所用的语言，en定义语言为英语zh-CN定义语言为中文

● 字符集

UTF-8是目前最常用的字符集编码方式

3.HTML标签关系

●嵌套关系：父子级包含关系

●并列关系：兄弟级并列关系

■ 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

4. html常用标签

a. 排版标签

●标题标签h(h1~h6)

●段落标签p

●水平线标签hr

●换行标签br

b. 盒子标签

●div

●span

c. 图像标签

●img

d. 超链接标签

●a

e. 表格标签

●table

○ table:用来定义表格的标签

○tr:用来定义表格中的行，必须嵌套在<table></table>标签中

○td:用来定义表格中的单元格，必须嵌套在<tr></tr>标签中

○th:用来定义表格中的表头，表头单元格里面的内容加粗居中显示

●表格结构标签

●thead

●tbody

●合并单元格

○跨行合并：rowspan=“合并单元格的个数”

○跨列合并：colspan="合并单元格的个数"

f. 列表标签

● ul

无序列表: 里面只能包含li，没有顺序。li里面可以包含任何标签

●ol

有序列表: 里面只能包含li，有顺序

●dl

自定义列表: 里面只能包含dt和dd，dt和dd里面可以放任何标签

g. 表单标签

●表单域

<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

●表单控件

○input

input是个单标签，type属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

属性值	描述
button	按钮
checkbox	复选框
file	文件上传
hidden	隐藏的输入字段
image	图像形式的提交按钮
password	密码字段。该字段中的字符被掩码
radio	单选按钮
reset	重置按钮。重置按钮会清楚表单中的所有数据。
submit	提交按钮。提交按钮会把表单数据发送到服务器。
text	单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

除 type 属性外，<input>标签还有很多其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度
readonly	readonly	规定输入字段是只读的。
disabled	disabled	规定输入字段是禁用的。
size	正整数	属性规定输入字段的尺寸（以字符计）

○ label

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验label标签的for属性应当与相关元素的id 属性相同

○ textarea

用于定义多行文本输入的控件, cols: “每行中的字符数” ，rows:“显示的函数”

○select

下拉表单元素,<select>中至少包含一对<option>,在<option>中定义selected="selected"时，当前项即为默认选中项

注：

单选框和复选框要有相同的name值，value可以不一样

h. 文本格式化标签

●b和strong文字以粗体显示

●i和em文字以斜体显示

●s和del文字以加删除线显示

●u和ins文字以加下划线显示

三、HTML5

1.新增语义化标签

●< header > :头部标签

●< nav >: 导航标签

●< article >：内容标签

●< section >:定义文档某个区域

●< aside >:侧边栏标签

●< footer >: 尾部标签

2. video

视频标签

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频,循环播放
preload	auto(预先加载视频)none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url的地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

3. audio

音频标签

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	循环播放
src	url	要播放的音频的url

4. 新增的input类型

属性值（type）	说明
email	限制用户输入必须为Email类型
url	限制用户输入必须为URL类型
data	限制用户输入必须为日期类型
time	限制用户输入必须为时间类型
month	限制用户输入必须为月类型
week	限制用户输入必须为周类型
number	限制用户输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

5. 新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	用户自定义	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提示

一、认识web

web标准

二、HTML

实例

三、HTML5

更多相关文章

随机推荐