基于狂神说Java的HTML+CSS+JavaScript课堂笔记
目录
概述：
- HTML 负责内容和结构。
- CSS 负责样式和美化。
- JavaScript 负责行为和交互。
HTML：负责内容和结构。
标签：
1. 文档结构标签
<html>: 定义整个 HTML 文档。<head>: 包含文档的元数据（如标题、字符集、样式等）。<title>: 定义网页的标题，显示在浏览器标签上。<body>: 包含网页的可见内容。
2. 文本标签
<h1>至<h6>: 标题标签，<h1>为最高级标题，<h6>为最低级标题。<p>: 段落标签，用于定义文本段落。//paragraph<br>: 换行标签。//break<hr>: 水平线标签，用于分隔内容。//horizon<strong>: 加粗文本，通常表示重要性。<em>: 斜体文本，通常表示强调。//emphasis
3. 链接和图像
<a>: 超链接标签，用于创建链接。<img>: 图像标签，用于插入图片。
4. 列表标签
<ul>: 无序列表。<ol>: 有序列表。<li>: 列表项，用于无序和有序列表。
5. 表格标签
<table>: 表格标签。<tr>: 表格行。<th>: 表头单元格。<td>: 表格数据单元格。<caption>: 表格标题。
6. 表单标签
<form>: 表单标签，用于收集用户输入。<input>: 输入字段，类型可通过type属性定义（如text：文本框,password：密码,checkbox：多选,radio：单选,submit：确认。等）。<textarea>: 多行文本输入框。<button>: 按钮标签。<select>: 下拉列表。<option>: 下拉列表中的选项。
7. 其他常用标签
<div>: 块级容器，用于分组内容。<span>: 行内容器，用于分组内容。<header>: 定义文档的头部。<footer>: 定义文档的底部。<article>: 定义独立的内容区域。<section>: 定义文档中的节。<nav>: 定义导航链接。<aside>: 定义与主内容相关的侧边内容。
8. 嵌入内容标签
<iframe>: 用于在网页中嵌入另一个网页。<audio>: 用于嵌入音频文件。<video>: 用于嵌入视频文件。
CSS：负责样式和美化：
1. 三种使用方式：
- 外部样表式：使用<link rel="stylesheet" type="text/css" href="styles.css">，href是css文件的路径
- 内部样表示：直接在css的style标签里面编写css代码，然后放入html文件中
- 行内样式：直接在html标签里面使用，<p style="color: red;">这是一个红色的段落。</p>
2. 标签选择器：
-
基本选择器：
- 元素选择器：使用html标签名选中特定的标签进行操作
p { color: blue; } - 类选择器：选择具有特定类的元素，使用
.符号。.example { font-size: 20px; } - id选择器：选择具有特定 ID 的元素，使用
#符号。#header { background-color: gray; } - 通用选择器：选择所有元素，使用
*符号。* { margin: 0; padding: 0; }
-
组合选择器：
-
后代选择器：选择某个元素内的所有后代元素
div p { color: red; } -
子选择器：选择直接子元素。
ul > li { list-style-type: none; } -
相邻兄弟选择器：选择紧接在另一个元素后面的元素
h1 + p { margin-top: 0; } -
通用兄弟选择器：选择在某个元素之后的所有兄弟元素。
h1 ~ p { color: green; }
-
伪类选择器：
伪类选择器用于选择元素的特定状态。
-
:hover：当鼠标悬停在元素上时。a:hover { color: red; } -
:first-child：选择父元素的第一个子元素。p:first-child { font-weight: bold; } -
:last-child：选择父元素的最后一个子元素。p:last-child { font-style: italic; }
选择器的优先级：
1、基础选择器：通配符<标签<类<id<行内<!important(提权选择器)
2、复合选择器：按照（行内，id，类，标签）选择器的个数记录一个序列，从左到右，个数更高的选择器的优先级越高，!important权重最高，继承权重最低
CSS样式：
字体样式属性：
font-size
单位：em、px、
font-family
font-weight
单位：normal：标准、bold：粗体、bolder：更粗、lighter：更细、1~900：定义由细到粗的字体
font-style
font：综合设置字体样式
文本外观属性：
color
line-height：行距
text-align：水平对齐方式（只用于块级元素）
text-indent：缩进（只用于块级元素，常用单位：2em）
盒子模型：
每个元素都都能被看作一个方形的盒子，其中：
padding：内边距（元素内容和border之间的间距，特别的：给元素添加背景颜色或者背景图片时，作用对象时元素的padding）
border：边框
margin：外边距（盒子和盒子之间的间距）
使用复合属性定义边距时，遵循顺时针（上、右、下、左）采用值复制的规则，
一个值：适用于四条边
二个值：值一用于上下边，值二用于左右边
三个值：上、左右、下
元素类型：
1、块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
块元素在页面以区域块的形式出现，特点是每个块元素通常都会独自占据一行或者多行，可以对其设置宽度，高度，对齐等属性。
2、行内元素：<strong>、<b>、<em>、<span>等
行内元素也叫内联元素或者内嵌元素，特点是不会独占一行，也不会强迫其他的标签在新的一行显示。
3、行内块元素：
可以使用display属性将行内或块元素转换为行内块元素，语法：div{display: inline-block}
颜色透明度：
1、使用rgba可以实现颜色透明
p{color: rgba(0,0,0,0.5)
意为将p标签设置为黑色且透明度为0.5
2、使用opacity，可以作用于所有元素
p{opacity: 0.5}
意为将p标签的透明度设置为0.5
锚点链接：
通过创建锚点，用户可以直接跳转到指定位置
使用a标签，链接为id名，之后在点击标签时，就会跳转到指定的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#one">一</a>
<a href="#two">二</a>
<a href="#three">三</a>
<ul>
<li>
<p id="one">
在很久很久以前，有一个国王。他把他的国家治理的非常好，国家不大，但百姓们丰衣足食，安居乐业，十分幸福。王有三位美丽可爱的小公主，
三位小公主们从生下来就具有一种神奇的魔力，当她们哭泣的时候，落下的眼泪会化作一颗颗晶莹剔透的钻石，
价值连城。有一天，国王发觉自己年事已高，自己的国家还没有人可以托付，公主们也没人照顾。
于是昭告天下：“众所周知，我有三位的公主，她们每个人都拥有举世无双的美貌，而且她们的眼泪可以化作昂贵的钻石，一个月后，
我将为她们召集所有的优秀的男人，让她们挑选自己心仪的丈夫————被选中的人将有机会继承我的国家和财富！”
</p>
</li>
<li>
<p id="two">
一个月后，国王的城堡里挤满了来自世界各地的王子，骑士和富豪之子。一个个都是英俊潇洒，器宇不凡。他们自信满满的围在王宫里，
等待着公主们的到来。正午的时候，国王带着他的三位公主们来到宫殿。为了表示对远道而来的客人的欢迎，大公主在现场为众人唱了一首歌，
嗓音清澈，犹如天籁；
</p>
</li>
<li>
<p id="three">
二公主在现场为众人跳了一支舞，步伐轻盈，身段美妙。而最年幼的小公主，对着众人浅浅的一笑，就躲在国王的身后再也不肯出来。
国王尴尬的解释道，请大家不要介意，小公主自从生下来后就没有说过话，而且很怕生人。为了博取公主们的亲睐，
大家纷纷展示了自己的长处，有的当场写诗作画送给大公主，有的为二公主表演剑法和马术，有的拿出世间少有的奇珍异宝献给小公主。
大公主和二公主都很开心，也渐渐有了自己的决定，只有小公主静静的依然躲在国王的身后。大公主最后选择了一个王子，
那个英俊的王子对她许诺说，会为她征服全世界，在每座城堡上刻下她的名字；二公主最后选择了富豪之子，那个聪明的男孩对她保证说，
他会赚很多钱，为她建立一座世界上最华丽的宫殿，里面摆满美丽的奇珍异宝；小公主平静的看着那些人，摇了摇头。正在国王准备宣布结果时，
从人群中走出一个年轻的牧羊人，他径直走到小公主跟前，在她耳边说了一句话。小公主忽然笑的很灿烂，她毫不犹豫的挽住了牧羊人的手。
就这样，三个公主都有了自己的伴侣。五年过去了,大公主的丈夫用眼泪变成的钻石招兵买马，四处征战，百战百胜，
每一座被他征服的城堡上，真的全都刻上了大公主的名字。大公主的名字，变得家喻户晓。她觉得自己很幸福。二公主的丈夫用眼泪变成的钻石作为成本，
</p>
</li>
</ul>
</body>
</html>浮动：
浮动是指设置了浮动属性的标签会脱离标准文档流的控制，移动到其父标签中指定位置的过程
| 属性值 | 描述 |
| left | 标签向左浮动 |
| right | 标签向右浮动 |
| none | 标签不浮动（默认） |
清除浮动：
由于浮动标签不再占用原文档流的位置，所以它会对页面中其他标签的排版产生影响。要避免浮动对段落文本的影响，可以使用清除浮动的操作。
1、使用空标签清除浮动
在浮动标签之后添加空标签，并对该标签使用“clear: both"
缺点：添加了没有意义的标签，不推荐使用
2、使用overfloat属性清除浮动
对受到浮动影响的标签中添加属性"overfloat: hidden"
推荐使用
3、使用after伪对象清除浮动
较为复杂、适用于IE8以上的浏览器，不推荐使用
扫一扫
5356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
