HTML/CSS及JavaScript初次学习知识点总结

最新推荐文章于 2024-11-06 15:47:31 发布

旧梦时节

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量401

点赞数 2

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/lqb_zxs/article/details/112850762

版权

HTML/CSS及JavaScript初次学习知识点总结(七天学习前端)

文章目录

HTML/CSS及JavaScript初次学习知识点总结(七天学习前端)

第一天

html
1、标签：承载网页内容的容量；
2、<!DQCTYPE html>是网页的声明；
3、每个网页都是从<html>开始，然后从</html>结束；
4、每个内容的结束都是在开始的标志前面加/；
5、<head>引入架包，设置网页属性</head>；
6、<title>网页的标题</title>；
7、字符编码：<中文:gb2312 gbk utf-8 blg5> <英语：iso-8859-1>
8、<meta charset>作用：1、设置字符编码；2、设置网页刷新的频率；3、设置网页检索的关键字；4、网页内容的简述。
9、<link rel="shortcut icon" href="img/图片名称.jpg"标题前面的图片；/>
10、<body>浏览器主窗口显示的内容</body>；
11、标题标签<h1></h1>……<h6></h6>；
12、水平线标签<hr />；
13、段落标签<p></p>；
14、有序列表<ol> <li></li> </ol>；
15、无序列表<ul> <li></li> </ul>；
16、描述标签<dl> <dt>标题</dt> <dd>内容</dd> </dl>；
17、div盒子<div></div>；

第二天

1、块级标签：①独占一行；②大小与内容无关。
重要: 段落标签<p></p>; 无序列表<ul><li></li></ul>; div盒子<div></div>。
2、行级标签：①不独占一行；②大小与内容有关。
（1）<span></span>
（2）<a (target="_self") href="网址"></a> 超链接（同一窗口显示）

<a href="../自己做的网址"></a>
<a target="_blank" href=""></a>(不同窗口显示)

（3）<img src(路径)="img/图片.jpg" width="宽度" height="高度" title="名称" alt=""(图片无法加载)/>
（4）<video style="object-fit:inherit;"(可使视频调成正方形) src="video/….mp4" controls="controls"(播放控制面板) autoplay="autoplay"(自动播放) loop="loop"(循环播放) width=""></video>
（5）<audio src=""></audio>(音频)
重要：<span></span>;<a></a>;<img />。
3、视频：ogg,MP4;音频：MP3,ogg,war;
4、表格：

<table border="1" width="" height="" align="center"(居中) cellspace="0"(空间) cellpadding="20"(内填充) >
</table>
<td rowspan="2">2</td>(行合并)
<td colspan="2">8</td>(列合并)

5、表单<form action="" method="get/post"></form>
用户名：<input type="text" id="" name="" placeholder="请输入用户名"/>
密码：<input type="password" placeholder="请输入密码"/>
性别：<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女
爱好：<input type="checkbox" value=" "/> <input type="checkbox" value=" "/> <input type="checkbox" value=" "/>
年龄：<input type="number" />
籍贯：<select><option></option></select>
生日：<input type="date" />
星期：<input type="week" />
月份：<input type="month" />
个人简介：<textarea style="resize:none;"(固定) rows="行" cols="列">文本域</textarea>
6、按钮

	<input type="button" value="普通按钮"/>
	<input type="submit" value="提交按钮"/>
	<input type="reset" value="重置按钮"/>
	<input type="image" src="img/….jpg" width="宽" height="高" value=" "/>

7、嵌入式框架<iframe src="…/index.html" width="宽" height="高" scrolling="no" frameborder="0"></iframe>

第三天

1、修饰网页Css;样式；选择器；
2、Css外部样式，推荐使用；在<head>内写<link rel="stylesheet" href="css/style.css"/>
html内只写标签，用Css控制样式；
3、选择器：
①通用选择器： *{ }
②标签选择器：标签名称{ }
③类选择器： .类选择器名称{ } 优先级较高于前两个
④id选择器： #id选择器{ } 优先级较高于前三个
⑤后代选择器父子关系用空格
⑥伪类选择器：选择器名称:hover{ }
4、页面布局：块级标签、行级标签
float:left;浮动
5、下拉菜单

<ul class="1"> 
		<li>
			<ul class="2">
				<li></li>
				<li></li>	
			</ul>
		</li> 
		<li> </li> 
	</ul>

Css:
1、设置css中li标签的宽、高、浮动、取点、水平居中、垂直居中。

li{width:120px;
	height:36px;
	float:left;
	list-style:none;取点
	text-align:center;水平居中
	line-height:36px;垂直居中
}

2、后代选择器、伪类选择器

{display:none}
.（后代选择器）1 li:hover .2{display:block;cursor:pointer;小手}

第四天

1、修饰字体常用样式

	text-align: center;/*水平居中*/
	line-height: 400px;/*垂直居中*/
	color: blue;/*文字颜色*/
	font-size: 50px;/*文字大小*/
	font-family: "楷体";/*字体*/
	font-style: italic;/*斜体*/
	text-decoration: underline;/*下划线*/
	font-weight: bold;/*加粗*/
	letter-spacing: 15px;/*字体间间距*/
	text-shadow:1px 1px 1px white;/*字体阴影*/

2、修饰背景常用样式

	background-image:url(../img/1.jpg) ;/*背景图片（../返回上一级目录）*/
	background-repeat: no-repeat;/*平铺*/
	background-size: 99%;/*等比例缩放*/
	background-attachment: fixed;/*图片不滚动*/
	background-position: -150px 0px;/*背景图片平移*/

3、内边距

	padding-top:10px;

4、边框

	border:1px red solid;

5、外边距

	margin:10px 20px 30px 40px;

第五天

1、!important 强调重要；
2、box-shadow:0px 0px 1px #dedede;框阴影；
3、position:absolute;绝对定位

	top:43px;
	right:80px;

4、outline-none;去边框
5、搜索框

<form>
	<div class="research">
		<div id="inp_camera"></div>
		<button class="butt">百度一下</button>
	</div>
</form>

#inp_camera{
	width: 539px;
	height: 34px;
	float: left;
	border-top: 1px #dedede solid;
	border-left: 1px #dedede solid;
	border-bottom: 1px #dedede solid;
}
#inp_camera:hover{
	border-top: 1px gray solid;
	border-left: 1px gray solid;
	border-bottom: 1px gray solid;
}

第六天

1、字体图标库

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />

2、轮播指标

	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>

3、搜索框

.research{
	width: 310px;
	height: 31px;
	float: right;
	margin-right: 10px;
	margin-top:6px;
	/*background-color: #f0f0f0;
	border-radius: 18px 18px 18px 18px;*/
}

JavaScript
4、JS的了解

function hidd(){
	document.getElementById("ad").style.display="none";
	document.getElementById("under_list").style.top="0px";
}

第七天

轮播指标、轮播项目、轮播导航的学习

<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	<li data-target="#myCarousel" data-slide-to="1"></li>
	<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
	<div class="item active">
		<img style="height: 500px;" src="img/DU5qa.jpg" alt="First slide">
	</div>
	<div class="item">
		<img style="height: 500px;" src="img/p239R.jpg" alt="Second slide">
	</div>
	<div class="item">
		<img style="height: 500px;" src="img/YWh.jpg" alt="Third slide">
	</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
</a>