本文为刘欢的《HTML5基础知识、核心技术与前沿案例》第二~四章内容笔记总结
目录
1 HTML新手入门详解
1.1 内容标签和非内容标签
标签 | 描述 | 代码示例 |
<p> </p> | 前一对尖括号代表起始标签,后一对带/的尖括号为结束标签 id属性区分不同的段落 class属性设置段落的属性 | <p> 这是一段文字</p> <p id="descript"> 这是一段文字 </p> <p id="descript" class="red"> 这是一段文字 </p> |
<strong> </strong> | 加粗 | <p id="descript" class="red"> <strong>这是一段文字 </strong> </p> |
<br> | 换行符号 | 非内容标签 |
<img> | 设置图片 | <img src="images/bullt.png"> |
<!-- --> | 注释标签 | <!-- 这是一段注释 --> |
- html--页面根元素
lang属性:用来设置语言,标准的语言缩写定义在标准IETF-BCF47中http://tools.ietf.org/html/bcp47
manifest属性:离线页面缓存,即在没有网的情况下,也能查看;主要应用于不需要网络情况下,下载之后不再更改时才会使用,对于需要更改的网页,慎用。
-
head--文档元数据
head元素应是HTML文档中所有元数据(Metadata)的集合之处。包括五个主要部分,分别是title、link、style、base和meta元素。
title为页面标题,显示在浏览器标题栏,或用户收藏夹、历史浏览记录等醒目位置;
link为建立文档与外部文件的关系,如可以使用link引入CSS文件、图标文件、图片文、RSS订阅文件;
style为在页面中定义样式
base标记文档的基础URL地址
mate可以标记所有的元数据,必须包含元数据名称(name)、编译指令(http-equiv)和字符编码(charset)三种属性中的一种;对于360等双核浏览器,需要使用renderer来制定渲染内核,取值为webkit、ie-comp和ie-stand,分别表示webkit内核、IE兼容内核和IE标准内核,最常用的渲染内核为webkit内核。
-
区块元素
header对应头部区域,包含页面描述和导航信息
section对应不同的内容板块,article对应板块内的某篇文章
aside侧边栏
footer页脚,用来定义版权信息和页脚链接
-
分组内容元素
不要求语义的情况下,所有分组都可以使用div来实现;建议作为最后的解决方案,如果段落、头部、版块、侧边栏、页脚等区块元素能解决,则优先使用这些区块元素。div也包含lang属性用来设置区块的语言。
分组标签 | 描述 | 示例 |
<ul> <li> </li> </ul> | 无序标签 | |
<ol type="a"> <li> </li> </ol> | 有序标签 | |
<dl> <dt> <dd> </dd> </dt> </dl> | 自定义组合标签 | |
<figure> <img src="" alt=""> <figcaption> 标题</figcaption> </figure> | src:图片的路径 alt:说明信息 figcaption:图片标题 | |
hr | 水平分割线 | |
pre | 源代码 | |
blockquote | 引用 | |
main | 指定页面的主要内容 只能指定一个 |
代码示例
<!doctype html>
<html>
<head>
<meta lang="zh-cmn-Hans">
<title> 内容标签测试 </title>
</head>
<body>
<div>
<h1> 这是一级标题,总共6个标题级别 </h1>
<p> 这是一个正常的段落 </p>
<p> <strong> 加粗 </strong> 文本 </p>
<p> <em> 倾斜 </em> 文本 </p>
</div>
<div lang="en">
<ol type="a">
<li> Apple </li>
<li> Orange </li>
</ol>
<ul>
<li> One </li>
<li> Two </li>
</ul>
</div>
<div>
<dl>
<dt> 西安 </dt>
<dd> 西安站 </dd>
<figure>
<img src="xianStation.jpg" alt="西安站">
<figcaption> 图为西安站 </figcaption>
</figure>
<dd> 西安北站 </dd>
<dt> 郑州 </dt>
<dd> 郑州站 </dd>
<dd> 郑州东站 </dd>
</dl>
</div>
</body>
</html>
1.2 常用文本元素
链接:<a href="home.html">My Home </a>,当没有href属性时,仅作为占位符,不显示链接
斜体:<em> </em>,表示语义、语气的加强
加粗:<strong> </strong>,表示文本的重要性或紧急程度
放大:<big> </big>,表示将文本放大显示
缩小:<small> </small>, 表示将文本缩小显示
换行:<br>,常用语非内容性换行,如诗歌
引用:<q> </q>,插入文献的作者、标题、链接时使用;<cite> </cite>插入某段摘录文字时使用
1.3 表单
创建表单:<form> </form>,将数据提交到某个页面;
数据提交方式:method属性,有post和get两种方式。两者之间的差异简单来说,get是把数据放在URL中,以明文的方式发送给后台(类似浏览器地址栏中带参数的URL),它不能传输过大的数据,也不能传输文件类数据;而post是把数据放在数据体内再发给后台,数据不能直接被看到,可传输的数据量较大。我们在制作表单时一般都选择使用post万式。
目标页面设置属性:action属性
<!doctype html>
<html>
<head>
<meta lang="zh-cmn-Hans">
<title> 我的第一个表单 </title>
</head>
<body>
<form method="post" action="sever.php">
<p>
<label> 姓名:
<input name="username" type="text" placeholder="请输入名字" required>
</label>
</p>
<p>
<label for="sex"> 性别:</label>
<input name="sex" type="radio" value="male" checked> 男
<input name="sex" type="radio" value="female" checked> 女
</p>
<fieldset>
<legend> 性别: </legend>
<p> <input name="sex" type="radio" value="male" checked> 男 </p>
<p> <input name="sex" type="radio" value="female" checked> 女 </p>
</fieldset>
<p>
<label> 电话:
<input name="tel" type="tel" placeholder="请输入手机号码" required>
</label>
</p>
<p>
<label> 邮箱:
<input name="email" type="email" placeholder="请输入邮箱账号" required>
</label>
</p>
<p>
<label> 日期:
<input name="date" type="date" placeholder="请选择日期" required>
</label>
</p>
<p>
<label for="equipment">请选择预约的仪器:</labe1>
<select name="equipment">
<option value="1">分光光度计</option>
<option value="2">气相色谱仪</option>
<option value="3">低速离心机</option
<option value="4">电子天平</option>
</select>
</p>
<p>
<label> <input type="checkbox" name="rule">遵守实验仪器使用规范 </label>
</p>
<p>
<button> 提交 </button>
</p>
</form>
</body>
</html>
表单界面:
1.4 表格
定义表格:<table> </table>
行标签:<tr> </tr>
单元格:<td> </td>,属性colspan列方向合并单元格
标题:<caption> </caption>
表头元素:<th> </th>
<!doctype html>
<html>
<head>
<meta lang="zh-cmn-Hans">
<title> 我的第一个表格 </title>
</head>
<body>
<table style="border:solid 1px black; empty-cell:show; cellspacing=0 cellpadding=0">
<!-- <tr colspan="2"> 省会信息表 </tr> -->
<caption> 省会信息表 </caption>
<tr>
<th> 省份名称 </th>
<th> 省会城市 </th>
</tr>
<tr>
<td> 山西 </th>
<td> 太原 </td>
</tr>
<tr>
<td> 陕西 </td>
<td> 西安 </td>
</tr>
</table>
</body>
</html>
2 CSS新手入门
2.1 属性与属性的值
CSS也即层叠样式表,使用如下所示的一段代码进行规则定义,包括两个部分:选择器和声明(花括号包围部分);一个规则中可以定义多条声明,声明与声明之间使用分号分割开,建议一行只写一条声明。
body {
background:#E67E22;
color: #555;
}
注意:不能使用中文分号,否则会出现诡异的错误。每条申明有属性和属性的值组成,当属性的值有多项时,使用空格分割各参数。当属性的值存在单位时,一定要加上单位; 属性的值为0时,可以省略单位;当百分比为0时,%不能省略。
article{
border:1px solid #000;
}
CSS中方向顺序为:上右下左
.block{
border-width: 5px; /* 上左下右都是5个像素 */
border-width: 0 10px; /* 上下: 0, 左右:10 */
border-width: 0 10px 40px; /* 上 0, 左:10, 下:40, 右:0 */
border-width: 10px 10px 40px 20px; /* 上 10, 左:10, 下:40, 右:20 */
}
2.2 继承关系
2.2.1 就近继承实例
先来一个例子,如下网页结构HTML代码:
<body>
<div id="first">
<p>Nothing seek, nothing find.</p>
<div id="second">
<p>Cease to struggle and you cease to live.</p>
<div id="third">
<p>Man errs as long as he strives.</p>
<div id="fourth">
<p>Energy and persistence conquer all things.</p>
</div>
</div>
</div>
</div>
</body>
定义层叠样式表
@charset="UTF-8"
body{
color:#808080; /* 灰色,body中的所有div都会继承该样式 */
}
#first{
color:#1ABC9C; /* 青绿色,first区块包含的所有div会继承该样式 */
}
#second{
color:#DC143C; /* 深红(猩红),second区块包含的所有div会继承该样式 */
}
#third{
color:#F1C40F; /* 明黄色,third区块包含的所有div会继承该样式 */
}
#four{
color:#E67E22; /* 亮橙色,four区块包含的所有div会继承该样式 */
}
效果:
继承的意义在于简化代码,星号选择器可以选择所有样式
导入CSS的两种方式:
<link href="cssHerient.css" rel="stylesheet"> </link>
import url("css.css") /* 较复杂站点使用该方式 */
2.2.2 选择器分类总结与实例
三种选择器:
- 标签选择器(Tag Selector):以HTML标签选择对应的HTML元素
- 类选择器(Class Selector):用于选择带有Class的HTML元素,两种实现方式,以 . 开头紧跟类名;或者标签.类名
- id选择器(ID Selector):为拥有特定ID的HTML要素设置样式,以#ID名称的方式表示
- 群组选择器:用逗号隔开几个标签
- 伪类选择器:使用 : 隔开,最常用的是a:hover,即鼠标经过某个链接时,链接发生变化
- 伪元素选择器:使用 :: 隔开,如p::before{},在段落之前添加文字
CSS文件
@charset "UTF-8";
h1{
font-size:10px; /* 标签选择器,将所有的h1标签设置为30px字体 */
}
.red{
color:#F00; /* 类选择器,将所有的class=red的标签颜色 */
}
p.red{
color:#F0F; /* 标签和类组合选择器,将所有的class=red的标签颜色 */
}
#m-title{
color:#303; /* ID选择器,将所有的class=red的标签颜色 */
}
h2,h3{
font-size:5px; /* 群组选择器,将所有的h2,h3标签设置为5px字体 */
}
section article h1{
font-size:20px; /* 精确的选择section->article->h1的样式进行修改 */
}
section .blue{
font-size:30px; /* 精确的选择section->.blue的样式进行修改 */
}
a:hover{
background:#FF0; /* 伪类选择器,鼠标经过链接时,修改颜色 */
}
p.blue::before{
content:"He said : "; /* 不修改html前提下,在段落头部添加文字 */
}
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 选择器练习 </title>
<link href="selector.css" rel="stylesheet"> </link>
</head>
<body>
<header>
<h1 class="red" id="title">标题区</h1>
</header>
<section>
<h1 class="blue" id="m-title">版块区标题</h1>
<article>
<h1 class="red" id="s-title">版块区文章标题1</h1>
<h2 class="red" id="s-title2">版块区文章标题2</h2>
<h3 class="red" id="s-title3">版块区文章标题3</h3>
</article>
<a href="https://www.w3school.com.cn/index.html" id="enroll">邀请您参加...</a>
<p class="red" id="p-content"> 这是一段内容r </p>
<p class="blue" id="pb-content"> everything happens for a reason. </p>
</section>
<aside>
<h1 class="blue" id="a-title">Title</h1>
</aside>
</body>
</html>
2.3 CCS常用属性
文本和字体
p.blue{
font-weight:bold; /* 字体加粗 */
text-indent:2em; /* 缩进两个字符,与字体大小无关 */
line-height:150%; /* 行高,如果设置为1.5,则是继承他爹的行高,扩大1.5倍 */
background:#ecf0f1; /* 背景颜色 */
border-left:5px solid #27AE60; /* 添加左边框,增加引用效果 */
padding:15px 20px;
/* font:italic bold 150px/150% arial; 一次性设置斜体、加粗、放缩、字体设置 */
}
图片
img{
border:10px solid #2e3c4d; /* 10像素的实线边框 */
border-radius:50%; /* 图片设置为圆形 */
border-bottom:2px solid rgba(0,0,0,.15); /* 定义下边框属性,设置红绿蓝及透明度 */
}
3 JavaScript新手详解及实例
3.1 代码基础
- 在控制台撰写JavaScript代码调试时,换行使用shift + enter
- 调试信息
- 日志,console.error()
- 警告,console.warn()
- 错误,console.error()
- 提示,console.info()
- 调试,console.debug();
- 代码注释
- // 单行注释
- /* */ 多行注释,不能嵌套
- JavaScript的变量名是区分大小写的,关键字、let 和 const不能做变量名;变量名是字母、$和下划线开头
- 变量是动态类型的
- 支持+ - * / % ++ -- -= += *= /= 等数学运算,支持> >= < <= ==等逻辑运算,=== !==等相等运算
- 支持if语句、switch语句、三目表达式,与Java类似
- 支持for循环、while循环和do...while循环,与Java类似
3.2 编程进阶
3.2.1 数组
- 一维数组
// -----------建立空数组----------- //
var arr = new Array();
var arr = [];
// -----------数组赋值------------ //
arr = ["a", "b", "c"];
// --------数组定义并赋值--------- //
var arr = ["a", "b", "c"];
// --------获取数组元素----------- //
console.log(arr[0]);
// --------获取数组长度----------- //
console.log(arr.length);
// -----------数组遍历------------ //
for(var i = 0; i < arr.length; i++)
{
console.log(arr[i]);
}
// -------数组追加元素------------ //
arr.push("d");
// -------数组头部添加------------ //
arr.unshift("e");
// -------数组尾部删除元素-------- //
arr.pop("d");
// -------数组头部删除------------ //
arr.shift("e");
// -------数组任意删除------------ //
arr.splice(1, 1); //起始位置,删除元素数目
// -------数组任意添加------------ //
arr.splice(1, 0, "f"); //插入位置,0, 插入元素
// -------数组拼接------------ //
arr.concat(arr2);
// -------数组翻转------------ //
arr.reverse();
- 混合类型元素数组
var arr = ["a", 123, false];
- 多维数组
var arr = [[1,2,3], [4,5,6], [7,8,9]];
arr[0][1]; //取元素2
- 存储对象
var arr = [{name:"Lucy", age:31}, {name:"Mike", age:38}, {name:"Tom", age:52}];
console.log(arr[0].name); //输出Lucy
3.2.2 日期和时间
获取日期
var now = new Date();
console.log(now);
console.log(now.toDateString());
console.log(now.getHours());
console.log(now.getMonth());
console.log(now.getDay());
console.log(now.getUTHours());
设置时间
var date = new Date(2008, 8, 8, 8, 8, 8);
date.setHours(10);
console.log(date);
var date2 = "Fri Sep 19 2008";
console.log(Date.parse(date2)); //1971年1月1日到现在的秒数
3.2.3 函数
function out_count(){
var mycount = 10;
function inner_count(){
var mycount = 20;
output_count(mycount);1//此处mycount值为20
}
inner_count();
output_count(mycount);1//此处mycount值为10
}
function output_count(val){
console.log(val);
}
out_count();//依次输出20,10
3.2.4 对象
普通对象
//定义对象
var faculty1 = {name: "Mike1", age:20, job:"Designer"}
var faculty2 = new Object();
faculty2.name = "Mike2";
faculty2.age = 20;
faculty2.job = "Designer";
var faculty3 = new Object();
faculty3["name"] = "Mike3";
faculty3["age"] = 20;
faculty3["job"] = "Designer";
for( var i in faculty3)
{
console.log(i + ":" + faculty3[i]);
}
嵌套对象
var faculty1 = {
name: "Mike1",
age:20,
job:"Designer",
address:{
city:xian,
number: A
}
}
构造函数对象
function faculty(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.showName = function(){
console.log(this.name);
}
}
var Amiee = new faculty("Amiee", 27, "Stu");
Amiee.showName();
3.2.5 DOM
给定如下HTML代码:
<p class="red" id="first">The first paragraph.</p>
<p class="red small" id="second">The second paragraph.</p>
获取DOM元素的几种方式:
- 根据ID获取:console.log(document.getElementById("first"));
- 根据ClassName获取:
- 元素数组:console.log(document.getElementsByClassName("red"));
- 单个元素:console.log(document.getElementsByClassName("red")[1]);
- 根据Tag获取:console.log(document.getElementsByTagName("p")[1]);
使用JavaScript修改DOM的内容:
var first = document.getElementById("first");
first.innerHTML = "My Title"; //修改DOM内容为My Title
console.log(first.getAttribute("id")); //获取元素的各种属性
动态增加新节点
//添加新节点
var fisrt = document.getElementById("first");
var subspan = document.createElement("span");
subspan.innerHTML = " -- sub span --";
first.appendChild(subspan);
subspan.setAttribute("id", "span");
first.removeChild(subspan);
设置样式:属性值务必是文本类型
first.style.color = "red";
first.style.fontSize = "32px";
first.style.width="30%";
DOM事件处理
简单粗暴写在HTML中的写法:
<button id="submit" onclick="console.log('submit button clicked')"> Submit </button>
使用JavaScript的写法:
var submit = document.getElementById("submit");
submit.onclick = function(){
console.log("submit button clicked");
}
创建单独函数并赋值的做法:
var submit = document.getElementById("submit");
function doSubmit(){
console.log("submit button clicked");
}
submit.onclick = doSubmit();
3.2.6 移动钻石的小例子
JavaScript文件:
var logo = document.getElementById("logo");
logo.draggable = true;
var box = document.getElementById("box");
box.ondragover = function(event){
event.preventDefault(); //去除事件的默认行为
}
box.ondrop = function(event){
box.appendChild(logo);
}
CSS文件
@charset "UTF-8";
body {
position:relative;
}
#logo{
width:300px;
height:200px;
background:url(logo.png) center 50% no-repeat;
position:absolute;
left:0;
}
#box{
width:380px;
height:200px;
background:#d4efdf;/*浅绿色*/
border-radius:10px;
border:5px dashed #27AE60;/*深绿色*/
position:absolute;
right:0;
}
HTML文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> MOVE </title>
<link href="move.css" rel="stylesheet">
</head>
<body>
<div id="logo"> </div>
<div id="box"> </div>
<script src="move.js"></script>
</body>
</html>
例子效果: