43前端

今日內容總結

塊級標籤

排版標籤

p div  hr pre
p 先後有點空白
div 沒有任何樣式的塊  span
hr  分割線   br 換行
pre 保留裏面的空格

列表

ul  ol  dl
ul li
    type: disc  square circle none  
ol li
    type: 1 a A I i  start: 2
dl dt dd
    dt 標題
    dd 內容

表格

table
thead:tr
   th  
tbody:tr 
   td
border 1  cellpading  內容和單元格的距離  cellspacing 單元格和邊框的距離
rowspan 合併行   colspan 合併列
align 水平排列  left center right
valign 垂直排列 top  middle bottom

表單

form action:提交的地址
input 
    type:text\password\radio\checkbox\submit\button\file\date\reset\hidden
    name\value
    text： placeholder 提示 
          readonly  只讀  不能改值可是能夠提交
          disabled  禁用  不能改值 不能夠提交
    radio\checkbox : checked 選中
select ： name  size=3 multiple（多選） 
    option ： value   selected 選中

label 
    <label for="input的id">用戶名</label>  input：id 

<textarea name="" cols="10" rows="30"></textarea>
文本框

注意：
    1. 要提交數據  必須有一個input的類型爲submit或者button
    2. 上傳文件 file ，改編碼類型form：enctype="multipart/form-data"

CSS

引入的方式

行內引入
<div style="color: red"></div>

內聯引入
  <style>
        div {
            color: red;
        }
        
  </style>
  
  
外聯引入  連接式
    <link rel="stylesheet" href="home.css">
外聯引入  導入式
    <style>
        @import url('home.css');
    </style>

簡單樣式

color 字體顏色

width 寬度

height 高度

background-color 背景顏色

選擇器

基本選擇器

標籤選擇器  div  p  span a 
id選擇器  #id
類選擇器  .類
通用選擇器  *

今日內容

塊級標籤

排版標籤

p:一個文本級別的段落標籤 先後有間距

P標籤中不嵌套其餘的塊級標籤

div 沒有任何樣式的塊級標籤

hr 分割線

列表

無序列表

type="原點的樣式"

<!-- 樣式 disc（實心圓、默認）、 circle（空心圓）、none（無）、square（方點）-->

<ul >
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ul>

<ul type="none">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ul>
<ul type="circle">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ul>
<ul type="square">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ul>

有序列表

type="數字的樣式" start =「起始值」（數字）

<!-- 樣式 1（數字）、 a（小寫字母）、A（大寫）、I（羅馬數字）-->

<ol>
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ol>

<ol type="1">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ol>

<ol type="a" start="25">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ol>

<ol type="A">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ol>

<ol type="I">
    <li>手機</li>
    <li>電腦</li>
    <li>iPad</li>
</ol>

定義列表

dt 標題

dd 內容

<dl>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>

    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>

表格

<!--有表頭的表格-->
<!--tbale 嵌套 thead tbody 
    thead和tbody嵌套tr
    tr嵌套 th  td 
-->

<!--tbale 屬性 
border 邊框
cellpadding   元素和單元格的邊距
cellspacing   單元格和邊框的間距
-->

<!--tr 屬性 
align   內容的水平排列  left  center  right
valign  內容的垂直排列  top middle bottom
-->
<!--td  屬性 
rowspan   佔幾行
colspan   佔幾列
-->

<table border="1" cellpadding="20px" cellspacing="20px">
    <thead>
    <tr align="left">
        <th> 序號</th>
        <th> 姓名</th>
        <th> 年齡</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

<!-- 無表頭的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
    
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

表單

<!-- form 標籤
action： 提交的地址  
-->

<!-- input 標籤
type： 類型   
    text：普通文本
    password：密碼 密文
    radio：  單選框
    checkbox： 複選框
    submit： 提交按鈕
能提交數據 input有name屬性  有value值

-->

<button>提交</button>  
<!-- 
form表單中button和type=‘submit’的input的做用是同樣的
-->


<form action="http://127.0.0.1:9999">
    <input type="text" name="user" placeholder="請輸入用戶名">   <!--name:提交數據的key   value:值   placeholder：佔位的內容 -->
    <input type="password" name="pwd" value="3714">
    <input type="radio" name="sex" value="1"> 男
    <input type="radio" name="sex" value="2" checked  > 女  <!-- checked默認選中 -->
    <input type="checkbox" name="hobby" value="1"> 跳
    <input type="checkbox" name="hobby" value="2"> 唱
    <input type="checkbox" name="hobby" value="3"> rap
    <input type="checkbox" name="hobby" value="4"> 籃球
    <input type="submit">
    <button>提交</button  
    
</form>

label

<!--給input標籤訂義id  給label標籤的for填上id-->
<label for="i1">用戶名：</label>
<input id="i1" type="text" name="user" placeholder="請輸入用戶名">

其餘的input

<input type="hidden" name="alex" value="alexdsb">   <!--  隱藏的input框  -->
<input type="reset"> <!--  重置按鈕  -->
<input type="button" value="提交"> <!--  普通的按鈕  -->
<button type="button">提交</button>  <!--  普通的按鈕  -->
<input type="date">    <!--  日期格式  -->

select option

<!--下拉框 單選 -->
<!--size  框的大小 -->
<select name="city" id="" size="4" >
     <option value="1">北京</option>
     <option value="2"  selected >上海</option>  <!-- selected默認選中 -->
     <option value="3">深圳</option>
</select>

<!--下拉框 多選 -->
<!--size  框的大小 -->
<select name="city" id="" size="4"  multiple>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
</select>

上傳文件

<input type="file" name="f1">   
<form  enctype="multipart/form-data">  <!--編碼指定爲multipart/form-data-->

CSS

引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--內聯引入-->
    <style>
        div {
            color: #ffef6b
        }

    </style>

    <!--外聯引入：連接  使用較多  -->
        <link rel="stylesheet" href="index.css">
    <!--外聯引入：導入-->
    <style>
        @import url('index.css');
    </style>


</head>
<body>


<!--行內引入-->
<div style="color: red">黃燜雞米飯</div>
<div>黃燜雞排骨</div>

</body>
</html>

簡單的樣式

color: #ffef6b;      /*字體顏色*/
 width: 200px;        /*寬度*/
 height: 200px;       /*高度*/    
 background: blue;   /*背景顏色*/

選擇器

基本選擇器

標籤\id\類\通用選擇器

<style>
        div {      標籤
            color: #ffef6b;
        }

        a {
            color: green;
        }


        span {
            color: #42ff68;
        }

        #sp1 {    id
            color: chartreuse;

        }

        .cai {    類
             color: #192aff;
        }

        .x1 {
             background: #3bff00;
        }
    
        
        * {
             background: #3bff00;
        }

    </style>

<body>

<!--<div >黃燜雞米飯</div>-->
<!--<div>黃燜雞排骨</div>-->

<div>黃燜雞米飯
    <span class="cai">雞</span>
    <span>米飯</span>
    <a href="xxxx">外賣鏈接</a>
</div>
<div>黃燜雞排骨
    <span class="cai x1 x2">排骨</span>
    <span>米飯</span>
</div>
<span id="sp1">米飯</span>


</body>