HTML CSS JavaScript入门知识点
本文将主要描述HTML css javascript这三门技术的入门，不做深入的讨论，所有的细节均可以在
http://www.w3school.com.cn/index.html
上查询到，本文只是作为笔记的提点作用，需要系统学习的同学请移步官网。另，建议入门者完成官网的随堂作业
https://www.w3cschool.cn/courses/
学习的效果会比较好~
html标签的几个注意点
- 不区分大小写
- 空元素，如hr等，比如 '
','
'
html属性
- 禁止输入
<input disabled="">
<input disabled="disabled">
一些特殊字符的转义
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| ¢ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
DOCTYPE元素
用于标记一个html文档的开始，这个元素告诉浏览器它将处理HTML。
HTML元素
html 元素或根元素表示HTML的开始。
html 元素有一个 head 元素和一个 body 元素
head 元素：必选元素，包含文档的元数据。在HTML中，元数据具有关于文档中的内容和标记的信息。它还包括脚本和对外部资源的引用，例如CSS样式表。比如可以在里面定义编码格式'<meta charset="UTF-8"> '
head 中的 title 元素必选的元素; 其他元数据元素是可选的。在浏览器的选项卡上显示。
body元素：封装了HTML文档的内容，而 head 元素封装元数据和文档信息
开发工具
下列是专门用于编辑 HTML 的 HTML 编辑器：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
- Nodepad++
HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。一般使用小写
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
几种标签
| 标签 | 描述 |
|---|---|
| h1-h6 | 标题1-6个档 |
| hr | 创建水平线 |
| 定义注释 | |
| br | 换行 |
文本格式标签
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本 |
| em | 定义着重文字 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字 |
| del | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| code | 定义计算机代码 |
| kbd | 定义键盘码 |
| samp | 定义计算机代码样本 |
| var | 定义变量 |
| pre | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| abbr | 定义缩写 |
| address | 定义地址 |
| bdo | 定义文字方向 |
| blockquote | 定义长的引用 |
| q | 定义短的引用语 |
| cite | 定义引用、引证 |
| dfn | 定义一个定义项目。 |
链接<a>
- href: 链接地址，设置为“#”，表示为空链接
- target: 链接的打开方式，“_blank”为新窗口中打开
- id: 用于控制网页的定位，比如
在HTML文档中插入ID:
<a id="tips">链接A</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问链接A</a>
或者，从另一个页面创建一个链接到"有用的提示(id="tips"）部分"：
<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a
head的内容
- title: 选项卡上的文字
- base:标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
- link: 标签定义了文档与外部资源之间的关系。
<link rel="stylesheet" type="text/css" href="mystyle.css">
- style: 定义了HTML文档的样式文件引用地址
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
img
<img> 标签有两个必需的属性：src 和 alt
- src 指 "source"。源属性的值是图像的 URL 地址
- alt 在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息
- height和 width：如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局
为图片设置背景框
.thick-green-border {
border-color: green; <!--边框颜色-->
border-width: 10px; <!--边框厚度-->
border-style: solid; <!--边框样式-->
border-radius: 50%; <!--边框为：圆形-->
border-radius: 10px; <!--边框为圆角矩形，半径为10px-->
}
table
HTML 表格的基本结构：
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
列表
HTML 支持有序、无序和定义列表
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> 有序列表：有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- 自定义列表以 <dl> 标签开始。每个列表头以 <dt> 开始。列表项以 <dd> 开始。
区块
- div: 定义了文档的区域，块级 (block-level)
- span: 用来组合文档中的行内元素， 内联元素(inline)
区块元素：<h1>, <p>, <ul>, <table>
内联元素：<b>, <td>, <a>, <img>
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
- input: 输入元素
- type="password"时，会以星号或原点代替输入。
- type="radio"，单选框
- type="checkbox"复选框
- type="submit" 表单的内容会被传送到另一个文件
框架
<iframe> 标签规定一个内联框架，通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面
- src: 源地址
- frameborder="0" 无边框显示
- 如果要实现点击<a>标签后，在iframe中显示指定的网页，则需要给a配置上target属性，指定到iframe的name
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>
颜色
- HEX格式：#000000
- RGB格式： rgb(0,0,0)
css
关于id属性的一个很酷的事情是，像类选择器一样，你可以使用CSS来设计样式。
以下是一个示例，说明如何使用 cat-photo-element 的id属性来获取元素 ，并设置背景颜色为绿色。在你的style 元素中
为id指定样式
配置id属性为“cat-photo-element”，选择器要以#号开头
#cat-photo-element {
background-color: green;
}
为class指定样式
配置class属性为“green-box”，选择器要以.号开头
.green-box {
background-color: green;
}
为所有的标签指定样式
例如为<body>标签配置样式
注意：样式具有继承性，如果body配置了color为绿色，则其子标签都为绿色。
body {
background-color: black;
font-family: Monospace;
color: green;
}
各种情况下style的优先级
- 内联样式具有最高优先级，style="color: white"
- 一个标签的父元素设置了style,自身也设置了style，后者的优先级高
- 一个标签被设置了class="blue-text red-text",则后者的优先级高
- 通过id配置的style比class配置的style具有更高的优先级
- “!important’’ 关键字，比如“color: pink !important;’’，这样设置后，color始终为pink
控件距离的控制
有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。
- 元素的 padding 控制元素与其边框 border 之间的距离
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左
- 元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离。
Javascript
该表某个控件的内容
document.getElementById("demo").innerHTML="Hello World";
关联点击事件
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
注释
单行以 // 开头
多行用 /* .... */括起来
变量声明
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
- 如果重新声明 JavaScript 变量，该变量的值不会丢失：
var carname="Volvo";
var carname;
carname的值依然是Volvo
JavaScript对象
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
- 寻址方式
name=person.lastname;
name=person["lastname"];
函数的语法
- 传参的函数
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
- 带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
document.getElementById("demo").innerHTML=myFunction();
条件运算符
variablename=(condition)?value1:value2
if else语句
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
switch语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
For循环
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
while
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
try catch
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
throw
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
表单验证：必填项
可以通过onsubmit方法来验证
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript的作用
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
- 通过 id 找到 HTML 元素
document.getElementById("intro") - 通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); - 通过类名找到 HTML 元素 通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
改变html的内容
document.getElementById(id).innerHTML=new HTML
改变html的内容
document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
document.getElementById("image").src="landscape.jpg";
改变 HTML 样式
document.getElementById("p2").style.color="blue";
改变 HTML 属性
document.getElementById("image").src="landscape.jpg";
创建新的 HTML 元素
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
删除已有的 HTML 元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
JavaScript对象
- 创建一个新的对象
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
//自带的方法
function changeName(name)
{
this.lastname=name;
}
}
- 新建一个实例
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
