Web前端笔记部分

啊晴639

已于 2023-02-14 15:30:40 修改

阅读量554

点赞数 3

文章标签：前端 html javascript

于 2022-08-26 22:49:04 首次发布

本文链接：https://blog.csdn.net/qq_69355613/article/details/125937104

版权

前言

学做网页的作用

目前各大厂商、各大平台，都拥有自己得一个浏览器。例如Windows有IE浏览器；腾讯有QQ浏览器；阿里有从别人那里收购的UC浏览器；百度也有自己的百度浏览器。这些大公司都在开发浏览器，这说明网页开发是一个非常大的市场。

手机上的APP，浏览器（网页）都是用JAVA源生开发。一个个APP、浏览器界面的跳转，其实都相当于是一张纸网页的切换。所以学做网页可也用来开发APP
一些站长开发网页之后，用来宣传一些自己的网转（经验）等等，所以学做网页可也分享自己学习的经验
学做网页后，在未来工作中可以为自己所在的企业开发一些网站、系统等等

学做网页的基础

最好能会一些简单的英文单词，只要记住一些关键词
会一些简单的电脑软件操作基础
会一些开发工具的使用（如Hbuilder，代码可以被提示）

问:网页从何入手？

答：HTML标签，此为根本大法
关键是马上开始写，马上看效果

第一课时、HTML入门

介绍

HTML5 是 Hyper Text Markup Language 5 的缩写，HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML(Hyper Text Markup Language )：超文本标记语言

超文本，体现在图片，文字，视频，数据流等等

作用

提供标记给浏览器，浏览器根据标记来识别。浏览器根据W3C组织规定的标记做出相应的解析

试验一、创建一个简单的网页

创建一个网页目录（名字任一），并显示扩展名

2.新建一个文本文档并更改扩展名为html，弹出窗口点是

3.右键打开方式，使用记事本打开

4.编辑内容
注：此处添加什么内容，建好的网页就会显示什么内容
5.效果

第二课时、了解HTML基本结构

HTML基本结构

根节点 <html>
两个子节点<head><body>

<html>
	<head>
		<title></title>
		<meta charset="utf=8" />
	</head>
	<body>
	</body>
</html>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的世界</title>
		</head>
	<body>
		欢迎来到我的世界，恭候您的到来！
	</body>
</html>

效果
效果图

网页编码格式

utf-8 国际通用的编码格式
GBK和 GB2312 为中文编码

注意点

1.HTML代码基本结构是不能乱的，不然会出现意想不到的效果
2.代码的书写要有层次感，这个是编程中都有的一个规定
3.网页的标题一定要写在<title>标签中
4.<html><head><body>这三个标签，一张网页只能出现一次，表示一张网页的HTML代码结构
5.网页设置的编码格式要与文件的编码格式保持一致，不然会出现乱码，推荐使用utf-8编码格式
6.<meta>标签因为中间没有需要写的内容作为功能，所以就直接可以自己结束标签而不采用成对出现的形式，自结束的写法<meta />

第三课时、了解网站基本结构

网站基本结构

css

样式文件夹，用于存放一些美化网页的东西。例如：网页字体颜色

img

网页素材文件夹，用于存放一些网页素材。例如：图片、视频等

js

JavaScript脚本文件夹，用于存放一些可以控制html代码的文件夹

index.html

网页首页文件

建立一个网站基本结构步骤

1.在任一位置建立一个网站项目根目录
2.建立若干个文件夹以及一个首页文件
网站基本结构

疑难解答

1.为何将index.html为网页首页文件？
答：一般情况下，web服务器中默认都是配置为index.html、index.htm来作为首页浏览
2.JavaScript是什么？
答：JavaScript，脚本语言（弱语言），用来控制网页上的元素。元素是指html中的各种标签。如:<srtong></strong>
3.常说的前端开发是什么？
答：前端开发：html5+div+css/css3+js

第四课时、网页开发环境搭建

Hbuilder5

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

安装Hbuilder5

下载链接：Hbuilder最新版
安装方式：
安装方式：
1.将下载好的压缩包拖入任意位置
2.右键解压缩到当前文件夹
3.右键–>发送到–>桌面快捷方式
4.安装完成

Hbuilder使用技巧

使用技巧见HBuilderX\readme\Markdown语法帮助.md
或前往官网查询

注:若打不开用Hbuilder打开

利用Hbuilder5 搭建一个基本网站并运行

1.新建一个项目可采用模板也可自己创建

2.编辑网页内容，编辑index.html(内容自定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的世界</title>
	</head>
	<body>
	欢迎来到我的世界！！！
	</body>
</html>

3.建立一个css文件并进行编辑，使网页字体颜色为紫色

body {
	color:purple;
	}

4.使用<link>语句将css文件与网页文件进行链接

<link rel="stylesheet" type="text/css" href="css/main.css" />

5.保存文件进行测试
测试效果：

第五课时、网页快速开发技巧

一次写多个标签技巧

使用符号“”
举例：写10个a标签
a10然后按Tab键补全即可
a*10

多光标同时书写

按住Ctrl键，然后鼠标点击选择各个位置即可
多光标同时写

快速编写div标签

Id对应“#”
Class对应“.”

使用“>”表示下一层节点，使用“+”表示同层节点
例1：写一个带有class属性的div标签。
键入div.panel然后Tab键补全

例2：写一个带有多个属性的div标签
键入div.panel>div.title+div.content+div.function然后Tab键补全
例2.1
或者键入div#section1>div.p2+div.panel>div.title+div.content+div.function然后Tab键补全
例2.2
注：各标签之间可以使用”加减乘除”来进行多标签快速输入,如键入”div.content*4”则会生成4行<div.class=”content”></div>

第六课时、基本代码框架

网页内容代码基本结构

<div id="wrapper">
	<div class="header">上</div>
	<div class="main">中</div>
	<div class="footer">下</div>
</div>

css代码规划

新建一个common.css
common.css：通用css文件。可以在多张页面上使用这一个css文件，可通过这一次书写的css，同时在多张页面上生效

body{
	margin: 0;/*去除白边效果*/
}
#wrapper{
	border:1px solid yellow;/*border:设置边框，solid：设置颜色*/
}

#wrapper .header{/*头：上*/
	background-color: red;/*设置背景颜色*/
	height: 50px;/*height:设置高度*/
}

#wrapper .main{/*内容:中*/
	background-color: green;
	height: 150px;
}

#wrapper .footer{/*尾部：下*/
	background-color: brown;
	height: 300px;
}

效果图：

问：如何解决白边效果

答：在body语句中添加margin:0 即可

body{
	margin: 0;
}

效果图

第七课时、导航栏开发案例

链接标签`<A>`

举例：<a href=”index.html”>首页</a>
效果：点击"首页”会进入"首页"页面
解释:
1、href属性：链接的目标，如果要链接外部网络，那么要加具体网址
2、target属性：使用_blank，可以打开新窗口链接出去。默认没加入，意味着在本窗口链接

第八课时、导航栏美化

css基础

Html中的class属性对应到css中为符号 ”.”
Html中的id属性对应到css中为符号”#”
Html中的层次结构，每一层对应到css中要用空格隔开

main.css示例

.header .logo{/*logo美化*/
	font-size: larger; /*font-size:字体大小*/
	background-color: black ; /*background-color:背景颜色*/
	color:white; /*color:字体颜色*/
	padding: 10px; /*padding:内边距*/
}

.header .nav{/*导航条容器美化*/
	background-color: blue;
	overflow: auto; /*overflow:auto使用浮动时候结合使用，可以使得容器的宽度自动体现*/
}

.header .nav a.index{/*“首页”两个字的特殊配置*/
	background-color: orange;
}

.header .nav a{/*导航条的csss代码*/
	background-color: blue;
	font-size:17px ;
	color: white;
	padding: 10px;
	float: left;/*float:left 向左浮动，一旦浮动后，就会脱离文档流*/
	text-decoration: none;/*text-decoration:none 去掉下划线*/
}

.header .nav a:hover{/*鼠标放上后的css*/
	background-color: orangered;
}

效果图：

第九课时、图片轮播案例

准备工作

一个简单的项目文件夹（css,img,js,index.html），若干图片

index.html示例文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>刘金玉编程</title>
		<link rel="stylesheet" href="css/main.css"/><!-- 导入css文件 -->
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<div class="logo">刘金玉编程</div>
				<div class="nav">
					<a class="index" href="index.html">首页</a>
					<a href="＃">美丽生活</a>
					<a href="＃">VB</a>
					<a href="＃">JAVA</a>
					<a href="＃">C++</a>
					<a href="http://www.baidu.com">百度</a>
				</div>
			</div>
			<div class="main"></div>
				<div id="pictures">
					<img src="img/a%20(1).jpg"><!-- 导入图片 -->
				</div>
			<div class="footer"></div>
		</div>
	</body>
</html>
<script src="js/main.js"></script><!-- 导入js文件 -->

main.css文件示例

body{
	margin: 0;/*去白边*/
}
.header .logo{/*logo美化*/
	font-size: 28px;/*字体大小*/
	font-weight: bolder;/* 定义字体粗细*/
	background-color: black ;
	color:white;
	padding: 10px;	/*内边距*/
}
#pictures img{
	width: 80%;/*定义图片占比*/
}

mian.js文件示例

//获取容器
var pics=document.getElementById("pictures");
var n=1;
//设置时钟控件
setInterval(function(){
	//alert("n");
	//n++;
	if(n>4) n=1;
	pics.innerHTML="<img src='img/a%20("+n+").jpg' />";
	n++;
},2000);

JavaScript文件

js代码，可以用来控制网页上面html标签的逻辑，俗称DOM控制

(1) 注释语句

单行注释"//" 多行注释"/* … */"
n++：n=n+1

(2)document.getElementById(“”)；

用法：document.getElementById(“对应html中标签的id的值”)；
注解：根据id来获取对应html中标签的元素

(3)pics.innerHTML

用法：pics.innerHTML=“容器内部的元素”
注解：替换对应标签的内容

(4)setInterval()函数

setInterval()函数用于设定每隔指定的时间就执行对应的函数或代码

(5)function(){ }函数

function(){ }，这是一个匿名函数，可以直接被调用

效果图：

效果图

第十课时、js基础—点赞案例

var语句

var语句，可以用于声明变量，变量声明后，变量为空 (没有值)。如要为变量赋值则在声明变量时直接赋值即可
例如：var k=1;
注解：声明一个k为1的变量

function语句

function 语句用于声明一个函数。
格式：

function 自定义函数名称(){
		//这里是函数中具体要执行的代码
}

function 自定义函数名称(参数1，参数2...){
		//这里是函数中具体要执行的代码
}
如果有返回值，那么将返回值用return关键词来返回

Document

代表html上下文，这里有所有的html代码组成的元素，以及其他一些元素

通过getElementById方法可以获取到html元素
innerHTML代表元素的内部所有的html代码

button

标签定义一个按钮。

在元素内部，您可以放置内容，比如文本或图像。这是该元素与使用元素创建的按钮之间的不同之处。

点赞案例

index.html文件示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>点赞</title>
		<script src="js/main.js"></script> <!--导入js文件-->
		<link rel="stylesheet" href="css/main.css"><!--导入css文件-->
	</head>
	<body>
		<button id="btnlike" onclick="dolike()">赞0</button><!--定义一个点赞的按钮-->
	</body>
</html>

main.css文件样式

body {
	margin: 0;/*去白边*/
}

#btnlike {
	width: 100%;/*宽度*/
	font-size: 180px;/*字体大小*/
	font-weight: bolder;/*字体粗细*/
}

main.js文件样式

var k=0;
function dolike(){
	k++;
	var btnlike=document.getElementById("btnlike");
	btnlike.innerHTML="赞"+k;
}

效果图

第十一课时、制作新闻列表

标题标签

HTML 标题（Heading）是通过h1、h2、h3、h4、h5、h6 标签来定义的
特点：默认加粗、有上下空白，默认有换行

css

float:left浮动往往和html中父级节点的overflow:auto连用，确保父级节点的高度不会因为这个浮动流脱离文档而失去高度

index.html文件示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻列表</title>
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div class="wrapper">
			<div class="header"></div>
			<div class="main">
				<div class="news">
					<div class="moduletitle">
						<h1>台湾民生</h1>
						<strong>TAIWAN LIVEHOOD</strong>
					</div>
					<div class="modulecontent">
						<div class="mcline1">
							<img src="img/1.jpg">
							<span>刘金玉编程|如何制作一个新闻列表？</span>
						</div>
						<ul>
							<li>aaaaaaaaaaaaaaaaaaa</li>
							<li>bbbbbbbbbbbbbbbbbbb</li>
							<li>ccccccccccccccccccc</li>
							<li>ddddddddddddddddddd</li>
							<li>eeeeeeeeeeeeeeeeeee</li>
							<li>fffffffffffffffffff</li>
						</ul>
					</div>
				</div>
					<!--第二个新闻列表-->
					<div class="news">
						<div class="moduletitle">
							<h1>中国之声</h1>
							<strong>VOICE OF CHINA</strong>
						</div>
						<div class="modulecontent">
							<div class="mcline1">
								<img src="img/2.jpg">
								<span>刘金玉编程|如何制作一个新闻列表？</span>
							</div>
							<ul>
								<li>aaaaaaaaaaaaaaaaaaa</li>
								<li>bbbbbbbbbbbbbbbbbbb</li>
								<li>ccccccccccccccccccc</li>
								<li>ddddddddddddddddddd</li>
								<li>eeeeeeeeeeeeeeeeeee</li>
								<li>fffffffffffffffffff</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

main.css文件示例

.main .mcline1 img{
	width: 150px;
}
.main{
	width: 700px;
	margin:auto;/* 居中 */
}

.main .news{
	width: 300px;/* 宽度 */
	border: 1px solid #ccc;/* 4个边框格式为1像素实线淡灰色 */
	float: left;/* 向左浮动 */
	margin-left: 10px;/* 左外边距 */
	padding: 10px;/* 内边距 */
	
}
.main .news .moduletitle{
	border-bottom: 1px solid #ccc;/* 下边框格式为1像素实线淡灰色 */
	padding-bottom: 5px;/* 下内边距 */
	margin-bottom: 10px;/* 下外边距 */
}
.main .news .moduletitle h1{
	color:lightblue;
	margin-bottom: 3px;/* 下外边距 */
}

.main .news .moduletitle strong{
	color:#ccc;
}

.main .news .mcline1{
	background-color: #eee;
	overflow: auto;/*overflow:auto使用浮动时候结合使用，可以使得容器的宽度自动体现*/
}

.main .news .mcline1 img{
	float: left;/* 向左浮动 */
}

.main .news .mcline1 span{
	padding: 5px;/* 内边距 */
	float: left;/* 向左浮动 */
	width: 140px;
}

.main .modulecontent ul{
	margin-top: 10px;/* 上外边距 */
	padding: 15px;
}

.main .modulecontent ul li{
	margin-bottom: 10px;/* 下外边距 */
	color: powderblue;
}