--name:keywords,description,author,copyright
devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【考研复试】项目知识准备 -- 前端知识汇总_研究生复试问前端吗

作者：在线问答5 | 2024-07-23 13:45:01

赞

踩

研究生复试问前端吗

说明：此篇文章，只做汇总，不做解释。所以好多东西直接就是上属性啥的，例子很少。

HTML篇：

<head>
	<title></title> --定义网页的标题
	<meta name=" " content=" "/> --name:keywords,description,author,copyright
	<meta http-equiv=" " content=" "/> --http-equiv:content-type,refresh
	<style type="text/css"></style>
	<script></script>
	<link  rel="stylesheet"  type="text/css" href="xxxxx.css/">
	<base/> --为整个页面定义所有链接的基础定位
</head>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
<body>
	<!-- 注释内容 -->
	<h1></h1> --一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个，<h1>代表的就是本页面的题目
	<p></p> --段落标签会自动换行，并且段落与段落之间有一定的空隙
	<br/> --换行标签
	<b></b> <strong></strong> --粗体标签
	<i></i> <cite></cite> <em></em> --斜体标签
	<sup></sup> --上标标签
	<sub></sub> --下标标签
	<big></big> --大号字体
	<small></small> --小号字体
	<s></s> --删除线标签
	<u></u> --下划线
	<hr/> --水平线标签
	<div></div>
	<ol type=" "> --type: 1,a,A,i.I
		<li></li> --有序列表
	</ol>
	<ul type=" "> --type: circle,disc,square
		<li></li> --无序列表
	</ul>
	<dl>
		<dt></dt> --定义名词
		<dd></dd> --定义描述
	</dl>
	<table>
		<caption>表格标题</caption>
		<thead> --表头
			<tr>
				<th>表头单元格</th>
			</tr>
		</thead>
		<tbody> --表身
			<tr>
				<td rowspan="跨度的行数"></td> --rowspan 从当前行开始向下合并的行数
			</tr>
		</tbody>
		<tfoot> --表脚
			<tr>
				<td colspan="跨度的列数"></td> --colspan 从当前列开始向右合并的列数
			</tr>
		</tfoot>
	</table>
	<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看，鼠标移到图片上）">
	<a href="链接地址" target="目标窗口的打开方式">超链接文字</a> --target: _self、_blank ; href: 内部链接，外部链接，锚点链接
	<form name=" " action=" " method="get/post" target="_self(默认)/_blank" enctype=" "> --表单
		---
		<input type="text" value="输入值" size="文本框长度" maxlength="最多输入字符数" placeholder="文本框"/>
		---
		<input type="password" value="输入值" size="文本框长度" maxlength="最多输入字符数" placeholder="密码框"/>
		---
		<input  type="radio" name="Question1" value="boy"/>男
   	    <input  type="radio" name="Question1" value="girl"/>女
   	    ---
   	    <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label>
   	    ---
   	    <input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
   	    
   	    <input type="submit" value="提交按钮的取值"/> --提交本表单的内容
   	    <input type="reset" value="重置按钮的取值"/> --重置本表单的内容
   	    ---
   	    <input type="image" src="图像的路径"/> --图片域image既拥有按钮的特点，也拥有图像的特点。
   	    ---
   	    <input type="hidden"/ value="存储的值">
   	    ---
   	    <input type="file"/>
   	    ---
   	    <textarea rows="行数" cols="列数" placeholder="提示内容，悬浮值">多行文本框内容</textarea>
   	    ---
   	    <select multiple="multiple(多选)" size="下拉列表展开之后可见列表项的数目" >
		    <option value="代表的值" selected="selected">选项显示的内容</option>
		</select>
		---
		<button>文本或图像</button> --之间可以插入其他标签或文本
		---
	</form>
	<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/> --插入在线音频、视频、flash
	<bgsound src="背景音乐的地址" loop="播放次数"> --loop: 数字、infinite、-1
	<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="auto/yes/no(是否显示滚动条)"></iframe>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

特殊字符：

&nbsp; --空格
&quot; --英文双引号
&lsquo; --左单引号
&rsquo; --右单引号
&times; --乘号
&divide; --除号
&lt; --小于号
&gt; --大于号
&amp; --二进制与符号
&mdash; --长破折号
&#124; --竖线
&sect; – § 分节符
&copy; – © 版权符
&reg; – ® 注册商标
&trade; – ™ 商标
&euro; – € 欧元
&pound; – £ 英镑
&yen;– ¥ 日元
&deg; – ° 度

常见块元素

div 、h1～h6、p、hr、ol、ul	

  • 1

常见内联元素

strong、em、s、u、a、span、img、input	

  • 1

CSS篇：

这里CSS包括CSS2、CSS3的内容：

基本选择器

元素选择器：div{}
id选择器：#id{}
类选择器：.class{}
子元素选择器：
	1.选择所有子元素 div div{}
相邻选择器：li+li{}
群组选择器：h3,div,p,span{color:red;}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

CSS 样式

/*CSS注释的内容*/

  • 1
字体：
font-family:字体1,字体2,字体3;
font-size:关键字/像素值;
font-weight:normal、lighter、bold、bolder（关键字或100~900的数值normal=400）
font-style:normal、italic（斜体）、oblique（斜体）
color:关键字或RGB值。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
段落：
text-decoration：none、underline 下划线、line-through 删除线、overline 顶划线
text-transform：none、uppercase	转换成大写、lowercase	转换成小写、capitalize 将每个英文单词的首字母转换成大写，其余无转换发生
font-varient：（将英文文本转换为“小型”大写字母）normal	默认值，正常效果、small-caps	小型大写字母的字体
text-indent：	段落首行缩进 px/em
text-align	：（文本水平对齐方式,只能针对文本文字和img标签，对其他标签无效）left	默认值，左对齐、center	居中对齐、right	右对齐
line-height：	行高
letter-spacing：	字距，字母和中文汉字都是一个letter
word-spacing：	词距，以空格区分，所以汉字如果写一起，认为一个word

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
边框：
border-width	--边框的宽度
border-style：none 无样式、hidden与“none”相同、solid 实线、dashed 虚线、dotted 点线、double	双线，双线的宽度等于border-width值，另有3D特效未写。
border-color	--边框的颜色
综合写法：border:1px solid Red;
可分写每条边：
border-top:1px solid red;         /*上边框样式*/
border-right:1px solid orange;    /*右边框样式*/
border-bottom:1px solid blue;     /*下边框样式*/
border-left:1px solid green;      /*左边框样式*/

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
背景：

背景颜色：
background-color:颜色值;
背景图像：
background-image：url("图像地址"); --定义背景图像的路径；
background-repeat：no-repeat、repeat、repeat-x、repeat-y
background-position：x(横向位置) y(纵向位置) 或 top/bottom left/right center 两两组合--定义背景图像在元素哪个位置
background-attachment:scroll/fixed	定义背景图像是否随内容而滚动

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
超链接：

text-decoration:none; --去除<a>下划线
定义超链接伪类：（定义顺序不可改变）
a:link{CSS样式} --定义a元素未访问时的样式
a:visited{CSS样式} --定义a元素访问后的样式
a:hover{CSS样式} --定义鼠标经过显示的样式
a:actived{CSS样式} --定义鼠标单击激活时的样式

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
鼠标样式：
cursor:pointer

  • 1
  • 2

在这里插入图片描述

图片样式:
img{width:60px;height:60px;} --图片大小
border:1px solid gray; --图片边框，同上边框样式
text-align:属性值; --同上文本对齐方式
vertical-align:top 顶部对齐、middle 中部对齐、baseline 基线对齐、bottom 底部对齐 --定义行内元素相对于该元素的垂直对齐方式。

  • 1
  • 2
  • 3
  • 4
  • 5
列表：
list-style-type:
	有序：decimal 默认值，数字1、2、3，lower-roman 小写罗马数字i、ii、iii，upper-roman 大写罗马数字I、II、III，lower-alpha 小写英文字母a、b、c，upper-alpha 大写英文字母A、B、C
	无序：disc、circle、square
	去除列表项符号：none
list-style-image:url(图像地址);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
表格：
border-collapse:separate 默认值，边框分开，不合并、collapse 边框合并，如果相邻，则共用一个边框。-- 表格<td><th>上的边框合并
border-spacing:5px 10px:定义了单元格<td><th>之间水平方向的间距为5px，垂直方向的间距为10px
caption-side:top 默认值，标题在顶部、bottom 标题在底部

  • 1
  • 2
  • 3
  • 4
CSS盒子模型：
width:100px; --只有块元素能设置width和height，行内元素无法设置width和height。
height:30px; --元素的宽度width和高度height是针对内容区（content可以是文字或图片）而言的
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

浮动布局：
float:left 元素向左浮动、right 元素向右浮动（设置为浮动之后，宽度即为设定宽度，不再是块级元素占一行这种情况）
clear:left 清除左浮动、right 清除右浮动、both 左右浮动一起清除（清除浮动，因为浮动是脱离文档流，相当于元素浮于某一元素上方，这是在此元素上定义这个clear属性，用以清除其上空的浮动）

  • 1
  • 2
  • 3
定位布局：

定位布局我以前已经写过一个很详细的博客：【 position理解、margin-left与left的区分 】

  • 1
  • 2
  • 3

position理解、margin-left与left的区分

JavaScript篇：

JavaScript部分只记载比较核心的知识点，至于其他的什么if语句啥的，忽略不计。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号