HTML5+CSS3+JavaScript学习笔记
基础知识
HTML5 基础⼊门
HTML5 的基本概念
什么是HTML5
html网页设计css  HTML5 是标记语⾔，使⽤标记标签描述⽹页。
HTML与XHTML
  XHTML是可扩展的超⽂本标记语⾔，是⼀种置标语⾔，是更严格、更纯净的HTML版本。XHTML是以XML格式编写的HTML。XHTML具有<!>强制性、元素必须合理嵌套、元素必须有关闭标签、空元素必须包含关闭标签、元素必须是⼩写、属性名称必须是⼩写、属性值必须有引号和不允许属性简写等特性。
HTML5 的优势
1. 解决跨浏览器问题
2. 部分代替原来的JavaScript
例：获取⽂本框的焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<form action="demo">
姓名:<input type="text" name="Name"/><br/>
成绩:<input type="text" name="Grade"ID="grade"/><br/>
</form>
</body>
</html>
<script>
</script>
简化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<form action="demo">
姓名:<input type="text" name="Name"/><br/>
成绩:<input type="text" name="Grade" autofocus/><br/>
</form>
</body>
</html>
获取⽂本框焦点：光标移动到输⼊框中，等待输⼊
3. 更明确的语义⽀持
4. 增强web应⽤程序的功能
⽹页和⽹站
⽹页和⽹站的关系
1. ⽹页：⽂件，存储在计算机中，通过⽹址识别和获取，在浏览器中输⼊⽹址后，⽹页⽂件被传送到正在浏览⽹页的计算机中，通过浏
览器对⽹页进⾏解析，展⽰给⽤户。
2. ⽹站：根据⼀定的规则，使⽤HTML等⼯具制作的⽤于展⽰特定内容的相关⽹页的集合
3. ⽹页和⽹站的区别：⽹站有后台，⽹站的内容可以更换，⽹页没有后台，内容固定，不可更换。
4. ⽹页和⽹站的联系：⽹站由⽹页组成，⽹页设计是⽹站设计的基础。
就业⾯试技巧
1. XHTML是⼀种⽰应XML⽽重新创造HTML，当⽤户有了XML之后，是否还需要HTML？
答：依然需要HTML。
原因：很多⼈习惯使⽤HTML作为设计语⾔，同时有⼤量页⾯采⽤HTML编写，因此依然需要HTML。
2. HTML⽂件的扩展名有哪些？
答：“.html”和“.htm”。
“.html”是当今⽹页⽂件的⼀种最基本、使⽤最⼴泛的保存形式，是⼀种超⽂本标记语⾔，页⾯中没有嵌⼊任何服务器要执⾏的语句，是⼀种静态的页⾯格式，⼀般浏览器都能直接解析并显⽰。
“.htm”与“.html”没有本质的区别，只是为了满⾜DOS的8+3的⽂件名命名规范。index.html和index.htm是两个不同的⽂件，对应着不同的地址。
HTML5 ⽂档基本结构
HTML5 ⽂档构成
HTML5 ⽂档结构由头部(head)、主体(body)两部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE>声明
代码：<!DOCTYPE html>
<html>标签
成对出现：<html></html>
<head>标签
<head>标签内包含的主要元素：
1. <title></title>：⽤于定义⽂档的标题
2. <meta>：⽤于定义html元数据
3. <link>：⽤于链接外部CSS资源⽂件
4. <style></style>：⽤于定义内部CSS样本
5. <script></script>：⽤于包含JavaScript脚本
<body>标签
<body>标签是HTML的主题部分，⽹页所要显⽰的内容存放在该标签中
<body>
</body>
HTML5 的语法变化
1. 标签不再区分⼤⼩写
2. 元素可以省略结束标签
3. ⽀持boolean值得属性
4. 允许属性值不适⽤引号
注：如果属性值包含引号，容易引起浏览器混淆的属性值，宜使⽤引号。
HTML5 标签、元素和属性
HTML⽹页是由HTML元素构成的⽂本⽂件，任何⽹页浏览器均可直接运⾏HTML⽂件，HTML元素是HTML⽂件的基本对象。
标签
绝⼤多数的标签都是成对出现的，少数不是成对出现的。
单标签
概念：由⼀个标签组成，在开始标签中关闭。
常见单标签：
1. <br/>：在页⾯中起换⾏作⽤
2. <hr/>：在页⾯中创建⼀条⽔平线
3. <meta/>：元素可提供有关页⾯的元信息
4. <img/>：图⽚标签，⽤于在页⾯插⼊图⽚
双标签
概念：由开始标签和结束标签两部分构成
常⽤双标签：
1. <h1></h1>：标题标签
2. <p></p>：段落标签
3. <ul></ul>：⽆序列表标签
4. <table></table>：表格标签
标签属性
形式：属性名=属性值
元素
概念：从开始标签到结束标签的所有代码
HTML元素的内容：位于开始标签和结束标签之间的⽂本
HTML5 ⽂档头部标签
<head>标签是⽂档的头部标签，是所有头部元素的容器，<head>中的元素可以引⽤脚本、指⽰浏览器在哪⾥到样式表、提供元信息等，⽂档的头部描述了⽂档的各种属性和信息，<title>定义⽂档的标题，是<head>标签中唯⼀必须的元素
设置页⾯标题标签
<title>标签定义⽂档的标题，是所有HTML⽂档中必须的，只能出现在<head>中
引⽤外部⽂件标签
<link>标签是引⽤外部⽂件标签，放置在⼀个⽹页的头部标签中，⽤于链接外部CSS⽂件
内嵌样式标签
<style>标签是内嵌样式标签，⽤于为HTML⽂档定义样式信息，位于<head>头部中，在<style>标签中。规定在浏览器中如何呈现HTML⽂档
<meta>标签
在⽹页中，<meta>标签⽤来做⽹页的关键字，页⾯说明，作者信息，⽹页的定时跳转等声明
1. 设置页⾯的关键字
Keywords(关键字)⽤于告诉搜索引擎⽹页的关键字，代码如下：
<meta name="keyword" content="某⼈，论坛，学历，前端">
2. 设置页⾯说明
Description(页⾯说明)⽤于告诉搜索引擎⽹站的主要内容，代码如下：
<meta name="description" content="web前端的⼀些⾯试技巧">
3. 设置作者信息
Author(作者信息)⽤于介绍作者的⼀些信息，代码如下：
<meta name="author" content="某⼈，他的邮箱">
4. 设置⽹页的定时跳转
⽹页多少秒后⾃动从当前页⾯跳转⾄另⼀个⽹页页⾯或⽹站，代码如下：
<meta http-equiv="Refresh" content="N;URL=    "/>
N 为跳转的时间，单位为秒
页⾯注释标签
语法：<!--注释内容-->
各类标签
标题标签
HTML中标题由<h1>~<h6>标签来定义，其中<h1>代表⼀级标题，级别越⾼，⽂字越⼤,<h6>标签级别最⼩
标题标签对齐属性
标题字的对齐属性align，属性值：
1. center：居中对齐内容
2. left：左对齐内容
3. right：右对齐内容
4. justify：对⾏进⾏伸展，每⾏可以有相同的长度
段落标签
段落使⽤<p>标签，<p>开始和</p>结束之间的内容形成⼀个段落，段落之间⾃动换⾏且有空⾏
换⾏标签
换⾏标签<br/>是⼀个单标签，没有结束标签，⽤于将⽂字在⼀个段内强制换⾏
不换⾏标签
强制内容在⼀⾏内显⽰，使⽤不换⾏标签<nobr>，不换⾏内容放⼊<nobr></nobr>之间即可
⽔平线标签
将上下内容分隔开，可以使⽤⽔平线标签<hr>,100%宽度⽔平线，独占⼀⾏，⽔平线上下内容分隔⼀定的距离
插⼊空格
空格键打出的空格会被HTML⾃动忽略，通过 ；插⼊空格
插⼊特殊符号
在标签中插⼊特殊符号，使⽤&开头，；结尾
就业⾯试技巧
1. HTML5 中的新多媒体元素种类？
答：四种
audio元素：定义播放声⾳⽂件或者⾳频流的标准
video元素：定义播放视频⽂件或者视频流的标准
<source>元素：为媒体元素定义媒体资源，允许⽤户规定两个视频/⾳频⽂件龚浏览器，根据对媒体类型或编解码器的⽀持进⾏选择embed元素：⽤于插⼊各种多媒体，格式为MIDI、WAV、AIFF、AU、MP3等
2. HTML5 中的分组元素种类？
答：三种
<.hgroup>元素：⽤于对⽹页或区段的标题进⾏组合，将<h1>~<h6>元素进⾏分组
<figure>元素：⽤于表⽰⽹页的⼀块独⽴的内容，移除后不会对⽹页上的其他内容产⽣影响
<figcaption>元素：为<figure>元素定义标题
CSS3 基础⼊门
CSS 的基本语法
CSS语法规则由两个主要的部分构成，分别是选择器以及⼀条或多条说明
选择器通常是⽤户需要改变样式的HTML元素，选择器直接与HTML代码对应
HTML⽹页应⽤CSS样式的⽅法
HTML⽂档引⼊CSS样式的⽅法：
1. ⾏内样式
2. 内嵌样式
3. 链接样式
4. 导⼊样式
使⽤⾏内样式表
⾏内样式是最简单的CSS设置⽅式，需要给每个标签都设置style属性，与样式所定义的内容在同⼀⾏代码内，⽤于精确控制⼀个HTML元素的表现，代码如下：
<p >⾏内样式表</p>
这种样式表不经常⽤，CSS样式与HTML结构没有分离，导致代码冗余，并且不利于维护
使⽤内部 CSS
内部CSS样式表⼀般是将CSS卸载<head></head>标签中，并使⽤<style></style>标签进⾏声明，代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。