前端基础 - HTML&CSS

忘是亡心i 2023-08-17 17:35 142阅读 0赞

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

**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> 自闭合标签
    
     *  常用属性：<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; //平铺
 *  背景图的位置展示
    
     *      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

转载于:https://www.cnblogs.com/april-aaa/p/11605352.html