HTML5
基本结构
<!DOCTYPE html> //文档类型声明
<html lang="zh-CN"> //根节点
<head> //头部
<meta charset="utf-8"……>
<title>页面标题</title>
</head>
<body style=……>
…
</body>
</html>
-
元素：指文档各个部分（如头、标题、段落、列表……）。
可嵌套但不可交叉，嵌套外层为父元素，内层为子元素，多级嵌套有多重辈分
-
标签：描述文档内容的类型、组成和格式化信息。可表示元素类型，设置元素属性，界定元素内容始末。
开始标签使用多个属性时，用空格分隔，出现的顺序无关紧要。
-
非空元素&标签：
<元素名 [属性名="属性值"] …>元素内容</元素名> -
空元素和标签
<元素名 [属性名="属性值"] … />
全局属性
对于重复出现的元素，可以用id属性给每个元素定义唯一标识。
对于内和样式基本相同的元素，可用class属性进行表示合为一类，表现时共用相同的样式声明。
head标签
定义文档头部，可用标签为：
<base>、<link>、<meta>、<script>、<style>、<title>
<title>是唯一必需的元素。
<base>页面中所有连接的基准URL
<link>资源引用
<meta>元信息x
body标签
定义文档的本体，
size:
color:
align:对齐
width:
-
预排版：
-
分段（前后空行）：
-
换行：
-
划线：
特殊标记：
- 空格：  ;
- 小于号：< ;
- 大于号： > ;
列表标签
-
有序列表：
<ol type=... start=...> //默认1开始 <li>...</li> <li>...</li> </ol> -
无序列表：
<ul type=...> //默认实心圆 <li>...</li> </ul> -
放置在同一行：对
- 进行修改。
-
<li style="float::left;list-style:none;margin-right:10px"> 前一个上浮达到同一行效果，而后一个去掉分号，最后一个使得列表项之间（右侧）空出10像素 -
自定义列表：
-
、
、
<dl> <dt>...</dt> //标题 <dd>...</dd> //下属内容 </dl>
超链接标签
文本链接
<a href="..." traget="..." title="...">超链接文字（默认有下划线）</a>
第一个存放站内链接，如在一个目录下，则可以是index.html
也可以存放文本文件，跳转后会打开文本("test.txt")
也可以改成下载
<a href="..." download="">
如果是站外链接：
一定要有http前缀："http://..."
target="_blank"是新建一个标签页打开超链接，共五种可选，默认的_self就是在覆盖本页面
图片链接
<a href="img/spring.png">
<img src="img/spring.png" width="..." height="...">
</a>
//可嵌套
电子邮件
<a href="...@...com"></a>
锚点（网页内部跳转）
给超链接加上id="..."（编号）
<a href="#...(编号)"></a>
可滑动的长页面中跳转到需要的地方
更改样式
<style>
a{
text-decoration:none;
//去下划线
cursor:...{e.g.help};
//更改指针形状
color:...
//更改
}
a.hover{
//正常颜色，经过时
}
a.active{
//光标在上面颜色，按左键时
}
a.visited{
//访问过颜色
}
表格
- 基本结构
<table>
caption:表格标题
tr：行标签
th:单元格标签，水平居中，字体加粗
td：单元格数据
<table>
<caption>
信息
</caption>
<tr> //第一行
<th>姓名</th> //第一列
<th>age</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
- 基本属性
table:align,bgcolor,border,cellpadding,cesspacing,rules
1.对齐方式
2.背景颜色/图片 标题颜色不会变
3.边框
4.控制内容和边框间的距离，即布局
5.每一个块（单元格）间的距离
6.对行列进行分组
- 单元格标签
td:align valign rowspan clospan width height
1.对齐方式
2.垂直方向位置（上中下……）
3.跨行
4.跨列（合并）
- 表格行分组
table:caption thead tbody tfoot
1.标题
2.头部，单元格标题（第一行）
3.数据部分(中间)
4.数据部分(底部)
<table rules="rows">
<thead>
<tr>
<th>
<tbody>
<tr>
<td>
- 表格列分组
table:colgroup
- 表格嵌套
table tr td<table>
<table>
<tr>
<td>
<table>
<tr>
<td>
框架
<framset rows/cols="">
//上下结构rows，左右结构cols，参数分别对应不同框架占比
<framesrc=... name=...></frame>
<frameset cols=...>
//框架集的嵌套
<frame src=... name=...></frame>
<frame name="top" src="xxx.html"
...
<noframes>不支持</noframes>
</frameset>
----在子文件 xxx.html中如果要连一个超链接使得该网站在框架中打开，应该是这样的格式：
<body>
<ul>
<li><a href="http://... target="top">
- 框架集的属性
rows,cols,frameborder,bordercolor,framespacing
3.框架边框的有无 （无="no"/"0"）
4.边框颜色
5.框架间的距离
- 框架的属性
name,src,frameborder,marginheight,marginwidth,scrolling,noresize
noresize=”noresize“时框架无法移动
scrolling="no"：子框架固定，无滚动条
-
框架的嵌套
-
内联框架iframe
<iframe src="http://..."></iframe> 可以直接嵌入<body>中，随便放置，不用像框架集一样有结构
表单
-
交互作用（表格实现）
<form ...> <table border="1"> <tr> <td><input type=... name=...> <td><input type=... value=...> //按下value显示的东西就是提交
属性
<form method="..." action="..." name="..." enctype="..."
1.提交方式
2.提交后跳转，可填入网站
3.
4.编码方式，由提交方式决定
- 标签
CSS 语言基础
语法结构
选择器+一条或多条声明
-
内部样式
html文件中使用style，用选择器div对应不同的块
<head> <style> *{ margin:... }//默认 div{ color:..... } -
外部样式
引入外部CSS文件，再引入html文档
<link type="" rel="" href=> 在<style>中： <style> @import url(路径); //尽量不用，只能引入样式文件 -
内嵌
在body的相应块中写
<body> <div style=....>
基本选择器
-
ID
<style> #mypp{ .... } 要使用的块中： <p id="mypp"> -
类
<style> .myp2{ ... } <p class="myp2"> -
标签
-
通用
组合选择器
属性选择器
样式属性
- 文本属性
text-indent：
text-align：水平对齐
vertical-align：垂直对齐，常用于块结构
word-spacing：文字间距离
letter-spacing：字母字符间的距离
text-transform
text-decoration:
...
- 字体属性
font-size:大小
font-family:字体
font-weight:加粗设置
line-height:行间距
- 背景属性
background-imag:url(路径)
背景图片
background-repeat：可以让图片不重复平铺，或者在水平/垂直方向上重复平铺
background-position：图片位置
background-size
background-attachment：背景固定/滚动……
- 表格属性
border：为表格的外边框，在table设置的边框外
vertical-align应该放到单元格里才有效：
<style>
table{
...
}
table td{
vertical-align:
}
text-align:可在table也可在单元格里
caption-side：表格标题位置
padding：单元格和边框的距离
- 列表属性
line-style-image:改变图标
line-style-position：位置，对齐
- 分类属性
导航栏
利用无序列表，代码实例见测试web文档
CSS盒模型
padding：内边距
border：边框
margin：外边距
-
尺寸计算：盒子模型尺寸=边框+外边距+内边距+内容尺寸（要注意左右）
2 * border+2 * padding+margin+width
<style>
p{
width:400px;
height:300px;
text-align: center;
line-height: 300px;
color:white;
background-color: red;
}
div{
padding: 30px 0;
background-color: blue;
border-top:10px green solid;
border-bottom: 10px green solid;
margin:40px 0;
}
</style>
</head>
<body>
<div>
<img src="img/jingren.jpg" width="300px" height="400px" style="display:block;">
</div>
</body>
JAVASCRIPT
-
引用
- 在行内引用：
- 超链接引用（注意单引号双引号）：
点击我 - style标签中引用：在<input …>中给定name，可在style中设置：
input[name=…]{…}
input[name=…]:hover{…} - head标签中引用：
使用例如会使内容在页面显示前先执行对话框，但是并不是所有脚本都会运行，比如函数（需调用）- script标签的内容可根据需要调换顺序
- 在行内引用：
-
获取网页元素
getElementByid getElementsByName getElemantsByClassName -
鼠标经过：
<img ..... id=... onmouseover="函数" onmoouseleave="函数"> id用于对应 -
轮播：
☆setInterval("函数（）",时间) 函数通过给图片命名正常写代码即可 （在script里） var i=1； //全局变量 function lunbo(){ var obj=document.getElementById; i++ if(i>5){ i=1; obj.src="..." //跳回第一张图 }else{ obj.src="..."+i+".jpg" //给图片编号，格式如上，用i调用 } } start(){ t=setInterval(...,ms)//t为 全局变量，而ms为间隔时间，单位毫秒 } end(){ clearInterval(t); }
Js对话框与窗口:
- 对话框
- alert:消息提示框，无返回值
alert("hello world")
//和下面一样放在js文件的相应function里
- confirm：确认对话框，用于某操作前让用户确认，有返回值
var flag=confirm("您确定要删除吗");
alert(flag) //确定就弹出true，反之false
- **prompt：**输入对话框，返回值有三种可能性（空值！）
var pmt=prompt("请输入数字");
alert(pmt)
- 窗口
- window.open()
- window.close()
数组
- 数组&表格
网络基础知识
-
TCP/IP：
四层分层体系结构。应用层/传输层/网际层/网络访问层。
TCP协议负责数据传输的可靠性，IP协议负责把数据传输到正确的目的地。
-
域名：在数据传输时标识主机的位置。最末的域为顶级域，其余为子域。每个域都有一个明确意义的名字，分别为顶级域名和子域名。
-
DNS:域名系统
-
WEB体系结构：主要由WEB服务器、客户端和通信协议三部分构成。
-
URL：统一资源定位符
-
127.0.0/……：本地服务地址
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
