提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
前端学习要比java基础容易一些。在学习过程中，我的内心也不会出现像学习java遇到长难知识点而出现急躁情绪，我想这可能是因为在学习每个知识点时我都能根据自己喜好调整制作页面的内容而产生的获得感的帮助吧。当然，我也有计划复习java基础的知识，但学习上的任务量让我的复习计划举步维艰。
HTML简介
标签
标签需要前后对应
<html>：根标签
<head>:头标签
<title></title>（显示在标题栏）
</head>
<body>（内容）
</body>
</html>
<p></p>表示段落
<br />表示换行
<hr />生成一条水平线
注释
**
可以编写html注释，不会在页面中显示
声明
常用html5
** 元素（与标签等价）**
字符集
meta标签
用来设计网页的一些源数据，如网页的字符集，关键字，简介
（为自结束标签）
例：
<meta charset “UTF-8”>
实体
在html中"<“”>"等特殊字符不能直接使用
需要使用“&实体名字;”
如:< < “空格”
> > 版权符号 ©
图片
标签
使用img标签从外部引入图片
img为自结束标签
在img标签中需要“src“属性引入图片路径”alt“进行图片描述
alt可以让搜索引擎发现图片中alt所写的属性，使之可以被检索
路径
相对路径：当前资源所在目录的位置
”…/“返回上一级
格式
JPG
支持颜色多，可以压缩。不支持透明 （保存照片）
GIF
支持颜色少，支持简单透明，动态图
PNG
支持颜色多，支持复杂透明
使用原则
效果一致用小的，效果不一致用好的
meta标签
<!-- 可以设置网页关键字-->
<meta name="keywords" content="前端,java">
<!-- 用来只能网页描述；
搜索引擎在检索关键词和描述来判断网页信息。不会影响搜索引擎排名-->
<meta name="description" content="发布h5，java等相关信息">
<!--可以进行请求重定向-->
<meta http-equiv="refresh" content="5（秒数）;url（路径）=https://winmoes.com/">
HTML语法规范
1.HTML中不区分大小写，尽量是用小写
2.HTML中注释不能嵌套
3.HTML标签结构必须完整
4.HTML标签可以嵌套，但不能交叉嵌套
内联框架（不推荐）
内联框架可以引入一个外部页面
使用iframe来创建内联框架
属性：src：指向一个外部页面的路径，可以是相对路径
CSS简介
CSS
层叠样式表
CSS可以用来为网页创建样式表，通过样式表对网页进行装饰
层次高的会覆盖层次低的
CSS为网页各个层次设计样式
CSS编写位置
可以将CSS样式编写到style属性当中
将样式直接编写到style属性当中被称作内联样式
内联样式只对当前元素中的养殖起作用（内联样式不方便复用）
可以编写到中的
外部样式选择器
将样式编写到外部CSS文件中，然后通过link标签将CSS文件引入到页面当中（最推荐使用）
CSS语法
选择器
通过选择器选择页面指定元素，并且将声明块中样式应用到选择器对应元素上
属性选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/*
为所有title改颜色
使用属性选择器
*/
p[title=外星人]{background-color: aqua;}
p[title^="ab"]{
font-size: 50px;
}
</style>
</head>
<body>
<p title="又称长门有C">长门有希</p>
<p >长门有希</p>
<p title="外星人">长门有希</p>
<p title="abc">京阿尼 </p>
<p title="abcd">芳文社 </p>
</body>
</html>
id选择器
通过元素属性选择出唯一元素
语法：#id属性值{}
class选择器
class属性与id相比可以重复
拥有相同class属性的被称为一组
语法：.class属性值{}
选择器分组
选择器1，选择器2，选择器n{}
通配选择器
选中所有的元素
语法：*{}
复合选择器
作用：可以选中满足多个选择器的元素
语法 选择器1选择器2选择器n{}
后代元素选择器
作用：
选择指定元素的后代元素
祖先元素 后代元素{}
子元素选择器
作用：选中指定父元素的指定元素
语法：父元素>子元素
伪类选择器
伪类专门用来表示元素的一种特殊状态
比如：访问过的超链接，普通的超链接，获取焦点的文本
属性选择器
作用 可以根据元素中的属性与属性值来选取指定元素
语法
[属性名]选取含有指定属性的 元素
[属性名^=属性值]选取含有属性值开头的元素
[属性名$=属性值]选取含有属性值结尾的元素
[属性名*=属性值]选取含有属性值的元素
给链接定义样式
：link（正常的链接）
：visited（访问过的链接）
：hover（鼠标滑过的链接）
：active（正在点击的链接）
：focus（获取焦点）
：before（指定元素前）
：after（指定元素后）
：：selection（选中的元素）
声明块
声明块紧跟选择器后面，使用{}括起来
声明块中实际上就是一组一组的名值对结构
一个声明块看一些多个声明，多个声明之前用";"隔开
声明的样式名和样式值用":"隔开
原则器优先级
使用不同选择器选中同一个元素时，并且设置相同样式时冲突，选择器权重越高者具有优先级。
优先级规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承无优先级
(当选择器中包含多个选择器时，选择器优先级要先相加，后比较。选择器优先级计算不会超过它的数量级，如果选择器优先级一样，则使用靠后的样式)
并集选择器分开计算
可以在样式最后添加！important (最高级)
超链接
使用超链接可以从一个页面跳转到另一个页面
语法：
属性：
href：
指向链接跳转的目标地址
target：
指定打开链接位置
_self表示在当前窗口中打开<默认值>
_blank在新的窗口中打开
a的伪类及代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
a的伪类共四个，优先级相同
写的顺序如下
*/
a:link{
color: yellow;
}
a:visited{
color: red;
}
a:active{color: blue;}
a:hover{
color: aqua;
}
</style>
</head>
<body>
<a href="https://mzh.moegirl.org.cn/%3F%3F%3F%3F%3F%3F">访问过</a>
<a href="www.baidu123456.com">未访问过</a>
</body>
</html>
a的伪类优先级
a的伪类共四个，优先级相同
写的顺序如下
a:link{
color: yellow;
}
a:visited{
color: red;
}
a:active{color: blue;}
a:hover{
color: aqua;
}
块和内联
div
div为块元素（块元素可以独占一行）
span
内联元素（行内元素）
行内元素指的是只占自身大小的元素，不会占一整行
常见的内联元素
a img iframe span
注意
块元素常用来做页面中的布局，内联元素主要用来选中文本设置样式，一般情况下只用块元素去包含内联元素
a元素可以包含任意元素，除了他本身
列表
1.无序列表
用ul创建
li添加
ul、li都是块元素
2.有序列表
用ol创建
3.定义列表
用dl创建
dl中两个子标签
dt：被定义内容
dd：对定义内容描述
总体示范
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*去掉项目符号*/
ul{
list-style: none;
}
</style>
</head>
<body>
<!-- 用ul创建无序列表
使用li在无序列表中创建列表项
通过type可以修改无序列表的项目符号
ul，li都是块元素
-->
<ul>
<li>刘德华</li>
<li>郭富城</li>
<li>黎明</li>
<li>张学友</li>
</ul>
<ol>
<li>凉宫春日</li>
<li>长门有希</li>
<li>古泉一树</li>
<li>实玖琉</li>
<li>阿虚</li>
</ol>
<!--列表之间可以互相嵌套-->
<p>碧蓝航线</p>
<ul>
<li>皇家
<ol><li>伊丽莎白</li>
<li>半人马</li>
<li>声望</li></ol></li>
<li>白鹰
<ol><li>企业</li>
<li>约克城</li>
<li>大黄蜂</li></ol></li>
<li>北联</li>
<!--对列表进行定义-->
</ul>
<dl>
<dt>鸢一折纸</dt>
<dd>三无</dd>
<dd>学霸</dd>
</dl>
</body>
</html>
总结
在军训结束后，学习与生活又到了原有的节奏，而除了小组学习，我常被另外的事情缠身，我认为我可以兼顾小组学习与公事处理，至少对此抱有信心。
下周规划：完成前端页面制作的学习，制作一个合格的页面。
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
