前端基础 - 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> 自闭合标签 - 常用属性:<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 &lt;label for=&quot;user&quot;&gt;&lt;/label&gt; 
      2 &lt;input id=&quot;user&quot;&gt;
  • <form>

    • 1 &lt;form action=&quot;https://www.baidu.com&quot; method=&quot;get&quot;&gt;
      2     &lt;input name=&quot;username&quot;&gt;
      3     &lt;input name=&quot;password&quot;&gt;
      4 &lt;/form&gt; 
    • 以上操作会把 username 和 password 当作参数放在 URL
  • &lt ➡️ 左尖括号

  • &gt ➡️ 右尖括号

  • &nbsp ➡️ 空格

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

    • &lt;textarea&gt; 多行文本默认信息 &lt;/textarea&gt;
  • <select></select> ➡️ 下拉框,搭配以下内容一起用:

    • 1 &lt;select name=&quot;city&quot;&gt;
      2     &lt;option value=&quot;1&quot;&gt;济南&lt;/option&gt;
      3     &lt;option value=&quot;2&quot;&gt;青岛&lt;/option&gt;
      4 &lt;/select&gt;
    • 1 &lt;select name=&quot;city&quot;&gt;
      2     &lt;optgroup label=&quot;山东省&quot;&gt; 
      3         &lt;option&gt;济南&lt;/option&gt; 
      4         &lt;option&gt;青岛&lt;/option&gt; 
      5     &lt;/optgroup&gt;
      6 &lt;/select&gt;
  • <a></a> ➡️ 超链接标签

    • &lt;a href=&quot;http://www.baidu.com&quot; target=&quot;_blank&quot;&gt;百度&lt;/a&gt;
      &lt;a href=&quot;#demo&quot;&gt;铆点,跳转到 id=“demo” 的标签处 &lt;/a&gt;
  • <img> ➡️ 图片

    • &lt;img old-src=&quot;图片出处&quot; title=&quot;鼠标悬浮文字&quot; alt=&quot;加载失败时显示的文字&quot;&gt;
  • <table> ➡️ 表格

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

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

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

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

3. CSS

  • css 选择器

    • &lt;body&gt;
        &lt;div id=&quot;id1&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;class1&quot;&gt;&lt;/div&gt;
        &lt;div&gt;
            &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id=&quot;id2&quot;&gt;
            &lt;span&gt;今天&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id=&quot;id3&quot; class=&quot;...&quot; april=&quot;april&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
  • 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=&quot;april&quot;]{
            width: 100%;
            height: 100px;
        }&lt;br&gt;&lt;/br&gt;
    • 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; //既是行内也是块,因为行内标签不支持使用宽高属性&lt;br&gt;&lt;/br&gt;display: none; //隐藏属性
  • 外边距、内边距

    • margin-top: 10px;    //外边框的意思显而易见,不多做解释。margin: 10px 表示四周的边距,支持各个方向的边距
      
      padding-top: 10px;    //内边距是指,以边框为准,向自身内侧扩充
  • 分层(position)

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

      • &lt;style&gt;
            .c1{
                height: 48px;
                width: 100%;
                color: blue;
            }
            .temp{
                color: red;
                margin-top: 48px;
            }
            .c2{
                position: fixed;
                top: 0;
                right: 0;
                left: 0;
            }
        &lt;/style&gt;
        
        &lt;body&gt;
            &lt;div class=&quot;c1 c2&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;temp&quot;&gt;&lt;/div&gt;
        &lt;/body&gt;
    • 相对定位(外层:position: relative; 内层:position: absolute;)
      •  1 &lt;style&gt;
         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 &lt;/style&gt;
        15 &lt;body&gt;
        16     &lt;div class=&quot;c1&quot;&gt; //外边框,以下四个方块
        17         &lt;div class=&quot;c2&quot;&gt;&lt;/div&gt; //默认在左上
        18         &lt;div class=&quot;c2&quot; style=&quot;right:0;top:0; color:green&quot;&gt;&lt;/div&gt;
        19         &lt;div class=&quot;c2&quot; style=&quot;right:0;bottom:0; color:red&quot;&gt;&lt;/div&gt;
        20         &lt;div class=&quot;c2&quot; style=&quot;left:0;bottom:0; color:yellow&quot;&gt;&lt;/div&gt;
        21     &lt;/div&gt;
        22 &lt;/body&gt;
    • 分层时的展示优先级(z-index,优先展示 z-index 值大的)
  • 鼠标悬浮属性(鼠标悬浮时显示小👋)

    • &lt;input type=&quot;button&quot; value=&quot;Login&quot; style=&quot;cursor:pointer&quot;&gt;
  • 图片填充(不做任何处理时,边框和图片默认从左上排列)

    • &lt;style&gt;
        .c1{
            height: 100px;
            width: 100px;
            border: 1px red solid;
            overflow: auto; //自适应,超出边框大小时有 scoll
            // overfllow: scoll; (不管是否超出边框都展示 scoll)
            // overflow: hidden; (裁剪)
        }
        .c2: hover{
            background-color:blue;    //鼠标悬浮变色
        }
      &lt;/style&gt;
      &lt;body&gt;
        &lt;div class=&quot;c1&quot;&gt;
            &lt;img old-src=&quot;...&quot;&gt;
        &lt;/div&gt;   
        &lt;div class=&quot;c2&quot;&gt;    //悬浮变色
        &lt;/div&gt;
      &lt;/body&gt;
  • 鼠标悬浮变色(如上)

  • 背景图

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

      background-repeat: repeat; //平铺

  • 背景图的位置展示

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

      此种方式的处理方式:减少网络 IO

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。