前端基础 - HTML&CSS

时间 2019-11-29

标签前端基础 html&css html css 栏目 CSS 繁體版

原文原文链接

前端的东西学了有一阵子了，感受都是比较零碎的东西，属于一学就会，一放下就忘的类型。因此就回看了视频作了笔记，对零碎的点作了梳理，方便往后本身须要的时候回看。javascript

1. HTML - headcss

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

2. HTML - bodyhtml

<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 值大的）

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

<input type="button" value="Login" style="cursor:pointer">

图片填充（不作任何处理时，边框和图片默认从左上排列）

<style>
    .c1{
        height: 100px;
        width: 100px;
        border: 1px red solid;
        overflow: auto; //自适应，超出边框大小时有 scoll
        // overfllow: scoll; (无论是否超出边框都展现 scoll）
        // overflow: hidden; （裁剪）
    }
    .c2: hover{
        background-color:blue;    //鼠标悬浮变色
    }
</style>
<body>
    <div class="c1">
        <img src="...">
    </div>   
    <div class="c2">    //悬浮变色
    </div>
</body>

鼠标悬浮变色（如上）

背景图

 1 <style>
 2     .c3{
 3         width: 100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-repeat: repeat-x; //横向堆叠
 7         // repeat-y (竖向堆叠)
 8         // repeat:none(不堆叠)
 9     }
10 </style>
11 <body>
12     <div class="c3"></div>
13 </body>

background-repeat: repeat; //平铺java

背景图的位置展现

 1 <style>
 2     .c1{
 3         width:100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-position: 0 0;    // 0 0 分别表明 xy 轴
 7     }
 8 </style>
 9 <body>
10     <div class="c1"></div>
11 </body>

此种方式的处理方式：减小网络 IO后端

往后的查漏补缺模块：

1. css文件的引用方式为 <link href="/static/css/pagination.css" rel="stylesheet">网络