一个制作矢量图标（SVG）的网址：https://icomoon.io/
<a href="index2.html">indexa> <a href="myPage/index2.html">indexa>
<base href="http://serverName/FolderName/"/> 在heade标签中使用base标签设置基准URL，在html文档的其他地方使用到a标签的时候，hreft的值就可以直接是一个文件的名称 <a href='page2.html'/> 最后生成的连接地址会是：http://serverName/FolderName/page2.html
<style media="all" >style> <style media="handheld" >style> <style media="print" >style> <style media="screen" >style> <style media="screen AND (max-width:500px)" type="text/css" >style> <style media="screen AND (min-width:500px)" type="text/css" >style>
<noscript> <h1>javascript is required!h1> noscript> <noscript> <meta http-equiv="refresh" content="0;http://www.baidu.com"/> noscript>
form标签一般有3种编码格式：application/x-www-form-urlencoded编码（默认编码除文件上传外都可以使用）、multipart/form-data编码（文件上传使用） 以及text/plain编码（没有正式规范，不推荐使用） <form method="post" action="http://vichin:8585/form" enctype="multipart/form-data"> form>
<a href="#a">指向id为a的元素a>
<a href="#b">指向id为b的元素a>
<a href="#c">指向id为c的元素a>
<div id="a">div>
<div id="b">div>
<div id="c">div>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<a href="#MyName">click herea>
<a href="QQ.exe">发送邮件a>在IE浏览器中，可以调用本地的exe程序
<a href="ftp://212.8.65.45">使用ftp协议访问文件服务器a>
<a href="mailto:[email protected][email protected]?Subject:文字主题?BCC=暗送邮件地址Body=邮件内容">调用本地的outlook发送邮件a>
<a href="http://www.baidu.com" target="_blank">百度a>
<p id="MyName">
vichin
p>
body>
html>
<meta charset="UTF-8" name="keyword" content="关键字，元信息">
<meta name="description" content="关于HTML标签中，meta标签的使用">
<meta name="author" content="vichin">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="windows-target" content="_top">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<form>
<p><label for="name">
Name:<input placeholder="Your name" id="name" name="name" />
label>p>
<p><label for="city">
City:<input placeholder="Where you live" id="city" name="city" />
label>p>
<p>
<label for="fave">
Friut:<input list="fruitlist" id="fave" name="fave" />
label>
p>
<button type="submit">Submit Votebutton>
form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples">option>
<option value="Oranges" >option>
<option value="Cherries" >option>
datalist>
body>
html>
<input type="text" value='' id='txt_Id' oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false" />
<p><img src="捕获.PNG" alt="" usemap="#mymap">p> <map name="mymap"> <area href="http://www.baidu.com" shape="rect" coords="3,5,68,62" /> <area href="http://www.biying.com" shape="rect" coords="70,5,130,62"/> <area href="http://www.sogou.com" shape="default" alt="default" /> map>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<button id="btn_SetVal">设置值button>
<button id="btn_GetVal">获取值button>
<button id="btn_ClearVal">清空值button>
<button id="btn_RemoveVal">删除值button>
<button id="btn_SetJson">保存一个Json对象button>
<button id="btn_GetJson">获取一个Json对象button>
<script type="text/javascript" src="jquery-1.7.1.min.js">script>
<script type="text/javascript">
// webStorage中分sessionStorage和localStorage。前者类似于session，后者类似于一个数据库
// length:获取webstorage中的数量
// key(index):返回第index条数据
// getItem(key):返回指定内容（字符串类型），若内容不存在，则返回null。
// setItem(key,value):设置值。
// removeItem(key):删除值。
// clear:清空webStorage中的内容。
// localStorage.setItem("key","value")
$(function () {
$("#btn_SetVal").click(function(){
localStorage.setItem("name","vichin");
});
$("#btn_GetVal").click(function(){
var len=localStorage.length;
if (len>0) {
var key=localStorage.key(0);//获取第一个位置上的key值
if (key.length>0) {
var person=localStorage.getItem(key);//使用key值去获取value值
if (person.length>0) {
alert(person);
}
}
}
});
$("#btn_ClearVal").click(function(){
if (localStorage.length>0) {
localStorage.clear();
}
});
$("#btn_RemoveVal").click(function(){
localStorage.removeItem("name");
});
$("#btn_SetJson").click(function(){
var person=new Object;
person.name="vichin";
person.age=26;
person.sex="male";
localStorage.setItem("P0",JSON.stringify(person));
});
$("#btn_GetJson").click(function(){
var len=localStorage.length;
if (len>0) {
for (var i = 0; i < len; i++) {
var key=localStorage.key(i);
if (key.length>0) {
var data=localStorage.getItem(key);
if (data!=null) {
var person=JSON.parse(data);//使用key值去获取value值
alert('姓名：'+person.name+', 性别：'+person.sex+', 年龄：'+person.age);
}
}
}
}
});
});
script>
body>
html>
CSS属性
box-sizing:border-box;
使用position:absolute 会让当前元素相对于其父元素来设置一个绝对位置，但是父元素的位置不能是position:static（如果一个元素不设置position属性，那么起默认为static）。所以要用position:absolute相对于父容器的位置的时候，可以为其父容器增加一个position:relative
ime-mode: disabled;
页面布局：
一列布局：通常作为网站的首页，页面内容较少。页面通常是固定宽度的。
两列布局：一般自适应宽度的两列布局很少，通常都是固定宽度的两列布局。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列布局title>
<style type="text/css">
/*清除自带样式*/
body{
margin: 0;
padding: 0;
}
.main{
width: 800px;
height: 300px;
background-color: #ccc;
margin: 0 auto;/*让内容居中显示*/
}
.top{
height: 100px;
background-color: blue;
}
.foot{
width: 800px;
height: 100px;
background-color: #900;
margin: 0 auto;/*让内容居中显示*/
}
style>
head>
<body>
<div class="top">div>
<div class="main">div>
<div class="foot">div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.left{
width: 30%;
height:500px;
background-color: #ddd;
float: left;
}
.right{
width: 70%;
height: 500px;
background-color: #999;
float: right;
}
.main{
width: 1000px;
height: 600px;
background-color: red;
margin: 0 auto;
}
style>
head>
<body>
<div class="main">
<div class="left">div>
<div class="right">div>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.left{
width: 33.3%;
height: 500px;
float: left;
background-color: #ccc;
}
.right{
width: 33.3%;
height: 500px;
float: right;
background-color: #ddd;
}
.middle{
width: 33.3%;
height: 500px;
float: left;
background-color: #999;
}
style>
head>
<body>
<div class="left">div>
<div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。div>
<div class="right">div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: #ccc;
position: absolute;/*使用绝对定位，让左侧元素停靠在页面的左侧。*/
left: 0;
top:0;
}
.middle{
height: 500px;
/*width: 500px; */
background-color: #999;
margin: 0 300px 0 200px;
}
.right{
width: 300px;
height: 500px;
background-color: #ddd;
position: absolute;/*使用绝对定位，让左侧元素停靠在页面的右侧。*/
right: 0;
top:0;
}
style>
head>
<body>
<div class="left">200pxdiv>
<div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。div>
<div class="right">300pxdiv>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>混合布局title>
<style type="text/css">
/*清除自带样式*/
body{
margin: 0;padding: 0;
}
.main{
width: 800px;height: 600px;background-color: #ccc;margin: 0 auto;/*让内容居中显示*/
}
.top{
height: 100px;background-color: blue;
}
.head{
height: 100px;width: 800px;background-color: #f60;margin: 0 auto;
}
.left{
width: 200px;height: 600px;background-color: yellow;float: left;
}
.right{
width: 600px;height: 600px;background-color: #369;float: right;
}
.sub_l{
width: 400px;height: 600px;background-color: green;float: left;
}
.sub_r{
width: 200px;height: 600px;background-color: #09f;float: right;
}
.foot{
width: 800px;height: 100px;background-color: #900;clear: both; margin: 0 auto;/*让内容居中显示*/
}
style>
head>
<body>
<div class="top">
<div class="head">
div>
div>
<div class="main">
<div class="left">div>
<div class="right">
<div class="sub_l">div>
<div class="sub_r">div>
div>
div>
<div class="foot">div>
body>
html>