为了速成，为了比赛，为了自己
学习来源：B站up主 罗大富Bigrich
相关视频：【3小时前端入门教程（HTML+CSS+JS）】
网址 ： https://www.bilibili.com/video/BV1BT4y1W7Aw/?share_source=copy_web&vd_source=9efdad29078e1a84ebec03582c7d2b9f
学习成果：
HTML学习总结：
1.前端与网页的关系
前端是构建网页的一部分，负责用户看到与之交互的内容。
网页是在浏览器中呈现内容的文档或页面。
网页使用HTML,CSS,JavaScript组成。
- HTML定义页面结构和内容，包括文本，图像，链接等等；
- CSS负责控制页面的外观和样式；
- JS用于添加交互性和动态功能作用。
DOCTYPE 告诉浏览器，我们要使用什么规范
meta 描述性标签，用于描述网站的一些信息
---------------------------------------------------------------
<head>
<meta charset="UTF-8">
<meta name="keywords" content="描述网站的关键字">
<meta name="description" content="描述网站的作用：如来这里可以学习java等">
</head>
---------------------------------------------------------------
HTML注释 <!-- -->
2.HTML标签
2.1 HTML 超文本标记语言
- HTML通过一系列的标签来定义文本，图像，链接等。HTML标签是由尖括号< > 包围的关键字。
- 双标签：标签通常成对出现，包括开始标签和结束标签，内容位于两个标签之间。
- 单标签：用于没有内容的元素。没有结束标签。
----------------HTML文档结构------------------
<!DOCTYPE html>
<html>最外部的标签，包含整个文档结构</html>
<head>头部，包含文档的标题，外部样式等</head>
<body>包含实际显示在浏览器页面的内容</body>
--------------------双标签--------------------
<p>段落标签，段间距与换行的行间距是不一样的</p>
<h1>标题标签</h1>
<a href="#">超链接标签</a>
<table>表格</table>
<div>无实意，用于网页布局</div>
<form>表单，用于前端获取用户输入的信息，并提交结果</form>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<span>对某一部分进行样式化，或者JS操作</span>
<strong>加粗</strong>
<em>斜体</em>
--------------------单标签--------------------
<br> 换行标签
<hr> 分割线标签
<img> 网页加载图片
<input> 输入
-------------------------------------------------
空一格
特殊符号&开头
2.2 常用文本标签
1.标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>2.段落标签
<p>段落标签</p>
<p>
更改文本样式：<strong>字体加粗</strong> ,<i>斜体</i>，<u>下划线</u>, <s>删除线</s>
</p>3.有序列表标签
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>4.无序列表标签
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>5.表格标签
tr table row 行
td table data 表格数据，元素
th table header 列标题
border属性 改变该属性的值可以改变表格边框的宽度
colspan属性 可以跨列
rowspan属性 可以跨行
---------------------------------------------------
<table border="1">
<tr>
<th colspan='3'>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>表格数据1</td>
<td>表格数据2</td>
<td>表格数据3</td>
</tr>
</table>6.超链接标签
href属性 链接路径url,电子邮箱地址，手机号等等
target属性 链接在哪个窗口打开
属性值：
"_self" 默认值，在当前窗口或标签页打开
"_blank" 在新的窗口或新的标签页打开
"_parent" 在父窗口或父标签页打开
"_top" 在顶层窗口或顶层链接打开
a标签不独占一行，属于行内标签
a标签套用图片标签，点击图片可以跳转到对应的页面
-----------------------------------------------------------
1.
<a href="https://www.baidu.com"> <img src='' alt=''> </a>
<a href="https://www.baidu.com" target="_blank">超链接</a>
------------------------------------------------------------
2. 锚链接：
需要一个标记，然后跳转到标记
<a id='top'>顶部</a>
<a href='#top'>在网页底部，回到顶部</a>
---------------------------------------------------------------
3.功能性链接
3.1 邮件链接
<a href='mailto:xxxxxxx@qq.com'>点击联系我</a>
3.2 qq链接
QQ推广链接
<a href='#top'>在网页底部，回到顶部</a>
7.图片标签
src属性 图片地址，可以是绝对路径或相对路径，url
alt属性 图像的替代文字，当图片无法加载时显示描述该图片的内容
title属性 鼠标悬停提示文字
width和height属性 改变图片的宽高
------------------------------
<img src="example.jpg" alt="" width="200" height="100">
<img SRC="example.jpg" alt="" title="title">
<img src="EXAMPLE.JPG" alt="">
-------------------------------
属性名不区分大小写，前两行实现效果相同；
属性值大小写敏感，与前两行实现效果不同
8.音频和视频标签
controls 控制条，控制开始，进度
autoplay 自动播放
----------------------------------------------------
<video src='' controls autoplay></video>
<audio src='' controls autoplay></audio>9. 下拉框
<select name='列表名称'>
<option value='选项的值'>中国</option>
<option value='选项的值'>美国</option>
<option value='选项的值' selected>瑞士</option>
<option value='选项的值'>印度</option>
</select>
------------------------------------------------------
selected 默认选择
下拉框进行选择10. 文件域
<input type='file' name='file'>
<input type='button' value='上传按钮' name='up'>11. iframe
src 引用页面的地址
name 框架标识名
<iframe src='path' name='mainFrame'></iframe>12. input
disabled 禁用
hidden 隐藏
readonly 只读
required 非空判断
parrten 正则表达式
3.HTML标签属性
属性在HTML中起到非常重要的作用，用于定义元素的行为和外观，以及与其他元素的关系。
3.1 基本语法
<开始标签 属性名="属性值">3.2 每个HTML元素可以具有不同的属性
<p id="describe" class="section">段落标签</p>
<a href="https://www.baidu.com">超链接</a>3.3 属性名称不区分大小写，属性值对大小写敏感
适用于大多数HTML元素的属性：
- class: 为HTML定义一个或多个类名
- id:定义元素唯一的id
- style:规定元素的行内样式
4.HTML区块---块元素与行内元素
4.1 块元素（block）
块元素通常用于组织和布局页面的主要结构和内容，例如段落，标题，列表，表格等，它们用于创建页面的主要部分，将内容分割成逻辑块。
- 块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块；
- 可以包含其他块级元素和行内元素。
- 常见块级元素<div> <p> <h1> <h6> <ul> <ol> <li> <table> <form>等
4.2 行内元素
4.3 最常用标签div和span
<div>
<div class="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
</div>
<div class="content">
<h1>文章标题</h1>
<p>文章段落</p>
</div>
</div>
-----------------------------------------------
div标签没有任何语义，经常用于创建页面的布局结构<span>应用于内联样式化文本</span>
--------------------------------------
span把一小部分文本包装起来，以便于对该文本做样式，JS行为
span是行内元素，只占据它所需的宽度，不独占一行
5.HTML表单
input的属性
type属性 属性值有很多，不同的属性值对应不同的获取信息方式
placeholder属性 在输入框中显示提示文字，当用户输入时会自动消失
value属性 规定一个原始值，默认值
name属性 对input命名，分组别，所有input都加上name属性命名区分
-----------------------------------------------------------------
lable的属性
for属性 增强鼠标可用性，点击前面的文字可让文本框被选中，与input的id相对应
-----------------------------------------------------------------
type属性的属性值
text 以文本的形式接受用户的信息
redio 单选框，后都加上name="gender"放在同一个组里面才可单选
checkbox 多选框
submit 提交表单到某个地方
reset 重置
-----------------------------------------------------------------
form的属性
action属性 表单提交的位置，可以是网站，也可以是一个请求处理地址（由后端提供路径URL）
method属性 post,get提交方式
-----------------------------------------------------------------
<form action="">
<p>
<lable for="username">用户名：</lable>
<input id="username" type="text" placeholder="请输入用户名"> <br> <br>
<lable for="pwd">密码：</lable>
<input for="pwd" type="password" placeholder="请输入密码">
</p>
<p> 单选框
<lable >性别：</lable>
<input type="redio" value='boy' name="gender"> 男
<input type="redio" value='girl' name="gender"> 女
<input type="redio" value='emem' name="gender"> 沃尔玛购物袋
</p>
<p> 多选框
<lable >爱好：</lable>
<input type="checkbox" value='sing' name="hobby"> 唱歌
<input type="checkbox" value='dance' name="hobby"> 跳舞
<input type="checkbox" value='sport' name="hobby"> 运动
</p>
<p> 按钮 ：普通按钮和图像按钮
<input type='button' name='btn1' value='点击'>
<input type='image' src='../image.jpg'>
</p>
<input type="submit">
<input type='reset'>
</form>
按钮点击图片可以提交method属性 post,get提交方式
get 提交不安全。可以在网址中被看见，但是高效
post 提交安全，可以传输大的文件
CSS学习总结：
1. CSS 层叠样式表
用于定义网页样式和布局的样式表语言。通过CSS，可以指定压面中各个元素的颜色，字体，大小，间距，边框，背景等样式，从而实现更精确的页面设计。
2. CSS的语法
CSS通常由选择器，属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式。
1. 选择器的语法
选择器{
属性1:属性值1;
属性2:属性值2;
}
选择器的声明中可以写无数条属性；
声明的每一行属性，都需要以英文分号结尾；
声明中的所有属性和值都是以键值对这种形式出现的；
-----------------------------------------------------------
2.书写css代码的要求
展开书写，由专门的工具;
代码都用小写字母，（大写也允许，麻烦）;
空格规范: 在声明属性冒号后面加一个空格，然后在写值；在选择器名称与大括号之间加一个空格;
------------------------------------------------------------
3. 多类名
class = '类名1 类名2 类名3'
标签中的class选择器的类名可以多个写在一起，中间空格隔开
------------------------------------------------------------
4. 3. CSS三种导入方式
3.1 内联样式 ： 直接放在HTML的标签中，style属性,方便简洁
<body>
<h1 style="color=red;">内联样式</h1>
</body>
-----------------------------------------
style后的值加上双引号
内部是键值对，且末尾分号;结尾3.2 内部样式表 ：在<head></head>中定义
<head>
<style>
p{
color:red;
font-size:26px;
}
h1{
color:blue;
}
</style>
</head>
<body>
<p>段落</p>
<h1>内部样式表</h1>
</body>
3.3 外部样表 ：在css文件中
创建一个css文件夹，文件夹下创建style.css文件
---------------------------------------
h1{
color:red;
}
-----------------------------------------
在html文件中引用
<link rel='stylesheet' type='text/css' href='css/style.css'/>
优先级：内联样式>内部样式表>外部样式表
4.选择器
选择器允许你针对特定元素或一组元素定义样式
4.1 元素选择器(标签选择器)
<head>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>选择器 用标签的名字来命名</h1>
</body>4.2 类选择器：.class{} 元素名可以随便起 .is{} .idiv
<head>
<style>
h2{
color:red;
}
.highlight{
background:yellow;
}
</style>
</head>
<body>
<h2 class="highlight">类选择器 class . 背景yellow</h2>
<h2>不让这个标签内容背景有颜色 </h2>
</body>4.3 ID选择器 #
<head>
<style>
h2{
color:red;
}
#header{
background:yellow;
}
</style>
</head>
<body>
<h2 id="header">ID选择器 id # 背景yellow</h2>
<h2>不让这个标签内容背景有颜色 </h2>
</body>4.4 通用选择器 *
<head>
<style>
*{
font-family:'KaiTi';
}
</style>
</head>
<body>
<h2 class="highlight">类选择器 class . 背景yellow</h2>
<h2>不让这个标签内容背景有颜色 </h2>
<p>通用选择器 * 所有标签下的字体都是楷体</p>
</body>4.5 子元素选择器
1.父子元素之间用>相隔
2.选择的子元素必须为父元素的直系子元素
-------------------------------------------
子元素选择器语法
元素名>元素名{
样式声明;
}
-------------------------------------------
<head>
<style>
.father>#son{
color:red;
}
</style>
</head>
<body>
<div class="father">
<h2 class="son">111被选中红色</h2>
<h1 class="nav">222未被选中</h1>
<h3 class="son">333被选中红色</h3>
</div>
</body>4.6 后代选择器（包含选择器）
子代不包含后代,后代包含子代
1.后代选择器元素名和元素名之间用空格分割
2.元素之间必须为父子关系，或者爷孙关系，必须为前一个元素的后代元素
3.后代选择器只改变后代元素的样式
4.后代选择器的元素可以是任何一个基础选择器
-----------------------------------------------
后代选择器语法
元素名 元素名{
样式声明;
}
-----------------------------------------------
<head>
<style>
.father p{
color:red;
}
</style>
</head>
<body>
<div class="father">
<h2 class="son">111被选中红色</h2>
<div>
<p class="grandson"> 孙子辈的关系</p>
</div>
</div>
</body>
4.7 并集选择器（兄弟选择器）
1.选择器与选择器之间用逗号隔开
2.选择器可以使用任意一种选择器
并集选择器一次更改多个种类元素的选择器
-----------------------------------------
选择器1,
选择器2,
选择器3{
样式声明;
}
------------------------------------
.nav,
.p1,
span a{
color:red;
}4.8 伪类选择器
动态伪类选择器 4种
:link 可以改变未访问过的链接样式
:visited 可以改变已近访问过的链接样式
:hover 可以改变鼠标经过链接时的样式
:active 可以改变在鼠标点击（为松开左键）链接时的样式
要改变的选择器:link{
样式声明;
}
-----------------------------------------------------------------
<head>
<style>
#element:hover{
background:red;
}
</style>
</head>
<body>
<h2 id="element">当鼠标在这段文字上方时显示背景颜色为红色</h2>
</body>5.CSS常用属性
HTML官网找属性
5.1 font-size
字体大小，后面的数据必须带有单位
5.2 font-family
字体样式，字体名称最好用英文，兼容性好一些
字体是多个单词组成的，用引号引起来
5.3 font-style
文字样式, normal正常，italic斜体
5.4 font-weight
字体加粗样式，normal默认值400，bold粗体700，bolder更粗，lighter更细
5.5 font 复合样式
都能改变，但是有填写顺序，
font-style font-weight font-size font-family
5.6 text-align 文本对齐
块元素和行内块元素都可以设置长宽，但是行内元素不能设定
5.7 css单位
5.8 line-height 行高
5.9 其他csss属性
1. border-redius
对盒子模型的边框部分，以8px为半径画一个圆，使得边框四个角顺滑弯曲
border-redius：8px;
2. box-sizing:border-box;
盒子模型 width:100%时，加上padding的宽度，势必会超出已有的屏幕，加上这个属性可以规范它
总宽度=width+padding的宽度
eg:
padding:15px,20px;
width:100%;
box-sizing:border-box;
3. margin:0 auto;
让盒子模型居中显示
----------------------------------------以上是与尺寸有关的样式
4. background-color 盒子背景颜色
5. background-image 盒子背景图
eg:
background-image:url(./bg.jpg);
背景图和背景颜色不能同时使用
6. box-shadow 盒子阴影
box-shadow的阴影水平方向的偏移量，阴影向下的偏移量，阴影晕染的宽度 阴影颜色
eg:
box-shadow:5px 5px 5px grey;
---------------------------------------以上是与背景处理有关的样式
7. text-indent 首行缩进
单位使用em,即两个字符的单位
eg:
text-indent:2em;
8. text-align:center 水平居中
9. text-shadow 文字阴影
eg:
text-shadow:2px,2px,2px,black;
10. text-decoration 文本装饰
eg:
text-decoration:dashed underline black;
11.
writing-mode:vertical-lr;
text-orientation:upright;
使得文字竖放，且英文字母也是竖着看
---------------------------------------文本处理
12. 浮动问题多，不怎么用，常用定位
6. 元素的显示模式
： 块元素，行内元素（span），行内块元素(input ,img)
7. display元素显示模式转换
语法：
display:block; 转为块级元素
display:inline; 转为行内元素
display:inline-block; 转为行内块元素
none 不显示
--------------------------------------------------
<head>
<style>
.div-inline{
display:inline;
background-color:red;
}
.span-inline-block{
display:inline-block;
background-color:yellow;
width:200px;
}
.span-block{
display:block;
width:200px;
}
</style>
</head>
<body>
<div class="div-inline">块级元素转为行内元素</div>
<span class="span-inline-block">行内元素转为行内块元素 </span>
<span class="span-block">行内元素转为块级元素 </span>
</body>
扫一扫
2601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
