HTML5基础

最新推荐文章于 2024-04-18 16:28:46 发布

漂游大叔

最新推荐文章于 2024-04-18 16:28:46 发布

阅读量889

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_29764065/article/details/82862424

版权

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML介绍

什么是HTML

HTML(Hyper Text Markup Language):超文本标记语言，一种纯文本类型的语言

用该语言编写的文件，以.html或者.htm为后缀，由浏览器解释执行

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

Web浏览器

主要功能：代理访问者提供请求，作为HTML解释器和内嵌脚本程序执行器，用图形化的方式显示HTML文档

主要WEB浏览器有：IE\FIREFOX\CHROME等等

标记

HTML用于描述功能的符号称为”标记”，比如<p>、<h1>等

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

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

封闭类型标记(也叫双标记)：必须成对出现

--<标记>内容</标记>

如：<h2>内容<h2>

非封闭类型标记，也叫做空标记，或者单标记

--<标记>或者<标记/>

如：<hr>、<br/>

元素和属性

元素

--即标记

--每一对尖括号包围的部分，如<body></body>包围的部分就叫做body元素

属性

--用来修饰元素

--每个属性都有值

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

--一个标记的属性可能不止一个，多个属性之间用空格隔开

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

通用属性

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

有些属性是绝大多数元素都支持的属性，称为通用属性(或标准属性)

--id

--title

--class

--style

注释

HTML的文档结构

文档类型声明

在文档的起始用DOCTYPE声明指定版本和风格，让浏览器清楚文档的版本、类型和风格

<!doctype html>

Html页面

文件头：<head></head>

文档主体部分：<body></body>

网站代码结构：

<html>

<head>

#设置浏览器的阅读编码

#设置网站首页的标题

#设置网站的关键字

#网站的描述

</head>

<body>

#可见的网站骨架或实体内容

</body>

</html>

html实体

> <

< >

空格

<< «

>> »

& &

" "

' '

× ×

÷ ÷

与浏览器交互，表单标签

列表的作用

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

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

--列表类型：有序列表<ol>和无序列表<ul>

--列表项：<li>，用于指示具体的列表内容

有序列表<ol>

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

<ol>元素中也只能包含列表项元素<li>

<li>three</li>

</ol>

无序列表<ul>

<ul>元素表示无序列表，用于列出页面上没有特定次序

<ul>元素中只能包含具体的列表项元素<li>

--列表中包含的每一项都必须包含在起始标记<li>和结束标记</li>之间

<ul >

<li>three</li>

</ul>

列表嵌套

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

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

<ul>

<li>

web基础知识

<ul>

<li>web的工作原理</li>

</ul>

</li>

<li>

html快速入门

<ul>

</ul>

</li>

</ul>

表格的作用

表格通常用来组织结构化的信息

表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的

表格的数据保存在单元格里

--显示表格数据

--设置页面布局

创建表格

定义表格：使用成对的<table></table>标记

创建表行：使用成对的<tr></tr>标记

创建单元格：使用成对的<td></td>标记

表格的常用属性

<table>元素

--1.width：宽

--2.height：高

--3.border：边框

--4.bordercolor：边框颜色

--5.cellspacing：单元格间距

--6.cellpadding：补白

--7.align：表居中

<tr>元素

--align/valign

<td>元素

--1.width 宽

--2.height 高

--3.colspan 合并列

--4.rowspan 合并行

--5.align left|center|right

--6.valign top|middle|bottom

表格标题<caption>

使用<caption>元素为表格定义标题

--默认情况下，标题将在表格上方居中显示

<caption>标签必须紧随<table>标签之后，且只能对每个表格定义一个标题

行分组

表格可以划分为3个部分：表头、表主体和表尾

表头行分组：<thead></thead>

表主体行分组：<tbody></tbody>

表尾行分组：<tfoot></tfoot>

--包含一个或者多个<tr>元素

</tr>

</thead>

</tr>

</tr>

</tbody>

</table>

不规则表格

设置单元格<td>的跨行或者跨列属性

跨列：colspan

--水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数

跨行：rowspan

--垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数

</tr>

</tr>

</table>

表格的嵌套

嵌套表格

--在单元格中放置另一个表

--即<td>元素中再包含<table>元素

使用嵌套的表格以设计复杂表格或者复杂布局

表单的作用

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

表单有两个基本部分

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

--提交后的表单处理

界面元素

--使用<form>元素创建表单

--在<form>元素中添加其他表单可以包含的控件元素

表单元素<form>

定义表单：使用成对的<form></form>标记

主要属性

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

--method：方法用于向 action URL 发送数据的 HTTP 方法。默认是 get。建议：method="post"

--enctype：编码方式用于对表单内容进行编码的MIME类型。存在文件的时候需要加enctype="multipart/form-data"

--name：表单名称

表单控件

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

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

表单控件元素有

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

--textarea元素

--select和option元素

--其他元素

<input>元素

<input>元素用于收集用户信息

该元素是一个单标记，语法为：<input/>

主要属性

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

--value：控件的数据

--name：控件的名称

--placeholder：帮助用户填写输入字段的提示

文本框与密码框

文本框：<input type=”text”/>

密码框：<input type=”password”/>

主要属性

--value属性：由访问者自由输入的任何文本

--maxlength属性：最大长度定义文本域中所允许的字符最大数目

--readonly属性：可以带值指示是否可修改该字段的值

--disabled属性：不能带值当input元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。注释：不能与type="hidden"一同使用

单选框和复选框

单选框：<input type=”radio”/>

复选框：<input type=”checkbox”/>

主要属性

--value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器

--name：用于实现分组，一组单选框或者复选框的名称必须相同

-checked：设置选中

性别：<input type="radio" name="six"/>男

<input type="radio" name="six"/>女

<br/>

爱好：<input type="checkbox" name="lick"/>看书

<input type="checkbox" name="lick"/>听歌

<input type="checkbox" name="lick"/>看电影

按钮

提交按钮：<input type=”submit”/>

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

重置按钮：<input type=”reset”/>

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

普通按钮：<input type=”button”/>

--用于执行客户端脚本

主要属性

--value：按钮的标题文本

<br/>

<br/>

隐藏域和文件选择框

隐藏域：<input type="hidden"/>

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

文件选择框：<input type="file"/>

--选择要上传的文件

<label>元素

语法：<label>文本</label>

主要属性：

--for：表示与该元素相联系的控件的ID值

作用：

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

<label for="chkHid">不要公开我的信息</label>

选项框

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

<select>：创建选项框

--name：选项框命名

--size：大小1，则为滚动列表

--multiple：设置多选

<option>：选项

--value：选项的值

--selelcted：预选中

</select>

</select>

<textarea>元素

多行文本输入框

--<textarea>文本</textarea>

主要属性：

--cols：指定文本区域的列数

--rows：指定文本区域的行数

--readonly：只读

为控件分组

<fieldset>元素：为控件分组

--将表单内容的一部分打包，生成一组相关表单的字段

--当一组表单元素放到<fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素

主要属性：

--disabled：true|false 定义fiedset是否可见

--form：true|false 定义该fieldset所属的一个或多个表单

<legend>元素：为分组指定一个标题

<form>

</form>

</fieldset>

从拾色器中选择一个颜色:color 类型用在input字段主要用于选取颜色(只支持谷歌)

定义一个时间控制器:date 类型允许你从一个日期选择器选择一个日期(只支持谷歌)

定义一个数值输入域(限定):number 类型用于应该包含数值的输入域

表单元素：

1.文本元素

2.密码元素

3.文件元素

4.确认元素

5.重置元素

6.下拉菜单

</select>

7.单选

8.多选

9.文本域

button标签

在button元素内部，您可以放置内容，比如文本或图像。该元素与使用input元素创建的按钮之间的不同之处

主要属性：

--autofocus：true|false 在页面加载时，是否让按钮获得焦点

--disabled：disabled 禁用按钮

--name：button_name 为按钮规定唯一的名称

--type：button|reset|submit 定义按钮的类型

--value

颜色：开发一般用十六进制

1.英文

red;

green;

blue;

1.十进制

RGB(255,0,0);

RGB(0,255,0);

RGB(0,0,255);

2.十六进制

#ffffff; 白色

#ff0000; 红色

#00ff00; 绿色

#0000ff; 蓝色

#000000; 黑色

#ffff00; 黄色

#00ffff; 青色

#ff00ff; 紫色

3.带有透明度

RGBA(255,0,0,0.5);

RGBA(0,255,0,0.5);

RGBA(0,0,255,0.5);

格式标签

br //换行，单标签

nobr //不换行，双标签

hr //导航线

p //段落，align属性:left|center|right

center //居中，不在使用

pre //按源代码显示

ul //无序列表，组合li使用

ol //有序列表，组合li使用

dl //自定义列表，组合dt、dd使用

dt //自定义标签

dd //自定义列表内容

文本标签

h1-h6 加粗字体

b 加粗

i 斜体

u 下划线

font 文字，设置文字大小，颜色

语义化标签

1.article 文章

2.footer 页脚

3.header 头

4.nav 定义导航链接的部分

5.section 部分

所有浏览器都支持都视频方式：

视频标签

属性的值

1.autoplay autoplay 如果出现该属性，则视频在就绪后马上播放

2.controls controls 如果出现该属性，则向用户显示控件，比如播放按钮

3.end numeric value 定义播放器在视频流中的何处停止播放。默认地，声音会播放到结尾

4.height pixels 设置视频播放器的高度

5.loopend numeric value 定义在视频流中循环播放停止的位置，默认是end属性的值

6.loopstart numeric value 定义在视频流中循环播放的开始位置，默认是start属性的值

7.playcount numeric value 定义视频片段播放多少次，默认是1

8.poster url 在视频播放之前所显示的图片的URL

9.src url 要播放的视频的URL

10.start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放

11.width pixels 设置视频播放器的宽度

HTML5音频、视频控制

1.vobj.play();

2.vobj.pause();

音频标签

属性的值

1.autoplay true|false 如果是true，则音频在就绪后马上播放

2.controls true|false 如果是true，则向用户显示控件，比如播放按钮

3.end numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾

4.loopend numeric value 定义在音频流中循环播放停止的位置，默认是end属性的值

5.loopstart numeric value 定义在音频流中循环播放的开始位置。默认是start属性的值

6.playcount numeric value 定义音频片断播放多少次。默认是1

7.src url 所播放音频的 url

8.start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放

漂游大叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML5基础

HTML介绍

什么是HTML

Web浏览器

标记

元素和属性

通用属性

注释

HTML的文档结构

html实体

标签

<head>元素

文档头部内容<title>

文档头部内容<meta>

标题元素<hn>

段落元素<p>

换行元素<br>

地址元素<address>

分区元素<span>和<div>

行内元素与块级元素

URL

相对路径和绝对路径

图像元素<img>

链接元素<a>

锚点

与浏览器交互，表单标签

列表的作用

有序列表<ol>

无序列表<ul>

列表嵌套

表格的作用

创建表格

表格的常用属性

表格标题<caption>

行分组

不规则表格

表格的嵌套

表单的作用

表单元素<form>

表单控件

<input>元素

文本框与密码框

单选框和复选框

按钮

隐藏域和文件选择框

<label>元素

选项框

<textarea>元素

为控件分组

button标签

颜色：开发一般用十六进制

格式标签

文本标签

语义化标签

视频标签

HTML5音频、视频控制

音频标签