目录:看左边
前言
提示:持续更新中
自己学习写的内容,参考书本《HTML5+CSS3+Bootstrap》
提示:以下是本篇文章正文内容
一、HTML标签
1.1 HTML概述
HTML是(Hypertext Markup Language)超文本标记语言的缩写,是用于描述网页文档的一种标记语言。
标记语言是一套标记标签 (markup tag)
1.2 文档结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="#" />
<script language="JavaScript" src="#"></script>
<style>/**/</style>
<script></script>
</head>
<body>
正文
</body>
</html>
1.3基本标签
1.块级元素
1.标题标签<hn></hn>
<h1><h2><h3><h4><h5><h6>n可以取1~6的整数</h6></h5></h4></h3></h2></h1>
2.<blockquote></blockquote>长引用
3.<pre></pre>预格式化文本
4.<hr/>水平线
5.<address></address>地址
6.列表
<!--无序列表-->
<ul>
<li>serif</li>
<li>sans-serif</li>
<li>Helvetica</li>
<li>Verdana</li>
</ul>
<!--有须列表-->
<ol>
<li>serif</li>
<li>sans-serif</li>
<li>Helvetica</li>
<li>Verdana</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>中文字体</dt>
<dd>宋体</dd>
<dd>微软雅黑</dd>
<dt>英文字体</dt>
<dd>Sans-serif</dd>
<dd>Serif</dd>
</dl>
2.内联元素
1.<br/>换行
2.<b></b>粗体 <i></i>斜体 <small></small>更小的文本
<b>This text is bold</b>
<i>This text is italic</i>
<small>This text is small</small>
3.<code>定义计算机程序代码文档</code>、<kbd>定义键盘文本</kbd>、<samp>定义样本文本</samp>、<var>定义变量或程序参数</var>、<dfn>标记特殊</dfn>、<cite>定义引用;引用另一个文档,比如书或杂志的标题</cite>
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<samp>Sample text</samp>
<var>Computer variable</var>
<dfn>Definition text</dfn>
<cite>The Complete Manual of Typography </cite>
4.<em>斜体 <strong>粗体 <abbr>简写 <ins>文档的插入 <del> 对文档的删除<q> 短引用<sub>定义下标文本 <sup>定义上标文本
<strong>This text is strong</strong>
<em>This text is emphasized</em>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
<p>
This text contains<sup>superscript</sup>
This text contains<sub>subscript</sub>
</p>
<p>常用于数学等式、科学符号和化学公式中</p>
<p>
Matthew Carter says,<q>Our alphabet hasn't changed in eons.</q>
</p>
<p>短引用,浏览器在该元素周围自动添加引号,IE中不显示。</p>
3.<div>和<span>
div和span元素没有自身固有的表现层性质,可以用样式表来格式化内容
1.div元素用来表示块级元素,当与 CSS 一同使用时,<div> 元素可用于对大的内容块设置样式属性,元素的另一个常见的用途是文档布局。
2.span元素用于表示内联元素,用作文本的容器,用来组合文档中的行内元素,当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性,<span>只能包含文本和其他内联元素,不能将块级元素放入其中。
<div id="nav">
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a class="hide" href="#">精彩案例</a></li>
<li><a class="hide" href="#">网站导航</a></li>
<li><a class="hide" href="#">联系我们</a></li>
<li>Joan:<span class="phone">999.8282</span></li>
<li>Lisa:<span class="phone">888.4889</span></li>
</ul>
</div>
可以用id和class属性为元素命名
3.id属性
用于标识文档中的唯一元素,id的值在文档中只能使用一次,可将id用于识别网页的不同部分
id和class的属性值:
应该以字母A-Z或a-z或下划线开头
字母、数字、连字符、下划线、冒号和句点都是可用的,其他特殊字符不可用
大小写敏感
id和class不只用于div和span,可用于几乎所有的HTML
<div id="header">
(masthead and navigation here)
</div>
4.特殊字符
所有的字符引用都以“&”开头,以“;”结尾
字符 | 描述 | 命名 | 数值 |
字符空格 | |  ; | |
& | 表示and的符号 | & | & |
' | 撇号 | ' | ' |
< | 小于号 | < | < |
> | 大于号 | > | > |
© | 版权 | © | E |
® | 注册商标 | ® | ® |
1.4 多媒体
1. 图像标记<img>
<img src="images/xiaoyuan01.jpg" alt="青青流色新" width="500" height="300" align="left">
属性名 | 说明 |
src | 图像地址 |
alt | 添加图像的替代文字 |
width/height | 设置图像宽度/高度 |
border | 设置图像边框 |
align | 设置图像对齐方式 |
2. 多媒体格式
视频格式和音频格式
下面代码是插入音频和插入动画
<embed src="audio/jiangnan.mp3" width="300" height="50" autostart="true" loop="true">
<embed src="video/shendiaoxialu.swf" width="300" height="200">
3. 多媒体文件标记<embed>
<embed src="url" width="" height="" autostart="" loop=""></embed>
1.5 链接
1. 超级链接标记<a>
<a href=" url" target=" target-windows" >链接标题</a>
href属性定义了链接标题所指向的目标文件的URL地址。
target属性指定用于打开链接的目标窗口,默认方式是原窗口。
属性值target | 说明 |
parent | 当前窗口的上级窗口,一般在框架中使用 |
blank | 在新窗口中打开 |
self | 在同一窗口中打开,和默认值一致 |
top | 在浏览器的整个窗口中打开,忽略任何框架 |
1.链接到网页
2.链接到图片
3.链接到文件
2. 超链接类型
内部链接:将超链接标记<a>中href属性的URL值设置为相对路径,就可以在html文件中定义内部超链接
外部链接:需要链接网站外部文件时,将超链接标记<a>中href属性的URL值设置为绝对路径即可
书签链接:跳转到文章的内部链接
3. 超链接路径
绝对路径:文件的完整路径,包括文件传输的协议,如http、ftp等,一般用于网站的外部链接,例如http://www.sohu.com
相对路径:相对于当前文件的路径,它包含了从当前文件指向目的文件的路径,适用于网站的内部链接
链接到相同目录中的文件
只需提供文件名(或以./开始,再加文件名)
指向只有文件名的链接,表示链接文件与当前文档在一个目录中
服务器将在当前目录中查找相应文件
链接到低层目录
要将路径名包含在URL中
例:href="recipes/index.html" (或:href="./recipes/index.html")
链接到高层目录
路径名以../开始,告诉浏览器"回到上一层目录",然后再找具体文件的路径
例:href="../index.html"
根路径:根路径的设置以“/”开头,后面紧跟文件路径
4. 内部书签
<a> 可定义锚:
通过使用 href 属性,创建热点指向另外一个文档的链接
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
第一步:命名目的地
第二步:链接到目的地
<p align="center"><a href="#ptq">趵突泉</a>
<h3><a name="ptq">趵突泉</a></h3>
5. target属性
1.6表格<table></table>
1.属性
标签 | 说明 |
<table> | 表格标记 |
<tr> | 行标记 |
<td> | 单元格标记 |
<th> | 表头标记 |
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>1001</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>1002</td>
<td>96</td>
</tr>
</table>
HTML5支持的表格属性
•
border
|
•
设置表格边框宽度
|
•
colspan
|
•
设置单元格跨列
|
•
rowspan
|
•
设置单元格跨行
|
早期HTML支持的表格的属性
属性名 | 说明 |
width | 设置表格宽度 |
height | 设置表格高度 |
bordercolor | 设置表格边框颜色 |
bgcolor | 设置表格的背景颜色 |
background | 设置表格背景图像 |
align/ valign | 设置表格对齐方式 |
cellspacing | 设置单元格间距 |
cellpadding | 设置单元格边距 |
2.表格嵌套和布局
在网页制作过程中,对页面元素进行布局时,常常会用到嵌套的表格,即在表格的一个单元格中嵌套使用一个或者多个表格。
1.7内嵌框架
内嵌框架,也叫浮动框架,是在浏览器窗口中嵌入子窗口,即将一个文档嵌入在另一个网页中显示。使用成对的<iframe></iframe>标记即可在网页中插入内嵌框架,语法格式如下。
<iframe src="url"></iframe>
内嵌框架属性
属 性 | 描 述 |
src | 设置源文件的地址 |
width | 设置内嵌框架窗口宽度 |
height | 设置内嵌框架窗口高度 |
bordercolor | 设置边框颜色 |
align | 设置框架对齐方式,可选值为left、right、top、middle、bottom |
name | 设置框架名称,是链接标记的target所需参数 |
scrolling | 设置是否要滚动条,默认为auto根据需要自动出现。Yes-有,No-无 |
frameborder | 设置框架边框,1-显示边框,0-不显示(不提倡用 yes 或 no) |
framespacing | 设置框架边框宽度 |
marginheight | 设置内容与窗口上下边缘的边距,默认为1 |
marginwidth | 设置内容与窗口左右边缘的距离,默认为1 |
1.8表单<form>
<form name="" action="url" method="post/get" enctype="encoding"></form>
1.表单(Form)
是HTML的一个重要部分,是网页提供的一种交互式操作手段,主要用于采集和提交用户输入的信息。
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
2.<input> 输入标签
<form><input name="控件名称" type="控件类型"></form>
属性值 | 说明 | 属性值 | 说明 |
text | 文本框 | button | 标准按钮 |
password | 密码框 | submit | 提交按钮 |
file | 文件域 | reset | 重置按钮 |
checkbox | 复选框 | image | 图像域 |
radio | 单选按钮 |
<form name="fr">
text:<input name="uname" type="text" maxlength="8" size="8" value="username" /> <br />
密 码:<input name="pwd" type="password" maxlength="8" size="8" />
<br />
<p>复选框<br />
<input name="check1" type="checkbox" value="sport" />户外运动
<input name="check2" type="checkbox" value="voice"/>音乐
<input name="check3" type="checkbox" value="movie"/>电影
<input name="check4" type="checkbox" value="shopping"/>购物</p>
<p>单选按钮<br />
<input name="radio" type="radio" value="a1" />2000~4000
<input name="radio" type="radio" value="a2" />4000~8000<br>
<input name="radio" type="radio" value="a3" />8000~10000
<input name="radio" type="radio" value="a4" />10000~20000</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置按钮"/>
<input type="button" value="普通按钮"/>
<input type="image" value="图像形式的提交按钮" src="images/tu11.jpg"/>
</form>
3 列表框标记<select>
可创建单选或者多选选项列表
<form>
<select name="列表框名称" size="" multiple="true/false" >
<option value="选项值" />选项显示内容
<option value="选项值" />选项显示内容
…
</select>
</form>
<select>标记用于定义列表框,<option>标记用于向列表框中添加列表项目,<select>标记中的size属性用于定义列表框的行数
multiple="true/false" 是否可选择多个选项
disabled="true/false" 是否禁用该下拉列表。
size="数字" 下拉列表中可见选项的数目。
<select name="" multiple="true" size="1" >
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="peach">桃子</option>
<option value="pear">梨</option>
</select>
4.文本域输入标记<textarea>
<form><textarea name="mytext" rows="5" cols="100" ></textarea></form>
一个文本框,里面可以输入信息。
<form>
我是一个文本域:<br>
<textarea name="message" rows="10" cols="30">
可以在这里输入信息
</textarea>
</form>
5 HTML5新增的表单元素和属性
1.HTML5新增input类型
数值输入域——number
<input name=" " type="number" min=" " max=" " step=" " value=" " />
step=" ":定义步长,点击一次按钮上下跳动多少个数
<form>
<p>请输入数字:<input type="number" name="no1" value="3"/></p>
<p>请输入大于等于1的数字:<input type="number" name="no2" min="1"/></p>
<p>请输入1-10之间的数字:<input type="number" name="no3" min="1" max="10" step="3"/></p>
</form>
滑动条——range
<input name="" type="range" min="" max="" step="" value="">
step="":定义步长,滑动一次为多少
<form>
<p>请输入大于等于1的数字:
<input type="range" name="r1" min="1" value="1"/></p>
<p>请输入1-10之间的数字:
<input type="range" name="r2" min="1" max="10" step="3" value="3"/></p>
</form>
日期选择器——date pickers
<input name="" type="date" />
<form>
日期选择器的使用:<br/>
选取日、月、年:<input name="userdate" type="date" /><br/>
选取月、年:<input name="userdate" type="month" /><br/>
选取周和年:<input name="userdate" type="week" /><br/>
选取时间:<input name="userdate" type="time" /><br/>
UTC时间:选取时间、日、月、年(UTC—世界标准时间)
<input name="userdate" type="datetime" /><br/>
本地时间:<input name="userdate" type="datetime-local" /><br/>
</form>
url类型
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。
<input name="u1" type="url" value=http://www.icourses.cn />
email类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。
<input name="emaill" type="email" value=fning@163.com />
2. HTML5表单新增属性
form属性:不用写那些属性,可以用一个id包起来
可以将表单元素写在页面上的任何位置,然后给该元素指定一个form属性,属性值为该表单的id(id是表单的惟一属性标识),通过这种方式声明该元素属于哪个具体的表单。
<form id="myform">
index上的:
formmethod和formaction属性
formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面。 同时,也可以使用formmethod属性对每个表单元素分别指定不同的提交方法。
<form id="testform" action="my.php">
用户名:<input name="uname" type="text" value="username" /> <hr/>
S1处理:<input type="submit" name="s1" value="提交到S1" formaction="s1.html" formmethod="post" /><p>
S2处理:<input type="submit" name="s2" value="提交到s2" formaction="s2.html" formmethod="get" /><p>
S3处理:<button type="submit" formaction="s3.html" formmethod="post" >提交到s3</button><p>
S4处理:<input type="image" src="images/PLAY1.gif" formaction="s3.html" formmethod="post" /><p>
<input type="submit" value="提交页面"/>
</form>
placeholder属性
placeholder是指当文本框处于未输入状态时文本框中显示的输入提示
<input type="text" placeholder="提示信息" />
autofocus属性
给文本框、选择框或按钮等控制加上该属性,当页面打开时,该控件将自动获得焦点
list属性
为单行文本框<input type ="text" >增加了一个list属性。该属性的值是某个datalist元素的id。datalist也是HTML5新增的元素,该元素类似于选择框<select>,不同的是当用户想要设定的值不在选择列表之内时,允许其自行输入。
<form action="test.php" method="get">
<input type="text" placeholder="提示信息"/><br>
<input type="text" autofocus><br>
WebPage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
autocomplete属性
autocomplete属性用于设置输入时是否自动完成,指定其值为"on" "off"与" "三类值
<input type="text" name="school" autocomplete ="on" />
required属性
在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中提示用户这个元素中必须输入内容。
<input type="text" name="f" required/><br>
pattern属性
按要求输入数据,类似于验证码
<input type="text" pattern="[0-9][A-Z]{3}" name="part" placeholder="输入内容:一个数字与三个大写字母。" />
1.9 HTML5简介
1 HTML5新特征
本地存储特性
设备兼容特性
连接特性
网页多媒体特性
三维与图形及特效特性
css特性
2 HTML5语法
标签不区分大小写
允许属性值不使用引号 但是还是建议:使用引号
允许部分属性值的属性省略
<input type="checkbox“ checked />
<input type="text“ readonly />
属性 | 描述 |
checked | 省略属性值后,等价于checked="checked"。 |
readonly | 省略属性值后,等价于readonly="readonly" |
defer | 省略属性值后,等价于defer="defer" |
ismap | 省略属性值后,等价于ismap="ismap" |
nohref | 省略属性值后,等价于nohref="nohref " |
noshade | 省略属性值后,等价于noshade="noshade" |
nowrap | 省略属性值后,等价于nowrap="nowrap" |
selected | 省略属性值后,等价于selected="selected" |
Disabled | 省略属性值后,等价于disabled="disabled" |
Multiple | 省略属性值后,等价于multiple="multiple" |
Noresize | 省略属性值后,等价于noresize="noresize" |
3 浏览器支持
常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等均支持HTML5。
1.10 HTML5新增标记
1 <!DOCTYPE>和<meta>标记
<! DOCTYPE html>
<!DOCTYPE> 声明没有结束标签
<meta charset=“UTF-8”> 解决乱码问题
<meta> 标签位于文档的头部,不包含任何内容。
2 视频标记<video>
<video src="url" controls="" width="" height="">替代文字</video>
属性 | 值 | 说明 |
src | url | 要播放的视频的URL |
autoplay | autoplay | 视频在就绪后马上播放 |
controls | controls | 添加播放、暂停和音量等控件 |
width | 像素 | 设置视频播放器的宽度 |
height | 像素 | 设置视频播放器的高度 |
loop | loop | 设置视频是否循环播放 |
preload | preload | 视频在页面加载时进行加载,并预备播放 |
3.音频标记<audio>
<audio src="url" controls="controls">替代内容</audio>
属性 | 值 | 说明 |
src | url | 要播放的音频的URL |
autoplay | autoplay | 音频在就绪后马上播放 |
controls | controls | 向用户显示控件,例如播放、暂停、进度条等 |
loop | loop | 设置音频是否循环播放 |
preload | preload | 音频在页面加载时进行加载,并预备播放 |
4 结构元素
和div类似,即使删除这些结构元素,也不影响页面内容的显示效果
<article>元素:在页面中用来表示结构完整且独立的内容部分,里面可包含独立的<header><footer>等结构
<footer>元素:可以作为其直接父级内容区块是一个根区块的尾部内容
<article>
<header>
<h1>HTML5介绍</h1>
</header>
<p>header介绍</p>
<p>footer介绍</p>
<a href="#">阅读全文……</a>
<footer>
<a href="#">版权所有……</a>
</footer>
</article>
<section>元素:表现普通的文档内容区块或者应用区块,一个区块通常由内容及标题组成。
<article>
<section>
<h1>评论</h1>
<article>
<header>
<p>Posted by:张三</p>
<p>发布时间:2017-08-08 10:01:01</p>
</header>
HTML5 is good thing.
</article>
<article>
<header>
<p>Posted by: 李四</p>
<p>发布时间:2017-08-09 11:01:01</p>
</header>
<p>正在学习HTML5,非常棒!</p>
</article>
</section>
<article>
aside元素:当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
nav元素:nav元素用于定义导航链接
<aside id="leftside">
<nav>
<ul>
<li><a href="#"> 导航一</a></li>
<li><a href="#"> 导航二</a></li>
<li><a href="#"> 导航三</a></li>
<li><a href="#"> 导航四</a></li>
</ul>
</nav>
</aside>
<address>元素:一般被用来提供联系人信息、网站链接、电子邮箱、地址、电话号码等,一般放在一个网页的开头或者结尾,可以包含在<footer>元素内。
<address>
<span>作者:111</span>
<span>地址:sss</span>
</address>
5 页面交互元素
1、details和summary元素
可以显示和隐藏额外文字,summary元素经常与details 元素配合使用,作为details 元素的第一个子元素,用于为details定义标题
summary:单击可以切换<details>标签之间内容的显示或隐藏。
<details>:默认是隐藏的,单机后才可以显示内容,也可以使用一个布尔属性open,加在元素上,可以做到显示内容。
</head>
<body>
<details>
<summary>经典金曲</summary>
<p>my heart will go on</p>
<p>take my breath away</p>
</details>
<details open>
<p>my heart will go on</p>
<p>take my breath away</p></details>
2、progress元素
<progress value="" max=""></progress>
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。
下载进度:
<progress value="22" max="100">
</progress>
<p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持这个标签。 <progress> </p>
3、meter元素
meter元素用于表示指定范围内的数值
<!DOCTYPE html>
<html>
<body>
<p>评分情况:</p>
大众评分<meter value="3" min="0" max="10" low="5" high="8" title="3" optimum="10">3</meter><br>
媒体评分<meter value="7" min="0" max="10" low="5" high="8" title="7" optimum="10">7</meter><br>
网站评分<meter value="9" min="0" max="10" low="5" high="8" title="9" optimum="10">9</meter><br>
<p><b>注释:</b>Internet Explorer 不支持 meter 标签。</p>
</body>
</html>