前端基础 - HTML&CSS

前端的东西学了有一阵子了，感觉都是比较零碎的东西，属于一学就会，一放下就忘的类型。所以就回看了视频做了笔记，对零碎的点做了梳理，方便日后自己需要的时候回看。

1. HTML - head

标签大多成对出现（主动标签），<html></html> 标签只允许出现一对。不成对出现的标签成为自闭合标签，如 <input> <img>
标签中可以定义属性
<head></head> 标签中 80% 的信息不能被看到。（title 看得到）
<style></style> 标签用来写 css 样式。
<script></script> 能在 head 中写 javascript 代码。
<link> 引入 css 的标签

2. HTML - body

<p></p> ➡️ 段落
<h1></h1> ➡️ 标题，1代表一级标题，数字支持 1-6
<span></span> 行内标签，span 是白板标签，能被 css 随意修饰。与行内标签对应的是块级标签
<br> ➡️ 换行
<div></div> 块级标签

常用属性：<input value="默认值" placeholder="提示文案" type="text">
另外，type 分为：checkbox (checked="checked"), text, password, button, radio (单选框)
radio 的使用：两个 input 的 name 相同时，radio 选择互斥
重要的属性：name="username", name 用来与后段交互，对应后端的 key（username 只是举例）
通过 value 属性拿到输入值
button 和 submit，button 无任何效果，submit 与 form 表单联用

<label> 与 <input> 关联使用（通过 id）

1 <label for="user"></label> 
2 <input id="user">

<form>

1 <form action="https://www.baidu.com" method="get">
2     <input name="username">
3     <input name="password">
4 </form>

- 以上操作会把 username 和 password 当作参数放在 URL
&lt ➡️ 左尖括号
&gt ➡️ 右尖括号
&nbsp ➡️ 空格

<textarea></textarea> ➡️ 多行文本

<textarea> 多行文本默认信息 </textarea>

<select></select> ➡️ 下拉框，搭配以下内容一起用：

1 <select name="city">
2     <option value="1">济南</option>
3     <option value="2">青岛</option>
4 </select>

1 <select name="city">
2     <optgroup label="山东省"> 
3         <option>济南</option> 
4         <option>青岛</option> 
5     </optgroup>
6 </select>

<a></a> ➡️ 超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#demo">铆点，跳转到 id=“demo” 的标签处 </a>

<img> ➡️ 图片

<img src="图片出处" title="鼠标悬浮文字" alt="加载失败时显示的文字">

<table> ➡️ 表格

 1 <table>
 2     <thead> /*表头*/
 3         <th>id</th>
 4         <th>请求方式</th>
 5     </thead>
 6     <tbody> /*表体*/
 7         <tr> /*行*/
 8             <td> 1 </td>
 9             <td> get </td>
10         </tr>
11     </tbody>
12 </table>

需合并单元格的时候，横向合并只需在相应标签中添加 colspan="2" 的属性，2 为单元格的个数；

竖向合并时，rowspan=“2”，相应被合并的单元格就不必添加对应内容了

ul li

 1 <ul>  //无序列表
 2     <li> 狮子座♌️ </li>
 3     <li> 白羊座♈️ </li>
 4 </ul>
 5 
 6 <ol>  //有序列表
 7     <li> 狮子座♌️ </li>
 8     <li> 白羊座♈️ </li>
 9 </ol>
10 
11 <dl>  //缩进格式
12     <dt> 狮子座♌️ </dt>
13     <dd> 白羊座♈️ </dd>
14 </dl>

3. CSS

css 选择器

<body>
    <div id="id1"></div>
    <div class="class1"></div>
    <div>
        <span></span>
    </div>
    <div id="id2">
        <span>今天</span>
    </div>
    <div id="id3" class="..." april="april"></div>
</body>

id 选择器

#id1{
    width: 100px;
    background: blue;
}

class 选择器

.class1{
    width: 100%;
    height: 100px;
}

标签选择器

div{
    width: 100%;
    height: 100px;
}

- 层级选择器（还可以使用 id 层级选择器、class 层级选择器，将 div 改为"#id1" 或 ".class1"）
  - ```
  div span{
      width: 100%;
      height: 100px;
  }
```
- 属性选择器
  - ```
  div[april="april"]{
      width: 100%;
      height: 100px;
  }
```
- css 的样式，可以写在三个地方：div 的 style 属性中、<style></style> 标签中、文件引用。顺序为：离哪个近优先用哪个。

字体：

.c1{
    font-size: larger;
    font-weight: bolder;
}

边框：
- border: 1px red solid;
居中：
- text-align: center; //水平居中
- line-height: 100px; //这里的100px为边框的高度
float

float：left/right（可以实现块级标签在一行内展示）

块级标签和行内标签的转换、display 属性

display: inline; //块转行
display: block; //行转块

display: inline-bllock; //既是行内也是块，因为行内标签不支持使用宽高属性
display: none; //隐藏属性

外边距、内边距

margin-top: 10px;    //外边框的意思显而易见，不多做解释。margin: 10px 表示四周的边距，支持各个方向的边距

padding-top: 10px;    //内边距是指，以边框为准，向自身内侧扩充

分层（position）

position: fixed; 关于绝对定位的思考：div 是块级标签，如果不加 position 属性，两个 div 不会重叠，加了绝对定位，就会重合，为了防止遮挡内容，给下面的 div 增加外边框

<style>
    .c1{
        height: 48px;
        width: 100%;
        color: blue;
    }
    .temp{
        color: red;
        margin-top: 48px;
    }
    .c2{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }
</style>

<body>
    <div class="c1 c2"></div>
    <div class="temp"></div>
</body>

相对定位（外层：position: relative; 内层：position: absolute;）

 1 <style>
 2     .c1{  
 3         postion: relative;
 4         border: 1px red solid;
 5         height: 500px;
 6         width: 500px;
 7     }
 8     .c2{
 9         height: 80px;
10         width: 80px;
11         color: blue;
12         position: absolute;
13     }
14 </style>
15 <body>
16     <div class="c1"> //外边框，以下四个方块
17         <div class="c2"></div> //默认在左上
18         <div class="c2" style="right:0;top:0; color:green"></div>
19         <div class="c2" style="right:0;bottom:0; color:red"></div>
20         <div class="c2" style="left:0;bottom:0; color:yellow"></div>
21     </div>
22 </body>

分层时的展示优先级（z-index，优先展示 z-index 值大的）

鼠标悬浮属性（鼠标悬浮时显示小

原文地址：https://www.cnblogs.com/april-aaa/p/11605352.html