一.HTML

一.引入

HTML是超文本标记语言，是一种标记语言而非编程语言。

对于一个新建的HTML文件，其内容一般如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

其中，<head>内容为用户不可见内容，被称为网页的头部，<title>标签则为网页的标题。<body>则为网页的可见内容部分

HTML是由标签组合而成的，标签分为单标签和双标签，如

<body></body>	<!--双标签-->
<br/>	<!--单标签-->

在HTML中，注释的常见类型为

二.常用标签

在HTML内，标签被分为了块级标签和行内标签

1.块级标签

块级标签要求整个内容独占一行，且可以设置宽度、高度、margin、padding。

宽度默认为所在容器的宽度。

标签	作用
table	定义表格
h1 ~ h6	定义标题
hr	定义一条水平线
p	定义段落
li	定义列表项目，只是单纯列举
ul	定义无序列表
ol	定义有序列表
div	定义文档中的分区或节
form	创建HTML表单

首先展示Table标签的使用，在Table中包含两个部分：<thead>和<tbody>，即表头和表体。在表头中，通过<th>来定义列名。在表体中，用<td>来确定列的内容

<body>
<h1>Table展示</h1>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>用户</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Outer</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cyrex</td>
    </tr>
    </tbody>
</table>
</body>

其中的<tr>可以认为是一行的开始，对应的，</tr>就标志着一行的结束。

我们也可以选择在<table>内加入对应的数值来调整表格：

border：属性值为1或""，规定表格是否有边框，默认为""
align：根据其属性值可以调整表格的对齐方式，属性值包括left、center、right
cellpadding：属性值为像素值，调整单元格内容与边框之间的空白，默认为1
cellspacing：属性值为像素值，调整单元格与单元格之间的距离，默认为2
width：属性值为像素值或百分比，调整表格的宽度
height：属性值为像素值或百分比，调整表的高度

列表常用<ul>和<ol>，其中<ul>为无序列表，<ol>为有序列表。

<li>则标记了列表其中一行的开始，</li>标志着结束。

<ul>
    <li>无序列表第一行</li>
    <li>无序列表第二行</li>
</ul>
<ol>
    <li>有序列表第一行</li>
    <li>有序列表第二行</li>
</ol>

其中，可以在<ol>内添加type字段来调整有序列表的序号，参数有：

1：数字序号
A：大写字母序号
a：小写字母序号
I：大写罗马数字序号
i：小写罗马数字序号

<form>标签用于接受和提交数据

<form action="/login" method="get" name="test-form">
    <input name="Name">
    <button type="submit">提交</button>
     <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

属性	描述
accept-charset	规定在被提交表单中使用的字符集，默认为当前页面字符集
action	规定向何处提交表单的地址`URL`，默认为提交页面
autocomplete	规定浏览器应该自动完成表单，默认为开启
enctype	规定被提交数据的编码，默认为`url-encoded`
method	规定在提交表单时所用的`HTTP`方法，默认`get`
name	规定识别表单的名称，对于`DOM`使用`document.forms.name`
novalidate	规定浏览器不验证表单
target	规定`action`属性中地址的目标，默认为_self

2.行内标签

行内标签具有以下特性：

与其他行内元素并排
设置宽高无效
默认的宽度就是文本内容的宽度
水平方向的padding和margin属性可用
只能容纳文本级元素和内联元素。

标签	作用
a	标签定义超链接
span	组合文档中的行内元素
br	定义换行
b	定义文体缩写
label	标签
input、textarea、select等	用于表单的定义
img	图片

其中的span和div会在CSS进行讲解，其中span是行内标签的默认标签，div是块级标签的默认标签

<a>标签可以建立超链接，从网页指向一个目标并建立连接关系，这个目标可以是网页、图片等。

<a href=test.html>本地跳转</a>
<a href="https://outercyrex.github.io">我的博客</a>
<a href="https://outercyrex.github.io" target="_blank"> 我的博客，但是是新开标签页</a>
<a href="log.txt" download="download.txt">下载文件，文件会被命名为"download.txt"</a>

<input>标签用于用户提交某些表格数据

<input type="text" placeholder="框内提示词" value="默认的填充值">

此外还有disable关键字用于禁用该行的<input>

常用的type值包括：

type值	对应形式	对应代码
text	单行输入文本	`<input type="text">`
password	密码输入框	`<input type="password">`
date	日期输入框	`<input type="date">`
checkbox	复选框	`<input type="checkbox" checked>`
radio	单选框	`<input type="radio">`
submit	提交按钮	`<input type="submit" value="提交">`
reset	重置按钮	`<input type="reset" value="重置">`
button	普通按钮	`<input type="button" value="普通按钮">`
hidden	隐藏输入框	`<input type="hidden">`
file	文本选择框	`<input type="file">`

下面是用于单选或多选来提交数据的方法：

<radio>用于存储单选信息

<input type="radio" name="水果">苹果
<input type="radio" name="水果">香蕉
<input type="radio" name="水果">西瓜

<checkbox>用于存储多选信息，且需要有value字段来确定选择该选项后要提交什么内容。

<input type="checkbox" name="水果" value="apple">苹果
<input type="checkbox" name="水果" value="banana">香蕉
<input type="checkbox" name="水果" value="melon">西瓜

也可以添加checked字段来默认选中某些选项。

此外，<input>要与<form>一同使用来提交数据

<form action="/select" method="get" name="fruits">
	<input type="checkbox" name="水果" value="apple">苹果
	<input type="checkbox" name="水果" value="banana">香蕉
	<input type="checkbox" name="水果" value="melon">西瓜
    <input type="submit" name="提交">
</form>

此外，类似与<radio>的还有一个<select>语句，默认为单选，也可以使用multiple字段来实现多选

<select name="我是下拉选择标签">
    <option>苹果</option>
    <option>香蕉</option>
    <option>西瓜</option>
    <input type="submit" value="提交">
</select>

<input>常常要求与<label>连用，来实现跳转焦点。可以与<style="display:none">连用来隐藏原本的选择区块，只显示<label>标签。

<label for="Outer">在这里input!
    <input id="Outer" type="text" placeholder="框内提示词">
</label>

<img>标签用于显示特定的图片

<img src="avatar.png" alt="错误">
<img src="avatar.png" width="100" alt="错误">
<img src="avatar.png" width="100" height="200" alt="错误">
<img src="avatar.png" width="100" height="200" alt="错误">

其中的各项参数分别为：

alt会在图片无法加载时显示错误信息，width和height在单用时会等比缩放，而在一起使用时会进行拉伸。

二.CSS

CSS即层叠样式表。

HTML用于定义内容和结构的语义，二CSS则用于设计风格和布局。

一.引入方式

1.内部引入

内部样式即在HTML文件的头部引入<style>的标签，并通过选择器来选择要更改哪个标签的样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <style>
        h1{
            color:cornflowerblue;
        }
    </style>
</head>
<body>
<h1>Hello,world!</h1>
</body>
</html>

上述代码为Hello,World!文本添加了<h1>标签，随后在<head>内定义了<style>并直接连接<h1>标签来实现更改

2.行内引入

行内引入即直接在HTML文件行内加入<div>标签并调整对应的参数来实现。

<div style="color:red">Hello,World!</div>
<div style="color:red;font-size:100px">Hello,World!</div>

3.外部引入

外部引入即从HTML文件外部引入CSS文件

假定在同一目录下存有HTML和CSS文件

h3{
    color:deepskyblue;
    font-size:100px;
}

则我们在HTML中可以用<link>标签引入该CSS文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS测试</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<h3>Hello,world!</h3>
</body>
</html>

4.优先级

在CSS中，后设置的样式会覆盖掉前边设置的样式。且不同的标签带有不同的优先级。权重的优先级最重要，高权重的会覆盖掉低权重的且部分先后。

h3{
    color:deepskyblue;
    font-size:100px;
}
.box{
    color:lightskyblue;
}

在HTML中设置优先级class="box"：

<h3 class="box">Hello,world!</h3>

则.box会覆盖掉h3，因为其权值更高。

二.CSS选择器

1.常见选择器

id选择器

id选择器要求全局唯一，不能重复。

<!--CSS文件-->
#box{
    color:deepskyblue;
    font-size:100px
}
<!--HTML文件-->
<h3 id="box">Hello,world!</h3>

类选择器

类选择器可以设置重复，一个行内标签可以设置多个类选择器

<!--CSS文件-->
.blue{
    color:blue;
}
.size{
    font-size:100px
}
<!--HTML文件-->
<h3 class="blue size">Hello,world!</h3>

标签选择器

标签选择器也是可以设置重复

<!--CSS文件-->
h3{
    color:deepskyblue;
    font-size:100px;
}
<!--HTML文件-->
<h3>Hello,</h3>
<h3>world!</h3>

属性选择器

属性选择器可以设置对应超链接或图像的样式

<!--CSS文件-->
a[href]{
    color:deepskyblue;
}
div[id="box"]{
    color:deepskyblue;
}
<!--HTML文件-->
<a href="https://outercyrex.github.io">我的博客</a>
<a href="https://baidu.com">百度</a>
<div id="box">这是一个id选择器</div>

也可以具体指定具体哪个超链接使用该样式

<!--CSS文件-->
a[href="https://outercyrex.github.io"]{
    color:deepskyblue;
}
<!--HTML文件-->
<a href="https://outercyrex.github.io">我的博客</a>

通用选择器

通用选择器用于设置一些全局变量，可以给网页元素做一些通用的样式，margin:0和padding:0用来清除自带网页的内外间距。

*{
	margin: 0;
	padding: 0;
}

并集选择器与交集选择器

多个选择器可以通过,隔开来使这些选择器指向的对象共同生效

<!--CSS文件-->
h3,div[id="box"]{
    color:deepskyblue;
    font-size:100px;
}
<!--HTML文件-->
<h3>Hello,world!</h3>
<div id="box">这是一个id选择器</div>

交集选择器可以增加限制条件，多个条件之间不需要任何间隔符即可

<!--CSS文件-->
#box.blue{
    color:blue;
}
<!--HTML文件-->
<div id="box" class="blue">这是一个标签</div>

后代选择器和子选择器

后代选择器要求对于多层的嵌套标签，可以指定选择器到哪一层

<!--CSS文件-->
#user #new{
    color:red;
    background: aqua;
}
<!--HTML文件-->
<div id="user">
    <div id="article">
        <div id="new">
             这是一个多层标签
        </div>
    </div>
</div>

子选择器则在一层有多个后代时选择具体到哪个标签，使用>进行选择

<!--CSS文件-->
#user #article>#old{
    color:red;
    background: aqua;
}
<!--HTML文件-->
<div id="user">
    <div id="article">
        <div id="new">
             这是一个多层标签
        </div>
        <div
    </div>
</div>

相邻兄弟选择器和普通兄弟选择器

相邻兄弟选择器只有在两个标签相邻且按照从上到下的顺序排列时才能触发

<!--HTML文件-->
<div>  
  <p class="s1">段落1</p>  
  <p class="s2">段落2（将被选中）</p>  
  <p class="s2">段落3（不会被选中，因为它不是紧跟在.s1之后）</p>  
</div>  
<!--CSS文件-->
<style>  
  .s1 + .s2 {  
    color: red;
  }  
</style>

上述代码中，只有第一个s2能被触发，第二个s2因为不与s1相邻所以无法被.s1+.s2选中。

而普通兄弟选择器则无所谓是否相连，只强调顺序性。

<!--CSS文件-->
.s1~.s3{
    color:deepskyblue;
}
<!--HTML文件-->
<div>
    <p class="s1">段落1</p>
    <p class="s2">段落2</p>
    <p class="s3">段落3会被选中</p>
</div>

2.伪类选择器

伪类选择器会根据用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的

hover、active、focus

hover定义当鼠标悬停在元素上时，触发特定的样式变化，常用于添加交互效果。

此外，active定义当元素被激活时，触发特定的样式变化，focus定义当元素称为焦点时会触发变化。

/*CSS文件*/
a[href="https://outercyrex.github.io"]{
    background:deepskyblue;
    font-size:100px
}
a[href="https://outercyrex.github.io"]:hover{
    background:green;
    font-size:100px
}
/*HTML文件*/
<a href="https://outercyrex.github.io">我的博客</a>

first-child、last-child、nth-child(n)

上述三个child分别会定义后代标签中的第一个、第二个、第n个。

其中nth-child()内不仅可以传参数字，也可以传odd和even(奇数和偶数)，甚至可以传入等差数列如(2n+1)、(3n+2)。

<!--CSS文件-->
div p:nth-child(2){
    color:deepskyblue;
}
<!--HTML文件-->
<div>
    <p class="s1">段落1</p>
    <p class="s2">段落2</p>
    <p class="s3">段落3</p>
</div>

否定伪类选择器

not()可以在兄弟标签中排除掉某个标签

<!--CSS文件-->
div>p:not(.s1){
    color:red;
}
<!--HTML文件-->
<div>
    <p class="s1">段落1</p>
    <p class="s2">段落2</p>
    <p class="s3">段落3</p>
</div>

则上述.s1不会被设置为红色

伪元素选择器

伪元素无法被选中！共有两个参数：before和after，可以在被选择标签前后进行修改或添加。

<!--CSS文件-->
#BeforeAfter:before{
    content:"我是之前"
}
<!--HTML文件-->
<div id="BeforeAfter">
    这是一个示例
</div>

3.优先级

一般而言，不同选择器的优先级按以下顺序排序：

!important > 内联选择器 > ID选择器 > 类选择器 > 属性选择器 > 伪类选择器 > 元素选择器 > 通配符选择器 > 继承选择器

内联选择器即行内引入的选择器。

前端基础学习之HTML/CSS part one