HtmlCss基礎學習第一章

Html+Css

大家都知道Web網頁是有結構標準（HTML標準）樣式標準（CSS標準）行為標準(JS標準)三部分組成。本篇文章講的是HTML和CSS雅潭，HTML（英文Hyper Text Markup Language的縮寫）中文譯為 “超文本標記語言” ，通過標簽對網頁中的文本信夫、圖片梭依、聲音等元素進行描述。CSS 樣式表或層疊樣式表呼伸，用于設置頁面中的文本（字體、大小钝尸、對齊方式等）括享、圖片的外形（寬高、邊框樣式珍促、邊距等）以及版面的布局等外觀顯示樣式铃辖。
如果你想從零基礎學習Web那就跟著我一起學習吧！

案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss

其它Web文章
CSS基礎學習之第二章
 CSS浮動的使用和解決浮動的五種方法
 CSS定位relative猪叙、absolute娇斩、fixed使用總結
 原生開發(fā)WebApi知識點總結
 開發(fā)中常用jQuery知識點總結
 C3動畫+H5+Flex布局使用總結
 ES6常用知識總結
 Vue學習知識總結
 開發(fā)環(huán)境到生產環(huán)境配置webpack
待續(xù)......

本編文章會講到的知識點

表格table
表單標簽
CSS字體樣式屬性
選擇器
CSS外觀屬性

表格table

1.table用于定義一個表格。
2.tr 用于定義表格中的一行穴翩，必須嵌套在 table 標簽中犬第，幾對 tr 就有幾行。
3.td 用于定義表格中的單元格芒帕，必須嵌套在 tr 標簽中歉嗓，一對 tr 中幾對 td，就表示該行中有多少列

表格屬性：

表格邊框： border
單元格與單元格間隙： cellspacing
單元格內內容與邊框的間距： cellpadding
表格寬度高度： width height
表格對齊方式align： left right center

使用表格背蟆，可劃分表格頭部鉴分、主體部分，使用表格結構更具語義淆储，結構更清晰：

<thead></thead>：用于定義表格的頭部冠场。必須位于table標簽中
<tbody></tbody>：用于定義表格的主體。必須位于table標簽中
caption 用于表格標題本砰，必須寫在 table 標簽內碴裙，用于概括表格內容。

合并單元格（難點）：

跨行合并：rowspan 点额，留住合并的單元格中舔株，最上面的，刪除其他
跨列合并：colspan还棱，留住合并的單元格中载慈，最左邊的，刪除其他

案例：

<table width="500" height="500" border="1" cellspacing="0" cellpadding="10" align="center">
            <caption>2017年 摩托羅拉 銷售記錄表</caption>
            <thead>
                <tr>
                    <th>業(yè)務員</th>
                    <th>銷售額</th>
                    <th>部門總計</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>霉超瘋</td>
                    <td>100</td>
                    <td rowspan="3">600</td>
                </tr>
                <tr>
                    <td>鍋盡</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>黃蓉</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>評語：</td>
                    <td colspan="2">恩珍手！干的不錯办铡！周末吃火鍋辞做！</td>
                </tr>
            </tbody>
        </table>

表單標簽（掌握）

也叫表單元素。指文本輸入框寡具、密碼輸入框秤茅、復選框、提交按鈕童叠、重置按鈕等控件框喳。一個完整的表單，應該由表單控件提示信息厦坛，表單域三部分組成

input 控件(重點)：

type類型分別有哪些五垮？

文本輸入框： text
密碼輸入框： password
單選框： radio
復選框： checkbox
普通按鈕： button
提交按鈕： submit
重置按鈕： reset
圖像形式的提交按鈕：image
文件上傳控件：file

input屬性有哪些？

placeholder 提示文本
value 屬性規(guī)定輸入字段的初始值
readonly 屬性規(guī)定輸入字段為只讀（不能修改）
disabled 屬性規(guī)定輸入字段是禁用的杜秸。被禁用的元素是不可用和不可點擊的放仗。被禁用的元素不會被提交。
maxlength 屬性規(guī)定輸入字段允許的最大長度
size 屬性規(guī)定輸入字段的尺寸（以字符計）
......

代碼案例：

<form action="#">
                <!-- type 值為 text 表示 文本輸入框 -->
        <!-- name 屬性用于表單提交 -->
        <!-- placeholder 提示文本 -->
        用戶名:<input type="text" name="username"  placeholder="請輸入用戶名">
        用戶名:<input type="text" name="username" placeholder="請輸入用戶名"  value="123" maxlength="6"> <br>
            <!-- type:password 密碼框 -->

        <!-- maxlength 最大輸入字符數 -->
        密　碼:<input type="password" name="password" value="123456" maxlength="6"> <br>
        <!-- radio 表示 單選框 -->
        <!-- name屬性 可以給 單選框 分組 -->
        性別：
        <!-- checked 只關心有沒有亩歹，不關心是什么 -->
        <input type="radio" name="gender" checked > 男  
        <input type="radio" name="gender"> 女
        <input type="radio"> 未知 <br>
        興趣愛好：
        <input type="checkbox" name='hobby' checked> 籃球
        <input type="checkbox" name='hobby' checked> 排球
        <input type="checkbox" name='hobby' checked> 羽毛球 <br><br>
        <!-- button  表示 按鈕 -->
        <input type="button" value="你好匙监，我是按鈕"> 
        <!-- submit 提交按鈕 -->
        <input type="submit" value="我要提交"> 
        <!-- reset 重置按鈕 -->
        <input type="reset" value="重置按鈕"> <br><br><br>
        <!-- image 圖片提交按鈕 -->
        <input type="image" src="im.jpg"> <br>
        <!-- 文件上傳 -->
        <input type="file" >
    </form>

textarea控件(文本域-了解)

extarea用于創(chuàng)建多行文本輸入框,他的屬性 cols 和 rows 可以調整寬高凡橱，但是兼容性很差小作，且不準確，可以設置CSS稼钩，通過 width height控制寬高顾稀。

<textarea cols="每行中的字符數" rows="顯示的行數">
  文本內容
</textarea>
    <textarea cols="10" rows="5" placeholder="請輸入內容"></textarea>

下拉菜單

使用select控件定義下拉菜單

<select</select>中至少應包含一對<option></option>
在option 中定義selected屬性時，當前項默認選中

    <select>
        <option value="1">你好</option>
        <option value="2">你好1</option>
        <option value="3">你好2</option>
        <option value="4">你好3</option>
        <option value="5">你好4</option>
    </select>

fieldset（了解）

fieldset 可將表單內的相關元素分組,<legend> 標簽可以為 fieldset 元素定義標題坝撑。

<form>
  <fieldset>
    <legend>人員信息</legend>
    姓名：<input type="text" />
    年齡：<input type="text" />
  </fieldset>
  <fieldset>
    <legend>身體信息</legend>
    身高: <input type="text" />
    體重: <input type="text" />
  </fieldset>
</form>

HTML5新增語義標簽

header：定義文檔的頭部
nav：定義導航鏈接的部分
footer：定義文檔的底部
article：定義文章內容
section：定義文檔中的區(qū)塊
aside：一般用作側欄

h5新標簽.png

datalist(了解)

datalist 定義選項列表静秆，表示數據源，頁面中不可見巡李。配合 input 使用抚笔。input 通過在 list 屬性中寫datalist的 id 進行關聯(lián)

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="BYD">
  <option value="SL">
</datalist>

HTML5新增的type屬性值（了解）

<form action="13_html5語義化標簽.html">
            <!-- type=email 會對輸入的內容進行 郵箱格式驗證 -->
            郵箱:  <input type="email" >  <br>
            <!-- type=number 限制輸入內容必須是 數字 -->
            數字:  <input type="number" > <br>
            <!-- type=url 限制提交內容必須是 網址 -->
            網址:  <input type="url" > <br>
            <!-- type=search 具有搜索框的語義  有可以清空內容的效果 -->
            搜索:  <input type="search" ><br>
            <!-- type=range 小滑塊 一般用于 音量調整，視頻進度條 -->
            滑塊:  <input type="range" ><br>

            時間:  <input type="time" ><br>
            年月日： <input type="date"><br>
            <!-- type month 選月份 -->
            月份:  <input type="month" ><br>
            星期:  <input type="week" ><br>
            <!-- type color 取色板 -->
            顏色:  <input type="color" > <br>
            
            <input type="submit" value="提交"><br>
    </form>

HTML5新增表單新屬性（理解）

dy>
    <form action="13_html5語義化標簽.html">

        <!-- placeholder 提示文本 -->
        <!-- autofocus 自動聚焦 -->
        姓名：<input type="text" placeholder="請輸入姓名" autofocus>
        
        <!-- multiple 多文件上傳 -->
        <input type="file" multiple>

        <!-- autocomplete 默認是開啟的 -->
        用戶名：<input type="text" autocomplete="on" name="username"> <br>
        
        <!-- required 必填項 -->
        email:<input type="email" required>

        <input type="submit">

    </form>

CSS字體樣式屬性

css樣式規(guī)則.png

注意點：

選擇器指定作用對象侨拦，花括號內設樣式殊橙。
屬性和屬性值是鍵值對。
屬性和屬性值用英文 : 連接狱从。
多個鍵值對用英文 ; 區(qū)分膨蛮。

font-size:字號大小

font-size屬性用于設置字號，推薦使用像素單位px季研。

常見單位如下：

px 像素敞葛，最常用
em （了解）相對于當前對象內文本的字體尺寸，最終轉換成px
rem（了解）相對于根字體大小与涡，最終轉換成px

    p {
            /*font-size: 20px;*/
            /* 如果當前字體大小是 16  1em = 16px*/
            font-size: 2em; 
        }
    span {
            font-size: 0.5rem;
        }

font-family:字體

font-family屬性用于設置字體惹谐。網頁中常用的字體有宋體持偏、微軟雅黑、黑體等氨肌，例如將網頁中所有段落文本的字體設置為微軟雅黑综液，可以使用如下CSS樣式代碼：p{ font-family:"微軟雅黑";}
可以同時指定多個字體，中間以逗號隔開儒飒，表示如果瀏覽器不支持第一個字體谬莹，則會嘗試下一個，直到找到合適的字體桩了。

常用技巧：

網頁中普遍使用14px+附帽。
盡量用偶數字號。ie6奇數有bug井誉。
字體之間英文逗號隔開蕉扮。
如果字體名中包含空格、#颗圣、$等符號喳钟，則該字體必須加英文單引號或雙引號，例如font-family: "Times New Roman";在岂。
盡量使用系統(tǒng)默認字體奔则，保證在任何用戶的瀏覽器中都能正確顯示。

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外蔽午，可以使用CSS 來實現,ont-weight屬性用于定義字體的粗細易茬，其可用屬性值：normal、bold及老、bolder抽莱、lighter、100~900（100的整數倍）骄恶。數字 400 等價于 normal食铐，而 700 等價于 bold。

span {
            font-size: 50px;
            font-weight: bold;
        }

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外僧鲁，可以使用CSS 來實現虐呻，但是CSS 是沒有語義的。
font-style 用于定義字體風格:normal：標準字體（默認）悔捶、italic：斜體铃慷。

font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置

選擇器 {font: font-style font-weight font-size/line-height font-family;}

   p{
              font: italic bold 30px/50px "黑體";
        }

注意：

順序不能更換，各個屬性空格隔開蜕该。
必須保留 font-size 和 font-family 屬性犁柜，否則font屬性將不起作用
其他不需要設置的屬性可以省略（取默認值）

選擇器（重點）

標簽選擇器（元素選擇器）

標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類堂淡，為頁面一類標簽指定統(tǒng)一樣式馋缅。

              /* 標簽名 { 
             屬性名1：屬性值1;
             屬性2: 屬性值2;
             .....
         }
        */
        p {
            color: red;
            font-size: 20px;
        }

優(yōu)點：快速為同類型的標簽統(tǒng)一樣式扒腕。
缺點：不能差異化樣式。

類選擇器

用 “.” 標識萤悴，緊跟類名,可以給標簽指定多個類名瘾腰，達到選擇目的

        .zs {
            color: deeppink;
        }
        ``````
        <p class="zs">鄭爽</p>

類選擇器優(yōu)勢：可定義單獨的樣式，也可定義可復用的樣式覆履。
注意：不要純數字蹋盆、中文等命名，不要以數字開頭硝全，盡量使用英文字母來表示栖雾。

id 選擇器

id選擇器使用“#”進行標識，后面緊跟id名伟众。id名即為 HTML元素的 id屬性值析藕，大多數HTML元素都可以定義id屬性，元素的id值是唯一的凳厢，只能對應于文檔中某一個具體的元素账胧。

                .ss {
                font-size: 50px;
                font-weight: bold;
            } 
            ``````
            <p class="ss" id="ss">id選擇器</p>

id選擇器和類選擇器區(qū)別

同一個頁面，id唯一先紫，class可以多次使用治泥。
類選擇器（class）：人的名字，是可以多次重復使用的泡孩，比如張偉王偉李偉李娜
id選擇器：身份證號碼车摄，全中國是指 id 唯一的寺谤， id 名不得重復

通配符選擇器

通配符選擇器用“*”號表示仑鸥，他是所有選擇器中作用范圍最廣的。
作用：匹配頁面中所有的元素变屁。

  /* 
            * 通配符選擇器 可以選中頁面中 所有的標簽 
            1. 通配符一般用于 全局統(tǒng)一樣式眼俊，進行樣式初始化
            2. 還可以清除默認 外邊距 和 內邊距
        */
        * {
            margin: 0;
            padding: 0;
        }

        * {
            color: red;
            font-family: "黑體";
            border: 1px solid blue;
        }

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果粟关，比如可以選擇第1個疮胖，第n個元素吊宋。
為了和類選擇器相區(qū)別葫录，選擇器是一個點比如 .demo {} ,偽類用冒號比如 :link{}

鏈接偽類選擇器：

:link /* 未訪問的鏈接 */
:visited /* 已訪問的鏈接 */
:hover /* 鼠標懸停起作用 */
:active /* 鼠標點擊時作用 */

  /* 還沒訪問過的鏈接 */
        a:link{
          color: pink;
          font-size: 40px;
        }

        /* 訪問過的鏈接 */
        /* 
            1. visited 只能設 顏色, 其他一般不生效 
            2. background-color 設置給 visited 必須首先有背景顏色
        */
        a:visited {
          color: yellow;
          background-color: red;
          font-size: 60px;  /*  無效的 */
        }

        /* :hover 表示鼠標懸停起作用 */
        a:hover {
          color: green;  
          font-size: 60px;
        }
        /* :active 表示鼠標點擊時作用 */
        a:active {
          color: white;
          font-size: 80px;
        }

注意寫的時候瘟滨，他們的順序盡量不要顛倒按照 lvha 的順序元咙。 lv 包 ha 哈哈

結構偽類選擇器（CSS3)

:first-child :選取屬于其父元素的首個子元素的指定選擇器
:last-child :選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) ：匹配屬于其父元素的第 N 個子元素怠硼，不論元素的類型
:nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素谷扣，不論元素的類型撇眯，從最后一個子元素開始計數屠尊。
n 可以是數字县遣、關鍵詞或公式
nth-child(even) nth-child(odd) nth-child()

  /* :first-child 
            判斷自己是不是 父容器中的 第一個孩子 
            是就起作用
        */
        li:first-child {
            color: red;
        }
        /*
            :last-child 
            判斷自己 是不是 父容器中的 最后一個孩子
            是就起作用
        */
        li:last-child {
            color: pink;
        }
        /*
            :nth-child(n)
            判斷自己 是不是 父容器中的 第 n 個孩子
            是就起作用
        */
        li:nth-child(3) {
            color: blue;
        }
        li:nth-child(4) {
            color: green;
        }
        /*
            :nth-last-child(n)
            判斷自己 是不是 父容器中的 倒數第 n 個孩子
            是就起作用
        */
        li:nth-last-child(2) {
            color: yellow;
        }
  /*
            :nth-child(even)  even 偶數
            如果自己是 父容器中 第偶數個
            就生效
        */
       li:nth-child(even) {
            color: green;
        }

         /*
            :nth-child(odd)  odd 奇數
            如果自己是 父容器中 第奇數個
            就生效
        */
       li:nth-child(odd){
            color: pink;
        }
        
        ``````
        <ul>
            <li class="one">第一個孩子</li>
            <li>第二個孩子</li>
            <li>第三個孩子</li>
            <li>第四個孩子</li>
            <li>第五個孩子</li>
            <li>第六個孩子</li>
            <li>第七個孩子</li>
            <li>第八個孩子</li>
        </ul>

目標偽類選擇器

:target目標偽類選擇器 :選擇器可用于選取當前活動的目標元素糜颠，#id 被選中,下面這個案例就是當點擊a鏈接跳到h1時顏色變紅汹族。

 #big-bam-boom:target {
            color: red;
        }
        ``````
        <h1 id="big-bam-boom">Kaplow!</h1>
        <a href="#big-bam-boom">點擊我</a>

CSS外觀屬性

color:文本顏色

color屬性用于定義文本的顏色，其取值方式有如下3種：
1.預定義的顏色值其兴，如red顶瞒，green，blue等元旬。
2.十六進制榴徐，如#FF0000，#FF6600匀归，#29D794等箕速。實際工作中，十六進制是最常用的定義顏色的方式朋譬。
3.RGB代碼盐茎，如紅色可以表示為rgb(255,0,0)。

line-height:行間距

ne-height屬性用于設置行間距徙赢，就是行與行之間的距離字柠，即字符的垂直間距，一般稱為行高狡赐。line-height常用的屬性值單位有三種窑业，分別為像素px，相對值em和百分比%枕屉，實際工作中使用最多的是像素px常柄。當height和line-height的值相同時，內容就會垂直居中

text-align:水平對齊方式

text-align屬性用于設置文本內容的水平對齊搀擂，相當于html中的align對齊屬性西潘。其可用屬性值如下：
left：左對齊（默認值）
right：右對齊
center：居中對齊

text-indent:首行縮進

屬性值可為不同單位的數值、em字符寬度的倍數哨颂、或相對于瀏覽器窗口寬度的百分比%喷市，允許使用負值,建議使用 em 作為設置單位。1em 就是一個字的寬度

letter-spacing:字間距

letter-spacing 用于定義字間距威恼，就是字符與字符之間的空白品姓。
屬性值可為不同單位的數值，允許使用負值箫措，默認為normal腹备。

word-spacing:單詞間距

word-spacing 屬性用于定義單詞之間的間距，可為不同單位的數值斤蔓，允許使用負值植酥，默認為normal。

顏色半透明

文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：
color: rgba(r,g,b,a) a 是alpha 透明的意思取值范圍 0~1之間 color: rgba(0,0,0,0.3)

文字陰影

可以給我們的文字添加陰影效果了 Shadow 影子
text-shadow:水平位置垂直位置模糊距離陰影顏色;

案例

下面這個案例用到了上面介紹的屬性,然后在瀏覽器中按F12可以查看代碼結構和css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .news {
            width: 800px;
            margin: 0 auto;
        }

        .header {
            height: 90px;
        }
        .title {
            font-size: 25px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            font-style: italic;
            font-family: "微軟雅黑";
            text-shadow: 0 0 5px #fff,
                     0 0 20px #fefcc9,
                      10px -10px 30px #feec85,
                       -20px -20px 40px #ffae34, 
                       20px -40px 50px #ec760c,
                        -20px -60px 60px #cd4606, 
                        0 -80px 70px #973716, 
                        10px -90px 80px #451b0e,
                        5px 5px 0px #747272;
        }
        .info {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            text-indent: 0;
        }
        .info_date {
            color: #AABBCC;
        }
        .info_person {
            color: #990000;
            letter-spacing: 3px;
            word-spacing: 10px;
        }

        .content {
            font-size: 14px;
            line-height: 23px;
            margin-top: 15px;
        }

        p {
            text-indent: 2em;
        }

        .content_link {
            color: #3399CF;
        }
    </style>
</head>
<body>
    <div class="news">

        <div class="header">
                <h1 class="title">中乙隊賽前突然換帥仍勝毅騰 高原黑馬欲阻擊舜天</h1>
                <p class="info">
                    <span class="info_date">2014年07月16日20:11</span> 
                    <span class="info_person">I Love you</span> 
                    <span><a href="#">收藏本文</a></span>
                </p>
        </div>

        <hr>

        <div class="content">
            <p>新浪體育訊　7月16日是燕京啤酒<a href="#" class="content_link">[微博]</a>2014中國足協(xié)杯第三輪比賽附迷，麗江嘉云昊隊主場迎戰(zhàn)哈爾濱毅騰隊的比賽日惧互。然而就在比賽日中午哎媚，麗江嘉云昊隊主帥李虎和另外兩名成員悄然向俱樂部提出了辭呈，并且收拾行囊準備離開喊儡。在這樣的情況下拨与，麗江嘉云昊隊不得不由此前的教練員楊貴東代理指揮了本場比賽。</p>
            <p>在昨日麗江嘉云昊隊主帥李虎就缺席了賽前的新聞發(fā)布會艾猜，當時俱樂部給出的解釋是李虎由于身體欠佳买喧，去醫(yī)院接受治療。然而今日李虎出現在俱樂部時匆赃，向記者否認了這一說法淤毛，并且坦言已經向俱樂部提出了辭呈。</p>
            <p>據記者多方了解的情況算柳，李虎<a href="#" class="content_link">[微博]</a>極其教練組近來在執(zhí)教成績上承受了不小的壓力低淡，在聯(lián)賽間歇期期間，教練組曾向俱樂部提出能夠多引進有實力的球員補強球隊瞬项，然而由于和俱樂部在投入以及成績指標上的分歧蔗蹋，李虎最終和教練組一起在比賽日辭職。</p>
            <p>這樣的情況并沒有影響到麗江嘉云昊隊<a href="#" class="content_link">[微博]</a>的隊員囱淋，在比賽中麗江隊在主場拼的非常兇猪杭，在暴雨之中仍然發(fā)揮出了體能充沛的優(yōu)勢，最終憑借點球擊敗了中超球隊哈爾濱毅騰妥衣，順利晉級下一輪比賽皂吮。根據中國足協(xié)杯的賽程，麗江嘉云昊隊將在本月23日迎戰(zhàn)江蘇舜天隊税手。</p>
        </div>

    </div>
    
</body>
</html>

圖片.png