html+css複習筆記

yunCrime發表於2018-06-02
HTMLCSS筆記

注：非h5和c3筆記，此複習筆記參考W3Cschool，用來整理知識點

html簡介

  • html：超文字標記語言
  • html標籤：多為成對出現，成對出現都為一個開始標籤一個結束標籤;結束標籤比開始標籤多一個“/”用以區分
    <html></html>

  • html文件：即通常說的網頁，瀏覽器的作用就是將html文件轉化為視覺化的頁面

工具：Visual Studio Code + FireFox


語法

 1.html標題標籤

        <h1>1級標題</h1>
        <h2>2級標題</h2>
        <h3>3級標題</h3>
        <h4>4級標題</h4>
        <h5>5級標題</h5>
        <h6>6級標題</h6>

2.段落標籤

<p>段落1</p>
<p>段落1</p>
<p>段落1</p>

3.圖片標籤

<img src="./xxx.jpg" />

該標籤具有以下屬性：

  1. src:圖片路徑（圖片型別可為靜態、動態、網路、本地）
  2. alt:該屬指定一段文字，作為該圖片的提示資訊
  3. height:和width
  4. title:當圖片因某些原因載入不出來，就顯示該資訊

4.超連結標籤

<a href="https://www.baidu.com" target="_blank">baidu</a>

baidu

該標籤擁有以下屬性：

  1. target: 可以選擇該連線開啟的視窗時再本視窗，還是新視窗
  2. name：錨點，可以通過超連結跳轉到該錨點

5.表格

        <table border="1">
            <thead>
                <th>頁首單元格</th>
                <th>頁首單元格</th>
                <th>頁首單元格</th>
            </thead>
            <tbody>
                <td>表體</td>
                <td>表體</td>
                <td>表體</td>
            </tbody>
            <tfoot>
                <td colspan="3">表格腳</td>
            </tfoot>
        </table>
頁首單元格 頁首單元格 頁首單元格
表格腳
表體 表體 表體

該標籤擁有以下該屬性：

  1.     rowspan和colspan 合併列、合併行
  2. thead、tbody、tfoot 表格頁首、表格體、表格腳除去thead巢狀<th.../>標籤外，其他巢狀<td .../>
  3. align: align="center"

6.更換背景

修改背景顏色

<body bgcolor = "red">
修改圖片背景
<body background="http://photos.tuchong.com/274302/f/6993727.jpg">

背景圖片插入格式同圖片標籤;

若背景圖片過大會顯示不全，反之，會重複使用該圖片將頁面填充滿(該問題可經過css解決)

7.列表

        <ul>
            <li>無須列表</li>
            <li>無須列表</li>
            <li>無須列表</li>
        </ul>

        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
  • 無須列表
  • 無須列表
  • 無須列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

8.格式標籤

        <b>加粗</b>
        <i>傾斜</i>
        <ins>下劃線</ins>
        <del>刪除線</del>
        10<sup>2</sup>
        CO<sub>2</sub>

效果：

加粗 傾斜 下劃線 刪除線 102 CO2

9.表單

<from.../>表單標籤

該標籤重要屬性：

  •  action:該屬性可指定一個地址，單擊提交按鈕時，該表單被提交到這個地址。
  • method：指定提交表單時傳送何種型別的請求，該屬性可為get(不安全)或post(安全)，該屬性必填

input元素

<form action="https://localhost:8080/as/da" method="GET">
<input type="text" name="user" id="1" value="單行文字框"><br><br>
<input type="password" name="password" id="2" value="密碼輸入框"><br><br>
<input type="radio" name="radio" id="3" value="1">a
<input type="radio" name="radio" id="4" value="2">b <br><br>
<input type="file" name="file" id="aaa">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="無動作">
</form>

下拉框

<select name="select" id="123">
        <option value="1">下拉選單</option>
        <option value="1">下拉選單</option>
        <option value="1">下拉選單</option>
    </select>

下拉選單下拉選單下拉菜

textarea定義文字域 

<textarea cols="20" row="2"></textarea>

框架

 <iframe src="https://www.baidu.com" frameborder="0"></iframe>


可再<head.../>標籤中使用frameset對框架進行分割

css簡介

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 通過css可以改變網站的外觀和佈局

因為注重點不同：暫不對css做過多的複習

css的三種引入方式

  1.    內聯嵌入式    （通過標籤stayle屬性）
  2.    定義內部型別程式碼塊（在stayle寫css程式碼）
  3.     鏈入外部程式碼檔案（鏈入css檔案，再css中寫樣式程式碼）


相關文章