1.HTML
1.
标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="image/ship.bmp"/>
<title>初来乍到title>
head>
<body>
<a href="http:\\www.baidu.com">百度一下a>
body>
html>
2.
标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="image/ship.bmp"/>
<title>body部分title>
head>
<body>
<a href="http:\\www.baidu.com">百 度 一下<a> a>
<p>123<br />456p>
<p>123p>
<h1>你好h1>
<h2>你好h2>
<h3>你好h3>
<h6>你好h6>
<span>hellospan>
<span>hellospan>
<span>hellospan>
<div>1div>
<div>2div>
<div>3div>
<div>
<div>1div>
<span>2span>
div>
body>
html>
3.
标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初试牛刀title>
<link rel="shortcut icon" href="image/ship.bmp"/>
head>
<body>
<p>123<br />456p>
<h1>123h1>
<span>123span>
<span>456span>
<div>qwediv>
<div>asddiv>
<a href="http:\\www.baidu.com">百度一下a>
<form action="http://localhost:8888/index" method="POST">
<input type="text" name="user"/>
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
form>
<br />
<form >
<input type="text"/>
<input type="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
form>
body>
html>
4.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初试牛刀title>
<link rel="shortcut icon" href="image/ship.bmp"/>
head>
<body>
<p>123<br />456p>
<h1>123h1>
<span>123span>
<span>456span>
<div>qwediv>
<div>asddiv>
<a href="http:\\www.baidu.com">百度一下a>
<form action="http://localhost:8888/index" method="POST">
<input type="text" name="user"/>
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
form>
<br />
<form >
<input type="text"/>
<input type="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
form>
<form>
<input type="text" name="query" value="请输入"/>
form>
<form enctype="multipart/form-data">
<div>
<select name="city" size="5" multiple="multiple">
<option value="1">北京option>
<option value="2" selected="selected">上海option>
<option value="3">深圳option>
<option value="4">广州option>
<option value="5">苏州option>
select>
<p>请选择性别p>
男：<input type="radio" name="gender" value="1" checked="checked"/>
女：<input type="radio" name="gender" value="2"/>
<br/>
<p>爱好p>
篮球：<input type="checkbox" name="favor" value="1"/>
足球：<input type="checkbox" name="favor" value="2"/>
排球：<input type="checkbox" name="favor" value="3"/>
<p>技能p>
游泳：<input type="checkbox" name="skill" value="1"/>
散步：<input type="checkbox" name="skill" value="2"/>
代码：<input type="checkbox" name="skill" value="3"/>
<p>提交文件p>
<input type="file" name="fname"/>
div>
<textarea name="meno">默认值textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
form>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初级HTMLtitle>
head>
<body>
<a href="http:\\www.baidu.com" target="_blank">百度一下a>
<a href="#i1">第一章a>
<a href="#i2">第二章a>
<a href="#i3">第三章a>
<div id=i1 style="height:600px;">第一章内容div>
<div id=i2 style="height:600px;">第二章内容div>
<div id=i3 style="height:600px;">第三章内容div>
I
body>
html>
6.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签title>
head>
<body>
<a href="http:\\www.baidu.com">
<img src="image/ship.bmp" style="height:200px;width:200px" title="百度一下" alt="请直接点击"/>
a>
<ul>
<li>你好li>
<li>
<input type="text" name="user"/>
li>
<div>hellodiv>
ul>
<ol>
<li>ali>
<li>bli>
<li>cli>
ol>
<dl>
<dt>标题dt>
<dd>内容dd>
<dt>标题dt>
<dd>内容dd>
dl>
body>
html>
7.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<tr>
<td>主机号td>
<td>端口td>
<td>操作td>
tr>
<tr>
<td>192.186.1.1td>
<td>6688td>
<td>
<a href="http:\\www.baidu.com">百度一下a>
td>
tr>
table>
<table border="1">
<thead>
<tr>
<th>表头1th>
<th>表头2th>
<th>表头3th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td colspan="2">2td>
tr>
<tr>
<td rowspan="2">4td>
<td>5td>
<td>6td>
tr>
<tr>
<td>8td>
<td>9td>
tr>
tbody>
table>
body>
html>
8.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<label for="username">用户名：label>
<input id="username" type="text" name="user"/>
body>
html>
9.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<label for="username">用户名：label>
<input id="username" type="text" name="user"/>
<fieldset>
<legend>登录legend>
<label for="username1">用户名：label>
<input id="username1" type="text" name="user"/>
<br />
<label for="passwd">密码： label>
<input id="passwd" type="password" name="pd"/>
fieldset>
body>
html>
2.css
1.标签里写style
2.在head里写id选择器
#i1{
}
id=i1
3.class选择器
class=c1
.c1{
}
4.标签选择器
div{
}
所有div都应用样式
5.关联(层级)选择器
span div{
}
span下的div才应用样式；
.c1 .c2 div{
}
class=c1 下的 class=c2下的div才应用样式
6.组合选择器
#i1,i2,i3{
}
.c1, .c2,.c3{
}
7.属性选择器：根据标签下的属性来选择
input[type="text"]{
}
input tupe="text" 的应用样式；
.c1[type="text"]{
}
class=c1 下的type=“”text“”的应用样式
8.引用CSS文件
9.边框
style属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="border:1px solid red">dddiv>
<div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sssdiv>
<div>div>
body>
html>
10.
float 和 style属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body style="margin:0 auto;">
<div style="border:1px solid red">dddiv>
<div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sssdiv>
<div>div>
<div style="width:20%;background-color:red;float:left">aadiv>
<div style="width:80%;background-color:green;float:left">bbdiv>
<span style="width:500px;background-color:green;display:inline-block" >aaaspan>
<div style="clear:both;">div>
body>
html>
11.
display 标签转换
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="display:inline;background-color:red">qqqqqdiv>
<span style="display:block;background-color:red">span>
body>
html>
12
position 和 返回顶部
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto">
<div style="position:absolute;left:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqqdiv>
div>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto">
<div style="position:absolute;right:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqqdiv>
div>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto">
<div style="position:absolute;right:0px;top:0px;width:50px;height:50px;border:1px solid red;">qqqqdiv>
div>
body>
html>
13.
分多层
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-250px;background-color:white;height:400px;width:500px">div>
<div style="z-index:9;background-color:black;position:fixed;
top:0;
bottom:0;
left:0;
right:0;
opacity:0.2
">
div>
<div style="background-color:pink;height:5000px;">
div>
body>
html>
14.
返回顶部？？？？？？？？？
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div onclick="GoTop();" style="background-color;height:50px;width:50px;position:fixed;right:10px;bottom:25px;color:white">返回顶部div>
<div style="height:5000px;background-color:pink">3333333333div>
<script>
function GoTop(){
document.body.scrollTop=0
}
script>
body>
html>
15.
图片太大
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="height:200px;width:300px;overflow:auto">div>
<img src="">
body>
html>
16.
变色
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.pg-header{
position:fixed;
right:0;
left:0;
top:0;
height:48px;
background-color:#2459A2;
line-height:48px;
}
.pg-body{
margin-top:5opx;
}
.w{
width:980px;
margin:0 auto;
}
.pg-header .menu{
display:inline-block;
padding:0 100px 0 100px;
color:white;
}
.pg-header .menu:hover{
background-color:blue;
}
style>
head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGOa>
<a class="menu">全部a>
<a class="menu">爱好a>
<a class="menu">登录a>
div>
div>
<div class="pg-body">
<div class="w">adiv>
div>
body>
html>
3 . javascript 基础
1.弹窗+定时器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
setInterval("alert(123);",2000);
script>
body>
html>
2.基本语法
name = "alex" 默认全局变量
var name= "alex" 声明局部变量
i = parseInt(age) 变为整数
i = parseFloat(age) 变为浮点数
a.charAt(1) 切片
a.substring(1,3) 位置切片
a.length 获取长度
3.在console中显示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
function f1(){
console.log("你好")
}
setInterval("f1();",5000);
script>
body>
html>
4.滚动字条
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="i1">欢迎各位朋友们div>
<script>
function func(){
var tag = document.getElementById("i1");
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval("func()",500);
script>
body>
html>
5.
1