前端HTML介紹，標籤介紹，基礎選擇器，CSS引入方法

時間  2019-12-01
標籤 前端 html 介紹 標籤 基礎 選擇器 css 引入 方法 欄目 HTML 简体版
原文   原文鏈接

1. HTML

1.1 前端：

全部用戶能看到的界面
網頁、pc端的應用exe、移動端應用app、微信小程序、手環的時間界面
html5爲基礎的前端：網頁、app、微信小程序css

 

1.2 前端三劍客：

一、html5：頁面結構框架
　　標籤 => 學會標籤的嵌套結構html

二、css3：頁面佈局與樣式前端


三、javaScript：頁面的交互邏輯html5

 

1.3 html知識

標籤：由<>包裹字母開頭，能夠結合數字和合法字符的能被瀏覽器解析的標記 -- 字母 數字 -
標籤有語義：<br> 換行
標籤有做用範圍：<h1>中間就是標籤的做用範圍，由標籤來控制，具備默認樣式</h1>
標籤能夠修改內容樣式：<xyz style="color: red">000</xyz>java

轉義字符：由 &與;包裹，可使10進制數字組合，也可使特殊單詞縮寫組合
&gt; => >
&lt; => <python

指令：<>包裹由!開頭
文檔類型指令：<!doctype html>
註釋：<!-- 註釋 -->linux

 

1.4 標籤

單雙標籤之分：單標籤無需內容，主功能，能夠省略結束符/；雙標籤主內容，須要有做用域，必須明確結束標籤<a></a>css3

經常使用標籤：
h1~h6
p
b
i
a
img
ul>li
table>tr>th|td
form>input|button|textarea|select>option小程序

span：無語義，同行顯示（不帶換行）
div：無語義，換行顯示（自帶換行）後端

 

a標籤:連接標籤
     能夠經過href跳轉到指定的網址
     錨點功能:回到頂部
         < a  href="" id="a1">top</ a >
         < a  href="#a1">bottom</ a >
     ps：target屬性用來控制是否在當前頁面跳轉
         默認是_self當前頁
         也能夠指定成_blank新建頁面跳轉
 
全部的html標籤都應該有一個id屬性，用來惟一標識當前標籤 爲後續的DOM操做提供基礎
也就意味着同一份html中標籤的id不能重複，不寫id屬性也是能夠的
 
 
img標籤
     src圖片路徑:便可以是網絡上的圖片地址也能夠是本地的圖片地址
     alt當圖片加載失敗以後自動展現的提示信息
     title鼠標懸停在圖片上時顯示的文本
     圖片調節長寬的時候只須要調節一個 另一個參數自動等比例縮放
     
     
     
 
列表標籤
     ul:無序列表
     ol：有序列表
     dl：標題列表
     
表單標籤
     固定就如下面的格式書寫
     < table >
         < thead ></ thead >
         < tbody ></ tbody >
     </ table >
     
     tr 一個tr表示一行
     border調整列表的邊框
     cellspacing 調單元格與外邊框之間的距離
     cellpadding 調文本與單元格之間的距離
     rowspan  垂直方向合併
     colspan  水平方向合併
     
 
form表單
     功能:獲取用戶輸入(手動輸入/選擇/默認值)，並將獲取到的用戶信息發送給後端
     form表單中只有input的type類型爲submit纔會觸發提交信息的動做
     若是不想經過input標籤來觸發提交動做 那麼能夠直接寫一個< button >button按鈕</ button >
     
     input
         經過控制type的類型從而實現不一樣的獲取用戶輸入的標籤樣式
         text        普通文本
         password    密文
         date        日曆
         radio       單選框
         checkbox    多選框
         file        獲取文件
         
         submit      觸發提交數據的行爲
         button      普通的按鈕
         reset       重置form表單內容
         
     select
         選擇框  默認是單選的 能夠經過multiple參數將單選變爲多選
         一個option就是一個選項
     
     textarea
         獲取用戶大段文本值
     
     
     
     
     
     form表單中幾個重要的屬性
     
         action:用來控制數據到底提交給誰  寫url來指定提交給誰
         
         form表單默認是get請求  能夠經過method屬性修改提交方法
         
         form表單中須要給每個獲取用戶輸入的標籤加上name屬性用來標識當前數據的類型
             你能夠將name屬性當作字典的key 用戶輸入的當作字典的value 而且你能夠手動設置value值
         
         form表單發送文件 須要修改enctype屬性的值
             默認是urlencoded不支持傳輸文件
             須要將其修改成multipart/form-data
     
     
     
 
     
     
GET請求與POST請求
     get請求:獲取想要的數據
     post請求:提交數據
    

　　

 

1.5 具體標籤功能

<!DOCTYPE html>
<!-- html 頁面標籤 lang='en' 告訴瀏覽器頁面的語言-->
<html lang="zh">
<head>
    <!-- 頁面編碼 -->
    <meta charset="UTF-8">
    <!-- 頁面標籤標題-->
    <title>day50頁面標籤標題</title>
    <!-- 頁面樣式-->
    <style></style>
    <!-- 頁面腳本-->
    <script></script>
</head>

<!-- body：體標籤 - 頁面內容、頁面腳本 -->
<body>
<!-- 用於內容顯示的標籤所有書寫在body中 -->
<hr>
<h1 >一級標題</h1>  <!-- 通常一個頁面只出現一次，表明該頁面的主內容解釋 -->
<h6 >六級標題</h6>

<!-- 段落：p -->
<p>段落</p>
<!-- 文本相關：通常會被p標籤嵌套 -->
<!--span標籤，普通格式標籤-->
<span>span標籤</span>
<!--<br>： 換行標籤-->
<br>
<b>加粗標籤</b>
<strong>以加粗方式強調的標籤</strong>
<br>
<i>斜體標籤</i>
<em>以斜體方式強調的標籤</em>
<br>
<sup>上角標</sup>
<sub>下角標</sub>


<!-- 超連接：a href="連接地址" target="_self"在當前窗口下打開 ,"_blank"在新窗口打開-->
<a href="https://www.baidu.com" target="_self">前往百度</a>
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<a href="預習/a.html" target="_blank">超連接到自定義界面</a>


<!-- 圖片標籤： src:圖片源
  alt: 資源加載失敗文本提示
  title: 鼠標炫富的文本提示
  src,alt,title 順序能夠隨便-->
<img title="新垣結衣" alt="新垣結衣" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1416784794,1465922537&fm=26&gp=0.jpg" >


<!-- 組合標籤-->
<!-- 列表-->
<!-- ul>li{列表項} * 3 : 快速生成3項列表(無序列表)-->
<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

<!-- ul>li{列表項} * 3 : 快速生成3項列表(有序列表)-->
<ol>
    <li>第1項</li>
    <li>第2項</li>
    <li>第3項</li>
</ol>


<!-- 表格標籤 -->
<!-- border: 邊框粗細 tr: 行 th: 標籤單元格  td:內容單元格
    cellpadding:單元格內部間距
    cellspacing:單元格間的間距 -->
<table border="2" width="500" height="300" cellpadding="10" cellspacing="10">
    <thead>
        <tr style="height: 50px">
            <th>標題</th>
            <th>標題</th>
            <th>標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
        <tr>
            <!-- colspan:合併列的2個單元格-->
            <!-- rowspan:合併行的2個單元格-->
            <td colspan="2">單元格</td>
            <td rowspan="2">單元格</td>
        </tr>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr style="height: 10px">
            <td >單元格</td>

            <td colspan="2">單元格</td>
        </tr>
    </tfoot>
</table>

<!-- 表單標籤: 用於完成先後臺數據交互-->
<!-- form action: 提交後臺的接口地址
    method: 提交方式（get(速度快，不安全), post(速度慢，安全)）-->
<form action="" method="get">
    <input type="text" name="user" placeholder="默認顯示文本佔位符">
    <input type="password" placeholder="密碼">
    <input type="color" placeholder="背景顏色">
    <input type="number" placeholder="數字">
    <input type="file">   <!-- 提交文件 -->
    <hr>
     <!--radio:單選框 checked:默認選項-->
    男 <input type="radio" name="sex" checked>
    女 <input type="radio" name="sex">
    <!-- 複選框 -->
    1 <input type="checkbox" value="m" name="like" checked>
    2 <input type="checkbox" value="f" name="like" checked>
    人妖 <input type="checkbox" value="mf" name="like">

    <br>
    <br>

    <!-- 選擇列表 muitiple: 能夠多項操做-->
    <select name="subject" multiple>
        <option value="python">python</option>
        <option value="linux">linux</option>
        <option value="go">go</option>
    </select>

    <!-- textarea：文本域 就是畫出一個框框，能夠在裏面填內容-->
    <textarea name="123" id="123" cols="30" rows="10"></textarea>

    <!-- button 按鈕-->
    <button type="button">無用</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>


</form>


<!--頁面腳本-->
<script></script>
</body>
</html>
View Code

2. CSS

2.1 CSS的三種引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
    <style>
        .dd {
            width: 200px;
            height: 200px;
        }
        .d1 {
            background-color: yellow;
        }
        .dd.d2 {
            background-color: red;
        }
        .d2 {
            background-color: brown;
        }

    </style>

    <link rel="stylesheet" href="./css/4.樣式.css">
</head>
<body>
<!-- 標籤的寬度會適應父級，高度由內容撐開 -->
<!--一、行間式：直接，可讀性差-->
<div style="width: 200px; height: 200px; background-color: pink;"></div>
<div style="width: 300px; height: 200px; background-color: greenyellow;">123</div>

<!--二、內聯式：可讀性加強，複用性(文件內部複用) head->style標籤-->
<div class="dd d1"></div>
<div class="dd d2"></div>
<div></div>

<!--三、外聯式：團隊開發，複用性(文本級別複用) head->link->外部css文件-->
<div class="pp p1"></div>
<div class="pp p2"></div>
<div></div>
</body>
</html>
View Code

2.2 基礎選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基礎選擇器</title>
    <style>
        /*優先級：按做用域大小區分，做用域越小優先級越高*/
        /* !important > 行間式 > id > class > 標籤 > 統配 */
        /*重點： class選擇器 - 單類名 多類名 */

        /*1.統配選擇器*/
        * {
            font-size: 30px;
            color: brown;
        }
        /*2.標籤選擇器：標籤名*/
        div {
            color: orange;
        }
        span {
            color: darkcyan;
        }

        /*3.類選擇器：.類名*/
        .aa {
            color: indigo;
        }

        /*4.id選擇器：#id名*/
        #bb {
            color: green;
        }

        /*組合使用：找id爲bbclass爲aa的div*/
        div#bb.aa {
            color: red;
        }

        .aa {
            color: red!important;
        }
    </style>
</head>
<body>
    <div class="aa" id="bb" style="color: gold!important;">d1</div>
    <div class="aa">d2</div>
    <div>d3</div>
    <span class="aa">s1</span>
    <span>s2</span>
    <span>s3</span>
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程