HTML
第一章HTML5基础
HTML简介
HTML是用来描述网页的一种语言,它是一种超文本语言,也就是说,HTML不是一种编程语言,它是一种标记语言,它由一套标记标签组成,在制作网页时,HTML使用标记标签来描述网页。
HTML5的优势
1.世界知名浏览器厂商对HTML的支持
通过对Internet Explorer Google firfox Safari Opera等主要的Web浏览器发展策略调查发现他们都在支持HTML5.
2.市场的需求
现在的市场已经迫不及待的要求有一个统一的互联网常用标准。HTML5之前的情况是由于各浏览器之前的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及计算机分交换被标准化。
3.跨平台
HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，pc网站，各种移动设备，插件等核心代码就可以不需要重新编译，极大的减少了开发人员的工作量。
4.W3C标准
W3C标准不是某一个标准，而是一系列标准集合，一个网页主要由三部分组成，即结构，表现和行为。其中，W3C标准包括结构化标准语言（HTML）。
网页编辑工具
使用WebStorm编辑HTML文档的步骤：
（1）打开WebStorm编辑器后，选择File—new—HTML File命令，打开“HTML File”对话框。
（2）在“name”文本框中输入HTML的文件名，在“Kind”下拉框中选择“file”选项，单击“OK”按钮即可创建一个HTML5的页面的模板。
（3）在body元素和title元素中添加网页内容。
（4）网页添加完成后，鼠标移动到WebStorm编辑器右上方，会出现几个常见的浏览器图标，单击Chrome浏览器图标即可打开该页面。
HTML5文件的基本结构
标记在有的地方称为标签或者元素，其实他们都是指同一种东西，标签都是成对出现的，有开头就有结尾，最基本的语法是<标记>内容</标记>，其中整个HTML包括头部（head）和主体（body）两部分，头部还包括网页标题（title）等基本信息，主体还包括网页的内容信息，如图片文字等。
网页的基本信息
1.DOCTYPE声明
约束HTML文档结构，检查是否符号相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE必须位于HTML文档的第一行。
</!doctype>
2.<title>标签
使用<title>标签描述网页的标题,类似一篇文章的标题,一般为一个简介的主题,并能使读者有兴趣读下去.
使用该标签描述网页的摘要信息,包括文档内容的信息,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等.
(1)文档内容类型,字符编码信息如下.
属性:char表示字符集编码,常用的编码有以下几种.
gb312:简体中文,一般用于包含中文和英文的页面
ISO-885901:纯英文,一般用于只包含英文的页面
big5:繁体,一般用于带有繁体字的页面
UTF-8:国际通用的字符编码,同样适用于中文和英文页面,和gb312编码相比,国际通用性更好
在保存文件时编码方式一定要与HTML5页面中标签中的编码方式保持一致,否则,将会出现乱码
(2)搜索关键字和内容描述信息书写如下
实现的方式仍然为,"名称/值"对的形式,其中keywords表示搜索关键字,discription表示网站内容的具体描述.通过提供关键字和内容描述信息,方便搜索引擎的搜索.
网页的基本标签
1.标题标签
例如,一级标题采用h1二级标题采用<h2>,
其他级别依次类推.HTML一共采用了六级标签<h1>~<h6>,<h6>字号最小.
示例 1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>不同等级的标题标签对比</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2.段落标签和换行标签
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起</p>
<p>有勇气就有奇迹.</p>
</body>
</html>
段落标签<p>…</p>表示一段文字等内容.例如希望描述"北京欢迎你"这首歌,包括歌名(标题)和歌词(段落),则展示效果如下:
3.水平线标签
水平线标签
表示一条水平线,该标签与
一样比较特殊,没有结束标签.
示例3:
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title>换行标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>
北京欢迎你,有梦想谁都了不起!<br/>
有勇气就会有奇迹.<br/>
北京欢迎你,为你开天辟地<br/>
流动中的魅力充满着朝气.<br/>
北京欢迎你,在太阳下分享呼吸<br/>
在黄土地刷新成绩.<br/>
北京欢迎你,像音乐感到你<br/>
让我们加油自己去超越.<br/>
</p>
</body>
</html>
HTML中常用的特殊符号及其对应的字符实体
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 | 百度 | |
| 大于号(>) | > | 如果时间>晚上6点,就坐车回家 |
| 小于号(<) | &It; | 如果时间早上7点就走路去上学 |
| 引号(") | " | W3C规范中,HTML的属性值必须要用成对的" |
| 版权符号(@) | © | ©200013-2018北大青鸟 |
演示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<title>特殊符号的应用</title>
</head>
<body>
©20013-2018 Beijing Aptech Beida Jade Bird Infor
mation TechnllotyCo.Lad<br />
北京阿博泰克北大青鸟信息技术有限公司
</body>
</html>
图片示例:
4.图像标签
1.JPG格式
此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百种颜色,随着JPG格式文件品质的提高,文件的大小和下载时间也会随之增加.
2.GIF格式
GIF格式是使用最广泛,最普遍的一种图像形式,它是图像交换格式,Gif格式在网页的背景和一些多层特效的显示上用的非常多,还支持动画,这是它最突出的一个特点.
3.BMP格式
BMP格式图像在windows操作系统中使用的比较多,它是位图,BMG形式图像文件不支持压缩,也不适用于Web.
4.PNG格式
PNG兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性.流式网络图形格式.
基本语法:
<img src=“图片地址” alt=“图像的替代文字” title=“鼠标悬停提示文字” width=“图片宽度”
height=“图片高度”/>
举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图像标签的应用</title>
</head>
<body>
<p>
<img src="image/hetao.jpg" width="160"
height="160" alt="无漂白薄皮核桃">
</p>
<p>
楼兰密语,新疆野生核桃<br/>
无漂白薄皮核桃500g*2包<br/ >
$48.8
</p>
</body>
</html>
5.超链接的基本用法
链接包含俩部分,一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应位标签的属性,二是链接文本或图像,单击该文本或图像,将跳转到href属性指定的链接地址,超链接的基本语法如下:
语法
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href : 表示链接地址的路径
target:表示链接在哪个窗口打卡,常用的取值有_self(自身窗口),_blank(新建窗口位置)
超链接也可以是文本超链接,也可以是图像超链接.
根据链接的地址是指向站外文件还是站内文件,链接又分为绝对路径和相对路径
<1>绝对路径:指向目的地址是完整描述,一般指向本站点外的文件.
<2>相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要完整的url地址的形式.
另外,站内使用相对路径时常用到两个特殊符号:"…/“表示当前目录的上级目录,”…/…/"表示当前目录的上上级目录.
6.超链接的应用场合
1.页面间链接
页面间链接就是从一个页面链接到另外一个页面
2.锚链接
锚链接常用于目标页内容很多,需定位到目标内容的某个具体位置时
语法:
<a name="make">目标位置已</a>
name为标签的属性,marker为标记名,其功能类似于古时用于固定船的锚(或沟).
语法:
<a href="#marke">当前位置甲</a>
3.功能性链接
功能性链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机的自带的某个应用程序,如网上常见的电子邮件,qq,msn等链接.
电子邮件链接的用法是"maito.电子邮件地址"
行内元素和块元素
块元素特性:无论内容多少,该元素独占一行
行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一行.
第二章列表,表格与媒体元素
列表
无序列表
无序列表由<ul>标签和
li标签组成,使用<ul>标签作为无序列表的声明,
使用li标签作为每个列表的起始.
语法
<ul>
<li>第一项<li>
<li>第二项<li>
<li>第三项<li>
<ul>
遵循W3C标准,ul标签里面只能嵌套
li标签,不能嵌套其他标签li标签里面可以嵌套任意标签
无序列表的特性如下
(1)没有顺序,每个<li>标签独占一行(块元素)
(2)默认<li>
标签项前面有实心小圆点
(3)一般用于无序列表的列表,如导航,侧边栏
有训列表
由<ol>标签和<li>标签组成,使用
- 标签作为有训列表的声明,使用
- 标签作为每个列表的起始,只能嵌套
- 标签
-
语法
<ol> <li>....<li> <li>.....<li> <ol>有序列表的特性如下
(1)有顺序,
每个li标签独占一行(块元素)(2)默认
li标签项前面有顺序标记(3)一般用于排序列表
定义列表
定义列表是一种很特殊的列表形式,它是标题及列表的结合
语法
<dl> <dt>标题一<dt> <dd>......<dd> <dd>.......<dd> <dt>标题二<dt> <dd>.......<dd> <dd>.......<dd>有序列表的特性如下
(1)没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)
(2)默认没有标记
(3)一般用于(一个标题下有一个或多个列表)*n
表格
1.单元格
单元格是最小的单位,一个或多个单元格纵横排列组成了表格
2.行
一个或多个行单元格横向堆叠形成了行
3.列
一个或多个行单元格纵向堆叠形成了行
语法
<table> <tr> <th>第一个单元格的内容</th> <th>第二个单元格的内容</th> </tr> <tr> <td>第一个单元格的内容</td> <td>第二个单元格的内容</td> </tr> </table>表格的跨列与跨行
1.表格的跨列
语法
<table> <tr> <td colspan="所跨的列数">单元格内容</td> </tr> </table>2.表格的跨行
语法
<table> <tr> <td rowspan="所跨的行数"单元格内容</td> </tr> </table>HTML5的媒体元素
视频元素
1.video元素
HTML5中的video元素是用来播放视频的,支持Ogg,MPEG4,WebM等视频格式
语法
<video src="视频路径" controls="controls" ></video>语法
<video controls> <source src="video/.webm"/> <source src="video/.mp4" </video>音频元素
1.audio元素的基本语法
HTML5中的audio元素是用来播放视频的,支持Ogg,MP3,WAv等视频格式
语法
<audio src="音频" controls="controls"><audio>语法
<audio controls> <source src="music/music.mp3"/> <source src="music/music.ogg"/> </audio>页面布局
HTML的结构元素
元素名 描述 header 标题头部区域的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或页面的一块区域) section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容 <iframe>框架
语法
<iframe src="应用页面地址" name="框架标识名"....></ifarme><iframe>内联框架的常用属性包括name,width,heigth,其中name属性可以和前面的锚链接结合起来实现页面间的相互跳转
(1)在被打开的框架上加name属性,
<ifarme name="maininfarm" src="subfframe/the.html"/>(2)在超链接上设置<target>目标窗口属性为希望显示的框架窗口名
<a href="subframe/the-html" target="mainfarman">下边显示第二页</a>第三章表单
表单的应用:
1.登录,注册,登录时填写用户名,密码,注册时填写用户名,电话等个人信息
2.网上订单,在网上购买商品,一般要求填写姓名,联系方式,付款方式等
3.调查问卷,回答对某些问题的看法,以便形成统计数据
4.网上搜索,输入关键字,搜索想要的可用信息
表单标签及表单属性
标签的属性
属性 说明 action 此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的提交按钮后,信息发送到web服务器上,由action属性所指定的程序处理 method 此属性告诉浏览器如何将时间发送给服务器 其中method有两种方法:
以<post>方法提交
(1)以<post>方法提交表单,在名字和密码框中,分别输入用户名和lucker和密码123456.单击提交按钮,地址栏中的url信息没有发生变化
(2)以<get>方式提交,在单击提交按钮,地址栏中的url信息会被提交上去
基于以上两点的区别,post方法提交的数据安全性更高,在日常开发中,尽可能的还是采用<post>方法.
表单元素及其格式
input 标签中的常用属性
属性 说明 type 此属性指定表单元素的类型,可用的类型有text,password,chekbox,radio,submit,rest,file,email,默认为text name 此属性指定表单元素的名称 value 此属性是可选属性,它指定表单元素的初始值.如果type为radio类型,则必须指定一个值 size 此属性指定单元格的初始宽度 maxlength 此属性用于指定text或password元素中输入的最大字符,默认为无限大 checked 此属性用于指定按钮是否被选中 1.文本框
在表单中最常用,将表单元素type属性设为text类型即可
2.密码框
将表单元素type属性设为password类型即可,设置了pyte属性,在密码框输入的字符全都以黑色实心的圆点来显示
3.单选按钮
单选按钮控件用于一组排斥按钮,用户只能选中一个单选按钮,只有从组中选中的单选按钮才会在提交的数据中提交对应的数值,在使用单选按钮时,需要一个显示value属性
其中有一个默认选项,可以使用checked
4.复选框
复选框的类型时checkbox,与单选框类似,只不过可以选择多个选项用户可以选中某个复选框,也可以取消选中.一但用户选中了某个复选框,在提交表单时,会将该复选框的name值和对应的value值一起提交
5.列表框
列表框通过标签和标签来实现的,标签用于显示可供用户选择的列表框,每个选项由一个标签来实现,标签至少包含一个标签
6.按钮
(1)rest按钮:用户单击该按钮后,无论表单中是否已经填写或输入数据,表单中的各个表单元素都会被重置成最初状态,而填写或输入的数据都会被清空
(2)submit按钮:用户单击该按钮后,表单将会提交到action属性所指定的url,并传递表单数据
(3)button按钮:属于普通按钮,需要与事件关联使用
7.多行文本域
当需要在网页输入两行或多行以上的文本时,我们将使用标签
语法
<textarea naem="textarea" cols="显示的列数" rows="显示的行数"> 文本内容 </textarea>8.文件域
文件域的作用是用于实现文件的选择,在应用时只需要把type属性设为file即可.
文件域在不同的浏览器显示的效果是不一样的,但是功能是一样的,如果想要它在不同的浏览器中显示的一样,可以使用css样式进行修改
9.邮箱
Email类型的input元素是一种专门应用于输入Email地址的文本框,与上面表单元素不同的是Email在提交表单的时候会自动验证Email文本框的值,如果不是有效的邮箱地址,则输入不允许提交表单.
10.网址
url类型的input元素提供用于输入url地址这一类特殊的文本的文本框,提交表单时,如果输入不是url地址格式的表单将不允许提交表单
11.数字
number类型的input元素提供了用于输入数字的文本框,我们还可以对接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等,如果输入的数字不在规定的范围之类,则会出现错误提示.
number类型的属性
属性 值 描述 value number 规定的默认值 min number 规定允许的最小值 max number 规定允许的最大值 step number 规定合法的数据间隔 12.滑块
以"range"类型使用,与number类型的属性时用于的类型属性时一样的这两种类型的不同之处在于外观表现上
支持range类型的浏览器都会显示滑块
属性 值 描述 value number 规定的默认值 min number 规定的最小值 max number 规定的最大值 step number 规定合法的数据间隔 13.搜索框
search类型的input元素提供用于输入搜索关键字的文本框,虽然外观看起来search类型和input的普通text类型差不多,但是实现起来却并不容易.
表单的高级应用
1.设置表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域
2.表单的只读与禁用设置
只读和禁用效果分别通过设置readonly属性和disabled属性来实现
通常只读属性用于不希望用户对数据进行修改的场合,禁用属性则可以配合其他控件使用.
3.表单元素的标标准
语法
<label for="表单元素的id">标注的文本</lable>对于表单元素而言,其name属性于id属性都是必须的,name属性由表单负责处理,而id属性是给label标签和表单元素进行关联使用
4.表单的初级验证
1.plaeeholder
plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx.
2.required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单.
3.pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.匹配就能提交,否则不能提交.
ch类型的input元素提供用于输入搜索关键字的文本框,虽然外观看起来search类型和input的普通text类型差不多,但是实现起来却并不容易.
表单的高级应用
1.设置表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域
2.表单的只读与禁用设置
只读和禁用效果分别通过设置readonly属性和disabled属性来实现
通常只读属性用于不希望用户对数据进行修改的场合,禁用属性则可以配合其他控件使用.
3.表单元素的标标准
语法
<label for="表单元素的id">标注的文本</lable>对于表单元素而言,其name属性于id属性都是必须的,name属性由表单负责处理,而id属性是给label标签和表单元素进行关联使用
4.表单的初级验证
1.plaeeholder
plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx.
2.required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单.
3.pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.匹配就能提交,否则不能提交.
630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
