web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下

1、<html>和</html> 标签限定了文档的开始和结束点。

属性:

(1)  dir: 文本的显示方向,默认是从左向右

(2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文

(3) version:定义创作文档的HTML的标准版本

2、<head></head>用于封装位于文档头部的其他标签

属性:

(1) dir:文本的显示方向

(2)  Lang:语言信息

(3)  Profile:提供了与当前文件相关联的文档数据的URL

可放在<head>标签中的标签为

(1) <base>:标注当前文档的URL的全称

属性:

Href:指定文档的基础URL地址(<body>中的相对地址都是以此基地址为基础)

Target:定义打开页面的窗口

属性值:

_parent:在上一级窗口中打开

_blank:在新一窗口中打开

_self:在本窗口中打开

_top:在浏览器的整个窗口中打开

(2) <basefont>:设定基准的字体,字号和颜色

属性:

Face:设置字体(如黑体,楷体等)

Size:设置大小(属性值从1——7,从小到大)

Color;字体颜色(值为十六进制颜色)

(3) <title>:设定显示在浏览器左上方的标题内容

属性:

Dir:文本的显示方向

Lang:语言信息

(4) <meta>:有关文档本身的元素信息

属性:

http-equiv: 生成http标题域,取值与content的属性值相同

属性值:

Refresh 为自动刷新,在content里设定刷新时间,content里也可以跟上刷新的URL,实现页面跳转;

content-type  在content里用charset设置内码语系 如charset=gb2312;

Expires  定义网页有效期,在content里的格式为星期,日 月 年 时 分 秒 GMT,用英文和数字

Page-enter 进入网页时的效果

Page-exit  退出网页时的效果

在content中对应的值为:

0:盒状收缩 1:盒状展开 2:圆形收缩 3:圆形展开

4:向上擦除 5:向下擦除 6:向左擦除 7:向右擦除

8:垂直百叶窗 9:水平百叶窗 10:横向棋盘式 11:纵向棋盘式

12:溶解 13:左右向中部收缩 14:中部向左右展开 15:上下向总中部收缩

16:中部向上下展开 17:梯状左下展开 18:梯状左上展开  19:梯状右下展开

20:梯状右上展开  21:随机水平线 22:随机垂直线 23:随机

Name:如果元数据是以关键字/取值出现的话,那么name的值就是其关键字

属性值:

Keywords   在content里定义关键字;

Discription  为定意描述,在content里定义描述内容;

Author    在content里描述作者;

Content: 关键字/取值的内容

(5) <style>:设定有关CSS层叠样式表的内容

(6) <link>:设定外部文件的链接

(7) <script>:设定文件脚本的内容

3、<body></body>界定了文档的主题

属性:

(1)、text: 页面文字的颜色

(2)、bgcolor: 页面背景的颜色(用十六进制的颜色表示)

(3)、background: 页面的背景图像(所需的是图片的URL)

(4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动条的滚动而动)

(5)、link: 页面默认的链接颜色

(6)、alink: 鼠标正在单击时的链接颜色

(7)、vlink: 访问过后的链接颜色

上面三个控制的是标签<a></a>中的颜色

(8)、topmargin: 页面的上边距      

(9)、leftmargin: 页面的左边距

4、 定义空格  <!--被注释掉的内容-->

5、文字标记

(1)、<hn>(n=1~6)标记标题字

属性:

Dir:文字方向

Lang:语言信息

Align:对齐方式

属性值:

Left:左对齐(默认)

Right:右对齐

Center:居中

Class:用一个名称来标记标题,标记名称指向在外部定义的样式表

Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记,以便作为样式表的选择器

Style:创建标题内容的内联样式

Title:给标题加上一个说明性的文字

(2)、<font>标记普通字

属性:

Face:字体 size: 字号 color:颜色

(3)、<b>或<strong> 粗体

(4)、<i>,<em>,<cite> 斜体

(5)、<sup> 上标

(6)、<sub> 下标

(7)、<big> 大字号

(8)、<small> 小字号

(9)、<u> 下划线

(10)、<s>  删除线

(11)、<address> 显示地址如Email

6、段落标记

(1)、<p> 表示一个段落的开始

属性:dir lang align class id style title

(2)、<br> 换行  <nobr>

属性:class  id style title

(3)、<div>分块文字

属性:dir lang align class id style title nowrap(强制不换行)

  (4)、<span> 行内样式定义

属性: dir lang align class  id  style  title

(5)、<center> 水平居中显示

属性: dir  lang class  id style title

(6)、<blockquote> 块引用

属性: dir  lang class id style title

7、下划线

<hr> 插入水平分割线

属性:dir lang class id style align  size noshade width color

8、列表

(1)、 <ul>无序列表,用<li>来罗列项目

属性:dir lang class id style title compact(紧凑无需列表)type(项目符号类型)

Type的属性值:disc:实心原点 circle:空心原点 square:实心方形

(2)、<ol>定义一个有序列表

属性:dir lang class id style title compact start(数字起始值)

Type的属性值:1,A,a,i,|

(3)、目录列表<dir>,无序列表的一种特殊形式

属性: dir  lang class id style title

(4)、定义列表<dl>

基本用法: <dl>

<dt>名词</dt>  <dd>解释</dd>

</dl>

属性:dir lang class id  style title compact

(5)、菜单列表<menu>,用于表示简短的列表

属性:dir lang class id style title

9、插入图片

<img> 插入图片标签

属性:

Src:图像的源文件路径 Alt:文字提示(图像不显示时) width、hight:宽度、高度 border:边框

Vspace:垂直间距 hspace:水平间距 dynsrc:设定avi文件的播放 loop:设定avi播放次数

Loopdelay:设定avi播放延迟 start:设定avi文件的播放方 lowsrc:设定低分辨率图片 usemap:映像地图

Dir lang class id align style title

Align的属性值极其说明:

Top:文字的中线在图片的上方 middle:文字的中线位于图片的中部

Bottom:文字的中线位于图片的底部 left:图片在文字左侧

Right:图片在文字的右侧 absbottom:文字的底线位于图片的底部

Absmiddle:文字的底线位于图片的中部 baseline:英文文字基准线对齐

Texttop:英文文字上边线对齐

10、插入超链接

(1)、标签<a></a>为超链接标签

属性:

Href:指定链接地址 name:给链接命名 target:指定链接打开窗口 accesskey:链接热键

Dir lang align class id style title charset rel:指定从原文档到目标文档的关系

Rev:指定从目标文档到源文档的关系 type tabindex:对新窗口中的对象重新排序

URL格式:

http://进入万维网站点 ftp://进入文件传输服务器 news://启动新闻讨论组 telnet://启动telnet方式

Gopher://访问gopher服务器 mailto://启动邮件(href=”mailto://sdut@qq.com? Subject=给我来信”)

(2)、书签链接,试用于页面太长时,避免翻页,格式如下

<a  name=”name”> 文字 </a> <a  href=”#name”> 文字链接 </a>

(3)、空链接: <a  href=”#”> 链接 </a>

(4)、脚本链接:<a  href = “javascript:.....”> 文字链接 </a>

(5)、制作图像映射:在同一图像上嵌入不同的链接,创建图像映射的方式是通过<img>标签的usemap属性再结合<map>    以及<area>标签来实现的,<a>或<area>标签包含在<map>标签内

<map>的属性:

 name  给链接命名  dir  lang id class style title

<area>的属性:

Href alt accesskey target dir  lang id class style title tabindex shape(图像映射区域的形状) coords(图像对光标敏感区域的坐标)

Shape的属性值:

Rect  矩形区域 circle  椭圆形区域 poly  多边形区域

事例:

<img   usemap=”#map”  src=”URL”  hight=””  width = “”  border = “”>

<map  name = “map”> 

<area  shape = “rect”  coords = “100,23,56,90”  href = “URL”>

<area  shape = ...............................................................................>

</map>

11、插入多媒体

(1)、插入声音标签<bgsound>

属性: src (声音文件路径)  loop 循环次数

(2)、<embed>标签可以在网页中加入MP3音乐,电影,swf动画等多媒体文件

属性: src loop autostart width hight hidden(是否隐藏内嵌播放器)  dir   lang   class    id    style align title type(嵌入多媒体类型)

Hidden 和 autostart 的属性值有true和no

当嵌入flash动画时还有以下属性:

Quality 动画的播放质量 puginspage 播放插件所在位置   wmode 动画播放时的窗口模式

(3)、制作滚动字幕标签<marquee></marquee>

属性: align behavior(滚动方式)  bgcolor class direction(滚动方向) width hight  Hspace   vspace

Style loop  scrollamount(滚动速度)  scrolldelay(滚动延迟)

Direction的属性值:up down left right

Behavior 的属性值: scroll(循环往复《默认》) slide(只走一次滚动) alternate(交替进行滚动)

Scrollamount后跟数字越小越慢,scrolldelay后跟毫秒,vspace和hspace 定义字幕与周围文字的距离

12、其他嵌入

(1)、<object>标签用于往文档中嵌入对象

属性:classid(指定包含对象的位置) archive(URL列表) border codebase(提供一个可选的插件URL)hight

Width  data(指定需要对象处理的数据文件)  hspace   vspace name  type  tabindex   dir  lang   align class  id style title

(2)、<applet>标签用来插入applet小程序

属性: code (指定浏览器运行的Java类小程序的名称) codebase hight width hspace vspace  name type  class  alt id   title   style align

(3)、<param>标签为把包含他的<object>或<applet>提供参数

属性:type  name  id  value

13、表单:

表单由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有的这些都放在<form>中

(1)、<form>

属性: dir lang align class id style title name  method(定义表单结果从浏览器传输到服务  器的方法一般有post 和get 两种方法) action(用来定义表单处理程序(asp,CGI等)的位置(相对或绝对)) enctype(设置表单编码方式) target(表单返回显示方式)

Enctype的属性值: text/plain(以纯文本形式传送)   application/x-www-urlencoded(默认编码方式) multipart/form-data   使用mine 编码

(2)、表单输入标签<input>

属性: dir lang class id alt name align style title type accesskey  value  size   src accept(文件上传的MIME表列) checked(已选中) disabled(禁止某个元素输入)maxlength(最大字符数)

Type的属性值:text 文字域   password密码域 file 文件域 checkbox复选框 radio单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden隐藏域  image 图像提交按钮

(3)、多行文字域<textarea>

属性:dir lang class id style title name accesskey disabled tabindex  rows(行数) cols(列数) wrap(多行文字域的换行)

Wrap的属性值:virtual  虚拟换行 physical  物理换行   off 不换行

(4)、<select>下拉菜单和下拉列表标签,把标记条目放在<option>标签中

属性:dir lang class id style title name disabled(禁用某个列表) size   tabindex multiple(列表中的多选项目)

14、表格

(1)、定义表格<table>

属性:dir lang class id style title name bgcolor background bordercolor bordercolorlight bordercolordark border height width cellpadding(单元格边距) cellspacing(单元格间距) nowrap frame(表格边框的可见方式) rules(行列之间边的可见方式) summary(整个表格的概要描述)

Frame的属性值:

Above 显示上边框 below显示下边框 border 边框全显示 hside显示上下边框 vside显示左右边框 lhs显示右边框 rhs显示左边框 void 显示

Rules的属性值:

All 显示所有内部边框 cols仅显示列边框 groups显示位于行列间的边框 none不显示内部边框 rows仅显示行边框

(2)、定义行<tr>

属性:dir lang class id style title bgcolor background  bordercolorlight  bordercolordark valign(表格行的垂直对齐方式)

(3)、定义列<td>,<th>为定义表头

属性:dir lang class id style title bgcolor background bordercolorlight bordercolordark valign width height abbr(单元格的缩写) axis(用逗号分割目录名列表) rowspan(单元格跨行个数)

Colspan(单元格跨列个数) headers(标题单元格的列表) nowrap(禁止换行) scope(指定单元格提供信息)

(4)、表格标题内容<caption>

属性:dir lang class align id style title valign

15、框架主要分为两部分:一个是框架集,另一个是框架

(1)、<frameset>框架集,仅是一个框架的集合

属性:class id style title rows cols bordercolor frameborder framespacing(框架集间距)

(2)、定义框架<frame>

属性:class id style title   bordercolor  frameborder   name noresize(禁止调整边框大小)   src(框架源文件)

Marginwidth(框架边缘宽度) marginheight(框架边缘高度)

Frameborder的属性值:yes 出现边框 no 不出现边框

(3)、<iframe>定义内联框架,在文档中定义一个独立的矩形区域,有独立的滚动条和边框

属性:class id style title frameborder name src marginwidth marginheight align height width scrolling(是否允许出现滚动条)

Scrolling的属性值:yes 出现  no不出现 auto自动出现滚动条

16、样式表

(1)、内联样式表:只需在标签内含一个上style属性,style属性后在跟一系列属性和属性值即可。

事例:<标签  style = “属性:属性值”>

(2)、文档样式表用<style>标签表示

属性:dir lang title media(文档要使用的媒介类型) type(样式类型)

级联样式表type的属性值都是text/css,javascript使用的样式表都是text/javascript

Media的属性值:screen 计算机显示屏(默认)  tv(电视) projection 剧场   handheld(PDA和手提电话) print 打印 all所有媒体

(3)、外部样式表:用<link>标签来实现

属性:dir title lang target type class id style charset href media rel rev

(4)/样式表语法

(a)、HTML重新定义标签样式表语法:

exp: td{color:red;font-size:8pt}

(b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式,在文档后面通过设置class属性 来选择特定的样式。

例子: .bg {background-image: url(路径);}

<body class = ”bg”>

17、样式表的属性

(1)、字体属性: font-family 用一个指定的字体名 font-size 字体显示的大小 font-style 字体显示的样式 font-weight 定义字体的粗细 font-variant 设置英文大小写转换  font 组合设置字体属性

Font-style的属性值:normal 正常值 italic 斜体 oblique 扁斜体

Font-weight的属性值: normal 正常值 bold 粗体 bolder 在加粗 lighter 变细 100—900 共有100到900个级别数越大越粗

Font-variant的属性值:normal 正常     small-caps 将小写转换为大写

Font组合时的顺序:样式,粗细,大小

(2)、颜色和背景属性:

Color 颜色  background-color 背景颜色 background-image 背景图片 background-repeat 背景图片如何重复

Background-position 设置背景图片水平和垂直的位置 background 组合设置背景属性

属性值:

Background-repeat:repeat 平铺 repeat-x  X方向上平铺 repeat-y Y方向上平铺  no-repeat不平铺

Background-position: value 以百分比(x%.y%)或绝对值的形式(x.y)来确定背景图像的位置 top 居顶

Center 居中 bottom居底 left 居左 right居右

Background可以任意组合以上的属性值

(3)、文本属性:

Letter-spacing 定义一个附加在字符间的间隔数量  word-spacing单词间的间隔数量   text-index文字的首行缩进

Text-align 文本对齐方式 line-height行高间隔 text-transform控制英文文字大小写 text-decoration文字修饰

属性值:

Letter-spacing: normal 正常值 长度单位 如2em

Word-spacing : normal 正常值 长度单位

Text-decoration:underline 加下划线  overline 加上划线   line-through 加删除线  blink闪烁文字,只使用于     netscape浏览器    none默认值

Text-align:left 左对齐 right右对齐 center居中 justify两端对齐

Text-index:后跟长度单位如2em

Text-transform: capitalize将每个单词首字母大写 uppercase 将每个都转换为大写  lowercase 转换为小写 none

(4)、边框属性:

Border-color 边框颜色    border-style 边框样式     border-width边框宽度     border-top-color 上边框颜色

Border-left-color 左边框颜色  border-right-color 右边框颜色   border-bottom-color 底边框颜色      border-top-style  border-left-style border-right-style  border-bottom-style  border-top-width   border-left-width

Border-right-width  border-bottom-width  border 组合设置 border-top(right/left/right/bottom)

属性值:

Border-style:none 无边框  dotted 边框由点组成  dash 边框由短线组成  solid边框是视线  double双线

Groove  立体沟槽  ridge 边框成脊形  inset 边框内嵌一个立体边框  outset边框外嵌一个立体边框

(5)、方框属性:

Float 让文字环绕在元素四周     clear指定在某一元素的某一边是否允许有环绕的文字和对象  clip限定只显示裁切 出来的区域 width设定对象的宽度 height设定对象的高度 padding设定边框和内容间的距离   margin 元素里 浏览器的距离 overflow 当本层内容容纳不下时的处理方式 position 设置对象位置   z-index决定层的先后顺序和覆盖关系

属性值:

Float: none left right

Overflow:  visible无论层的大小,内容都会显示出来 hidden 隐藏超出层的内容  scroll 不管是否超 出都会添加滚动条 auto 只有超出时才会有滚动条

(6)、列表属性:

List-style-type 设定引导列表的项目类型 list-style-image  选择图像作为项目的引导符号 list-style-position  决定列表项目所缩进的程度

属性值:

List-style-type: disc 在文本行前加实心圆   circle 加空心圆   square 加实心方块  decimal  加阿拉伯数字

Lower-roman  小写罗马数字   upper-roman 大写罗马数字   lower-alpha 小写字母   upper-alpha 大写字母 none 不显示任何符号

List-style-image:的属性值为URL(图片路径)

List-style-position: outside 列表贴近左侧边框 inside 列表缩进

(7)、滤镜属性:基本语法   filter: 滤镜 (参数)

Alpha 透明的层次效果   blur 快速移动的模糊效果   chroma 特定颜色的透明效果    dropshadow阴影效果

Fliph 水平翻转效果 flipv 垂直翻转效果 glow 边缘光晕效果 gray灰度效果    invert 颜色亮度值翻转

Mask遮罩效果 shadow渐变阴影效果 wave波浪效果 xray  X射线效果

(8)、鼠标滤镜:用法---------cursor: value

Value的值: hand 手型 crosshair 交叉十字 text 文本选择符号   wait沙漏装    default 默认形状  help 问号

N(W、S、E)-resize 向北(西、南、东)的箭头

18、在页面中加入Javascript脚本

(1)、用标签<script>实现

属性: charset编码脚本程序的字符集 language 脚本语言 src 包含脚本程序的URL type脚本类型

(2)、js内在事件:onBlur光标离开文本框时 onChange 当文本框的内容给被改变是时 onClick单击时 onLoad载 入时 onMouseOver鼠标经过时  onMouseOut鼠标移开时 onReset 复位表单时 onSubmit提交表单时 onSlecte 文本域被选中时 onUnload退出载入时 onFocus当光标落在文本框时

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2665
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

3544
来自专栏性能与架构

浏览器如何完成网页渲染?

image.png 渲染流程 (1)把HTML代码形成文档对象模型DOM (2)加载并解析样式文件,形成CSS对象模型 (3)在DOM和CSS对象模型基础上,把...

2766
来自专栏IMWeb前端团队

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一...

2936
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

1191
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

3906
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

2125
来自专栏自动化测试实战

HTML第三课——css盒子【2】

29614
来自专栏每日一篇技术文章

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

2181
来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

942

扫码关注云+社区

领取腾讯云代金券