天天看點

HTML标簽通關筆記

個人筆記全部手打 有點亂~~~~ 我相信每個人都有屬于每個人的筆記喔~~~~~~~~~~~~~~~~~~~~~~~~~

1.title 雙标簽 作用:頭部命名

2.body 雙 主體标簽 ~~~

3.h1~h6 雙 作用:字型從大到小且一個标題占一行

4.p 雙 段落标簽 作用:分段且段落間保有空隙

5.<br /> 單 換行标簽 作用:另起一行顯示

6.文本格式化标簽:strong 雙 加粗 ;em 雙 傾斜; del 雙 删除線

;ins 雙 下劃線 hr 單标簽 水準線

7.div和span标簽 雙 沒有語義,它們是一個盒子,用來裝内容的,div獨占一行 ;span全部在一行 ,大盒子與小盒子的差別

8.<img src=“圖像URL”/> 單 圖像标簽 ,當圖檔顯示不出來的時候<img src=“圖像URL” alt=“你好”/>加alt文字提示,同理加title滑鼠放在圖檔顯示文字 加weight寬 height高 border邊框 …/是傳回上一級 /是下一級

9.超連結标簽 a 雙 <a href = “跳轉目标” target = "目标視窗的彈出方式“>文本或者圖像</a> 例子:<a href = “http://erfwfw. com” target = "_black“>騰訊</a> target _self目前視窗打開頁面 _black新視窗打開頁面 内部連結:打開方式< a href = "xxx.html“>内部</a> “#”為空 下載下傳連結:<a href = "位址是一個檔案或者壓縮包 會下載下傳這個檔案“>下載下傳</a> 例子:<a href = “http…“><img src = “asdf.jpg” /></a> 錨點連結:我們點選連結,快速定位位置

1.<a href = “#名字”>xxx</a> 目标位置标簽<h3 id = "名字“>xx介紹</h3 >

10.注釋:快捷鍵ctrl + / <! – --> // /* /

特殊字元 &nbsp 小于号&it 大于号&gt 和号&amp 人名币&yen 版權&copy 注冊商标&reg 攝氏度&deg 正負号&plusmn 乘号&times 除号 &divide 平方2&sup2 立方3&sup3

11.表格标簽:table --tr–td 雙标簽 table定義表格 tr定義表格中的行 td 表格中的格子 在tr标簽中寫th表示表格的表頭部分

在table中可以加樣式 align對其方式後面的css有寫到的 left right center 邊框border有1和“” cellpadding規定單元邊沿與其内容之間的空白0 cellspacing 規定單元格之間的空白0 width單元格之間的寬度 height高度 表格結構标簽 thead 和 tbody 使其更清晰

跨行合并單元格:rowspan=“數字”

跨列合并單元格:colspan=“數字”

找到需要合并的單元格(td)後删除後面多餘單元格

12.清單标簽 ul li 清單項 ul li 無序清單 注意⚠️ul内隻能放li

ol li 清單項li ol 有序清單 注意⚠️也是ol隻能放li

dl dt名詞1dt dd名詞1解釋dd dl自定義清單

13.表單标簽 form 雙标簽 用于定義表單域 作用:會把

它範圍内的表單元素送出給伺服器 例子:<form action = "url位址“ method=”送出方式“name=”表單名稱“></form>

input單标簽 <input type = "屬性值 “>屬性值:button 可點選按鈕 checkbox 複選框 file輸入字段和“浏覽”按鈕 ,供檔案上傳 hidden隐藏的輸入字段 image圖像形式的送出按鈕 password密碼字段,字段被掩碼 radio 單選按鈕 reset 重置按鈕 submit 送出按鈕 text 文本框 在input 内加name 是命名的意思 value在輸入框給出提示(也可以更改和添加文字)注意⚠️單選按鈕和複選框要相同的name值 也可以設定checked = “chenked”屬性 當打開時預設選中 maxlength = “整數” 規定輸入字段中的最大長度 :::label 雙标簽 增加使用者的體驗 文法label for = “sex“ 男 label <input type=“radio” name = ‘sex’ id = “sex”/> 主要是for 和 id要對上

select 雙标簽 下拉清單 文法 : select option 選1 option 。。。

select 在option的内部加selected = “selected”是預設標明的狀态 texttarea 雙标簽 特大号文本框 作用:留言闆 評論類 文法form texttarea rows = 3 cols = 20 文本内容texttarea form

** HTML的筆記就到這裡了*

後續會更新CSS的案例

綜合案列

HTML标簽通關筆記
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注冊頁面
    </title>
</head>

<body>
    <h4>青春不常在 拼搏向上</h4>
    <table align="left" width="500">
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" id="nan"><label for="nan"><img src="image/男.png" width="20" height="20">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="image/女.png" width="20" height="20">女</label></td>
        </tr>
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--請選擇年--</option>
                    <option>1998</option>
                    <option selected="selected">1999</option>
                    <option>2000</option>
                </select>
                <select>
                    <option>--請選擇月--</option>
                    <option>1月</option>
                    <option>2月</option>
                    <option>3月</option>
                </select>
                <select>
                    <option>--請選擇日--</option>
                    <option>1日</option>
                    <option>2日</option>
                    <option>3日</option>
                </select>

            </td>
        </tr>
        <tr>
            <td>所在地區</td>
            <td><input type="text" value="廣東省茂名市"></td>
        </tr>
        <tr>
            <td>婚姻狀況</td>
            <td><input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">離婚</td>
        </tr>
        <tr>
            <td>學曆</td>
            <td><input type="text" value="國小畢業"></td>
        </tr>
        <tr>
            <td>你喜歡的水果</td>
            <td><input type="checkbox" name="fruit">蘋果<input type="checkbox" name="fruit">雪梨<input type="checkbox" name="fruit">香蕉<input type="checkbox" name="fruit">草莓</td>
        </tr>
        <tr>
            <td>自我介紹</td>
            <td>
                <form><textarea rows="5" cols="40">
                    請開始你的表演吧!
            </textarea></form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免費注冊"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意加入和遵守相關條例
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">會員登陸</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我同意</h5>

                <ul>
                    <li>
                        1
                    </li>
                    <li>
                        2
                    </li>
                    <li>
                        3
                    </li>
                </ul>


            </td>
        </tr>
    </table>
</body>

</html>