web知识点
一、基础
1.整体模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.body标记属性（不推荐使用，故略）
3.注释（建议使用ctrl+/)
<comment></comment>
<!--注释内容-->
4.标题字标记
<h1 align="left|center|right|justify">
this is title
</h1>
5.添加空格和特殊符号
//空格
©//版权标记
<//小于
>//大于
&//符号&
×//乘号
÷//除号
"//双引号
6.格式化文本标记
<b>定义粗体</b>
<i>定义斜体</i>
<u>定义下划线</u>
<del>定义删除线</del>
<sup>下标</sup>
<sub>上标</sub>
<strong>加粗</strong>
<small>变小字号</small>
<big>变大字号</big>
<pre>定义预格式文本</pre>
<address>地址</address>
<blockqutoe>引述其他人或来源的长篇幅内容默认带有左右40px的外间距</blockqutoe>
<q>引用短语</q>
7.字体font标记：
face:字体 color：颜色 size:字体大小
8.水平标记分隔符
二、
1.列表
list-style-type:none 去除列表前符号
float:left 转水平排列
无序列表 <ul></ul> type=“disc|circle|square”
<ul>
<li>
<ol>
<li>
</li>
</ol>
</li>
</ul>
有序列表:value 改变当前项编号,影响后序列表项的编号。
<ol></ol> type=“1|A|a|l|i” <li type="A" value="1"></li>`
<ol>
<li></li>
</ol>
定义列表:
<dl>
<dt>
<dd></dd>
</dt>
</dl>
2.超链接语法、路径及分类
<a href="url" title="" target=""></a>
-
href:链接指向的目标文件
-
title:指向链接的提示信息
-
target:指定打开的目标文件
_parent-上一级窗口 _blank-新窗口 _self-同一窗口（默认） _top-整个窗口打开 framename- 框架或浮动框架名
创建图像链接：<a href="#"> </a>
3.浮动框架
<iframe></iframe>
src 设置源文件属性 scrolling 设置框架滚动条
name 设置框架名称 frameborder 设置框架边框
width 设置浮动窗口框架的宽度 marginwidth 设置框架左右边距
height 设置浮动框架窗口的高度 marginheight 设置框架上下边距
align 设置框架对齐方式
4.img属性
top 图像的顶端与当前行文字顶端对齐，当前行高度相应扩大
middle 图像的水平线与当前行文字顶端对齐，当前行高度相应扩大
bottom 图像的底端与当前行文字顶端对齐，当前行高度相应扩大
left 图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字高度不变
center 图像的中线与当前行文字顶端对齐，当前行高度相应扩大
right 图像右对齐，浮动游离于文字之外，文字环绕图像周围，文字高度不变
5.添加滚动文字
<marquee width="" height="" direction="up/down/left/right" behavior="scoll/slide/alternate"
hspace="" vspace="" scrollamount="" scrolldelay="" loop=""onmouseover="this.stop()" onmouseout="this.start()" > </marquee>
οnmοuseοver="this.stop()"
当光标移动到滚动文字区域时，滚动内容将暂停滚动
οnmοuseοut=“this.start()”
当鼠标移出滚动文字区域时，滚动内容将继续滚动。
loop=“”
文字滚动的次数 -1为无限次
behavior=“scoll（循环往复滚动）/slide（滚动一次就停）/alternate（来回交替滚）”
scrollamount=“”
滚动速度
scrolldelay=“”
延迟时间，以毫秒为单位，延迟时间越小滚动速度越快。
hspace=“” vspace=“”
高度和宽度，单位为像素，但不能加单位
6.音频，视频及flash文件
<embed src="多媒体文件" width="界面的宽度" height="界面的高度" autostart="true/false" loop"true/false"/>
语法说明：
src:媒体文件的路径
width,height:整型值，单位为像素，播放背景音乐时，高度宽度设为0
autostart:true为自动播放
loop:true为循环播放
7.
a.选择器类型
可以指定要选择的元素的特殊状态
选择器：伪类名{属性：属性值；属性：属性值；}
伪类名 说明
link 设置a标记未被访问前的样式
hover 设置a标记鼠标悬停时的样式
active 设置a标记被激活（鼠标点击与释放之间）的样式
visited 设置a标记未被访问前的样式
first-letter 设置块中第一个字符的样式
first-line 设置块中第一行的样式
first-child 设置第一个子标记的样式
b.css属性选择器
[属性值]{属性：属性值；属性：属性值；}
[title]{color:red;}
选择器 描述
[attrribute] 选取带有指定属性的标记
[attribute=value] 选取带有指定属性和值的标记
[attribute=~value] 选取属性值中包含指定词汇的标记
[attribute|=value] 用于选取带有以指定值开头的属性值的标记
[attribute^=value] 匹配属性值以指定值开头的每个标记
[attribute$=value] 匹配属性值以指定值结尾的每个标记
[attribute*=value] 匹配属性值中包含指定值的每个标记
c.css定义与引用-行内样式表
基本语法：<标记 style=“属性：属性值；属性：属性值；”>
语法说明：
标记：HTML标记，如body,table,p等
只影响当前元素自身样式；
优先于其他所有样式定义；
多个属性之间用分号分割；
<p style="color:red;font-size:28px;">仅本段落生效</p>
css定义与引用-内部样式表
<style type="text/css"></style>
style标记是双标记，有type属性，必须放在头部
内部样式表只影响单个文件
d.css定义与引用-连接外部样式表
基本语法
div{color:blue;font-weight:bold;}
<div><p>继承标记div的样式</p></div>
优先级：（从高到低）如下：
行内样式>id样式>类样式>标记样式
内部样式，外部导入样式，外部链接样式按最近优先原则
8.Web前端开发基础
图层CSS属性
position:定位，static|absolute|relative|fixed
width|height:图层宽度|图层高度
left/top：左边距/顶部距离
border：边框，“线粗细 线形状 线颜色”
float:left/right/none,设置图层浮动位置
clear:left/right/both/none，清除图层浮动
z-index:图层层叠，子层永远在父层之上，值越大越在上层，前提条件是：positon属性值为"absolute"
overflow:scroll/visible/auto/hidden内容溢出
display:block/inline/none块元素显示，行内元素显示，隐藏。
CSS中的display属性
属性值 说明
none 此元素不会被显示
inline 将元素设置为行内元素，在行内显示，前后没有换行符
block 将元素设置为块级元素，以块状显示；前后换行，可以设置高度宽度
inline-block 将元素设置为行内显示的块元素，以块状显示，可以设置高度宽度。
inherit 规定应该从父元素继承display属性的值。
9.css属性值中的单位：绝对单位and相对单位
相对单位：
em:元素的字体高度
ex:所用字体大小写字母x的高度作为参考
px:根据屏幕像素点确定
%：参考父元素中相同属性的值
css字体样式
font-size:设置字体大小
font-family:设置字体类型
font-style:设置字体风格 normal italic 用字体斜体属性显示 oblique 直接用倾斜字显示
font-weight:设置字体粗细
font-variant:设置字体变体
font:设置综合字体属性
表格属性设置：
align:left/center/right 对齐方式
bgcolor:#rrggbb/colorname/rgb() 背景色
border:pixels 边框宽度
celpadding:pixels 单元格与内容之间的空白
cellspacing:pixels 单元格间的空白
frame:above/below/hsides/vsides/lhs/rhs/border/void 外边框哪部分可见
rules:none/all/rows/cols/groups 内侧边框哪部分可见
height:pixels 高度
width:pixels 宽度
表格边框样式属性
语法<table frame=" " rules" ">
frame:设置表格边框样式；rules:设置表格内部边框样式
frame 说明 rules 说明
above 显示上边框 all 显示所有内边框
below 显示下边框 none 不显示内边框
hsides 显示上下边框 rows 仅显示行边框
visides 显示左右边框 cols 仅显示列边框
lhs 显示左边框 groups 显示介于行列间边框
rhs 显示右边框
border 显示上下，左右边框
设置单元格属性
属性值 说明 属性 说明
align 单元格的内容水平对齐 bordercolorlight 单元格的亮边框颜色
valign 单元格内容垂直对齐 bordercolordark 单元格的暗边框颜色
bgcolor 单元格的背景颜色 rowspan 单元格跨行
background 单元格背景图像 colspan 单元格跨列
bordercolor 单元格的边框颜色 width 单元格的宽度
height 单元格的高度
表单格式
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<fieldset>
<legend align="center">标题</legend>
<input type="text" size="15" />
<input type="submit" value="成绩提交" />
<input type="reset" value="成绩重置" />
<input name="" type="radio" value="" checked>
</fieldset>
</form>
每组单选按钮：name值必须相同，而value属性值必须不同
普通按钮需加onclick属性，才能进行表单处理。
弹出：οnclick=“javascript:alert(‘注册新用户’);”/>
多行输入文本框
<textarea name="info" rows="4" cols="50" wrap="virtual"></textarea>
rows:输入行数
cols:输入列数
wrap:指定文本自动换行
下拉列表框
size:下拉列表的大小
multiple:列表框支持多选
selected:设置选项为预选状态
<select name="course" size="4" mutiple>
<option value="c1" selected>高数</option>
</select>
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
