目录
1.HTML总结
HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。HTML 运行在浏览器上，由浏览器来解析。
- <!DOCTYPE html>: 声明文档类型。
- <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
- <head></head>: <head>元素。 这个元素是一个容器，包含了所有包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
- <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上能识别所有文本内容。
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
- <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
- <body></body>: <body>元素。 包含能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。
例：
<p>元素内容</p>- 开始标签（Opening tag）：包含元素的名称（本例为p），被左、右角括号所包围。表示元素从这里开始或者开始起作用；
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠；
- 内容（Content）：元素的内容；
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
输入Ctrl+/即可进行注释，注释内容在浏览器中对用户不可见
<!-- 文本注释 -->一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>等等，称其为空元素。
<p>换行<br>标签</p>
<!-- 水平线标签 -->
<hr>
<!-- 输入框 -->
<input>元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
元素属性包含内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个 = 号。
- 一个属性值，由一对引号 "" 引起来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移至此</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6> <strong>加粗</strong>
<b>加粗</b>
<ins>下划线</ins>
<u>下划线</u>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>注：不建议用HTML来进行格式的设置
在HTML中常把文本、图片等加上超链接
<a href="https://www.baidu.com/" target="_self">跳转到百度</a>说明：
- href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)
- 属性名：target，属性值：目标网页的打开形式，_self：默认值，在当前窗口中跳转（覆盖原网页），_balnk：在新窗口中跳转（保留原网页）
- 开发网站初期不知道跳转地址时，href的值书写#（空链接）
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...注：
- 元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
- 超链接中的地址需要有#符号
<img src="./IMG_6432.GIF" alt="小新" title="这是title文字，鼠标悬停的时候显示" width="200" height="300">说明：
- Src：要显示图片文件的位置 URL，即图片文件的路径；
- alt：替换文本，当图片不显示的时候显示的文字；
- width和height属性只需要给出一个值，另一个等比例缩放，图片不会变形。
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径分为相对路径和绝对路径两种。
绝对路径：
<img src="C:\Users\DUAInn\Desktop\qdcode\day01\IMG_6347.GIF" alt="">相对路径：
| 例子 | 解释 |
| <img src="picture.jpg"> | 该图片文件与当前文档在同一目录中 |
| <img src="./images/picture.jpg"> | 该图片文件在当前目录下的images目录中 |
| <img src="../picture.jpg"> | 该图片文件在上一级目录中 |
| <img src="/picture.jpg"> | 该图片文件在网站根目录 中 |
有时，页面的内容需要用表格来进行呈现，使用<table>等标签即可。
<table border="1" width="500" height="300">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>甲</td>
<td>100分</td>
<td>优秀</td>
</tr>
<tr>
<td>乙</td>
<td>100分</td>
<td>优秀</td>
</tr>
</table>说明：
- able：表格整体，可包裹多个tr；
- tr：表格每行，可包裹td；
- td：表格单元格，可包裹内容；
- 相关数字属性：border—边框宽度 width—表格宽度 height—表格高度
<h2>水果列表</h2>
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
</ul><ul>表示无序列表的整体，用于包裹<li>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
<li>表示无序列表的每一项，用于包含每一行的内容
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> <h2>成绩排名</h2>
<ol>
<li>张三：100</li>
<li>李四：99</li>
</ol>有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名" required><br>属性值：text
placeholder提示符可显示提示信息“请输入用户名：”
密码：<br>
<input type="password" name="ps" placeholder="请输入密码" required><br>属性值：password
用户输入密码时显示圆点
<input type="number" name="age" min="18" value="18"><br>属性值：number
min代表该输入框最小能输入的数字
value为默认显示数字
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>属性值：radio
checked表示默认选中
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>selected为下拉列表默认选中值
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br> 您的工作日期：<br>
<input type="date"><br> <!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br>rows和cols属性可设置文本框大小
<input type="submit" value="提 交">
<input type="reset" value="重 置">HTML 的元素可以通过称为区块 Division 或 内联 Inline 的方式进行显示。
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
<div>Hello</div>
<div>World</div>
<p>单独一行</p>内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
<span>姓名：</span>
<input name="username">
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">pre标签可以使得标签内容格式不变
<pre>
我如果爱你——
绝不象攀援的凌霄花，
借你的高枝炫耀自己；
</pre>在HTML中，某些字符是预留的。如：不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
小于号：<
大于号：>
空格在网页中只能显示一个，如果想显示多个，需要使用字符实体。
空格： 
2.CSS总结
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
一条CSS样式规则由两个主要的部分构成：选择器{CSS属性}
p {
/* 文字颜色变红色 */
color: red;
/* 字变大 px：像素*/
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* width height */
width: 400px;
height: 400px;
}结构：#id属性名{css属性名:属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
#blue{
color:skyblue;
}
<div id="blue">这个div文字是蓝色的</div>注：
1.所有标签上都有id属性；
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复；
3.一个标签上只能有一个id属性值；
4.一个id选择器只能选中一个标签。
2.2.2 class选择器
结构：.类名{css属性名:属性值;}
.red{
color:red;
}
.size{
font-size: 66px;
}
<p class="red size">2222</p>
<div class="red">这个标签文字也要变红</div>注：
1.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；
2.一个标签可以同时有多个类名。类名之间以空格隔开；
3.类名可以重复，一个类选择器可以同时选中多个标签。
CSS一般有三种生效方法：外部样式表，内部样式表，内联样式
2.3.1 外部样式表
方法：在HTML文件同一目录中新建CSS文件
导入外部样式文件语法：
<link rel="stylesheet" type="text/css" href="mycss.css">引入外部样式表是使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
方法：直接将样式放在HTML文件中
在<head>元素中引入<style>标签以放入样式
方法：直接把样式规则直接写到要应用的元素中
<h3 style="color:green;">I am a heading</h3>从高到低分别为：
- 内联样式
- 内部样式表或外部样式表
- 浏览器缺省样式
可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等
例如，HTML文件内容如下：
<div class="example-1">这个元素高 200 pixels，占据全部宽度</div>
<div class="example-2"> 这个元素宽200像素,高300像素</div>相应CSS文件：
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 300px;
width: 200px;
background-color: rgb(73, 138, 60);
text-align: right;
}对于元素中的文本，可以简单的设置text-align属性为left, center, right即可（缺省的是左对齐），上例中已有相关的应用。
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
<style>
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
</style>
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div><style>
.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
</style>
<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p> padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */position属性用于对元素进行定位，是使用top, bottom, left, right属性的基础，属性值有static、relative、fixed、absolute四种
静态定位是元素的默认定位方式，元素按照从上到下从左到右的顺序排列。
将元素相对静态位置进行偏移
<div class="example-relative">相对定位</div>
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}即使拖动浏览器情况下，元素固定不动。
<div class="broad">占位区域</div>
<div class="example-fixed">这个按钮是固定的</div>
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: darkkhaki;
}此例中按钮将保持不动
使元素相对于其最近设置了定位属性（非static）的父元素进行偏移，如果该元素的所有父元素都没有设置，那么就相对于<body>这个父元素。
<div class="example-relative">这是父元素，有 relative 定位属性
<div class="example-absolute">
这是子元素，有 absolute 定位属性
</div>
</div>
.example-relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
position: absolute;
top: 80px;
right: 5px;
width: 200px;
height: 100px;
border: 3px solid rgb(218, 73, 16);
}当元素内容超过其指定的区域时，可以通过溢出overflow属性来处理这些溢出的部分。
visible：默认值，溢出部分不被裁剪，在区域外面显示
hidden：裁剪溢出部分且不可见
scroll：裁剪溢出部分，但提供上下和左右滚动条供显示
auto：裁剪溢出部分，视情况提供滚动条
在一个区域或容器内，可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam modi nam vero!</p>
.example-float-right {
float: right;
}可以用opacity对任何元素（不过常用于图片）设置不透明度，值在[0.0～1.0]之间，值越低，透明度越高。
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
语法：选择器后使用：号，再跟上某个伪类/伪元素
常见用法：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
p:hover {background-color: rgb(226, 43, 144);}/* 鼠标移到段落则改变背景颜色 */
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
