天天看點
傳回

HTML學習---day01

1.head标簽

<!DOCTYPE html> <!--文檔聲明H5 html-->
<html lang="en"> 
<head>
    <meta charset="UTF-8"> <!--标簽屬性-->
    <title>30期皇家賭場</title> <!--浏覽器标題-->
</head>
<body>
    
</body>
</html>

2.body中的基本标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <b>加粗</b>
    <i>斜體</i>
    <br>  <!--換行-->
    <u>下劃線</u>
    <hr>  <!--長橫線-->
    <s>删除</s> <!--中橫線删除 -->
    <p>段落&nbsq;标簽</p> <!--&nbsq;空格-->
    <h1>标題1</h1>  <!--字型最大，依次往下變小-->
    <h2>标題2</h2>
    <h3>标題3</h3>
    <h4>标題4</h4>
    <h5>标題5</h5>
    <h6>标題6</h6>
</body>
</html>

3.div标簽和span标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>xx0</div> <!--獨占一行-->
    <span>xx1</span>  <!--全部都在一起-->
    <span>xx2</span>
    <span>xx3</span>
</body>
</html>

4.img标簽和a标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--埋點 兩種方式都可以,a标簽name屬性，其他标簽id屬性，屬性的值是不可重複的-->
<div id="xx">頂部位置</div>
<!-- <a name='xx'>這是頂部</a> -->

<!--相對路徑引入-->
<!--title是滑鼠放到圖檔上顯示的資訊-->
<!--alt是圖檔加載不出來給出的提示資訊-->
<!--width寬度 height高度-->
<img src="0.jpg" alt="這是加載不出來顯示的資訊" title="蠟筆小新" width="200" height="800">
<br>

<!-- 遠端路徑引入 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593367686132&di=9d65ff1b339ef41f00881a988076ca0c&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111113%2F1111131811fe8b6d1575c620d7.jpg" alt="這是一個美女" title="美女" width="300" height="300">

<!-- 超連結标簽 -->
<!-- target=_blank是在另外一個視窗打開 -->
<a href="http://www.baidu.com" target="_blank">點一下試試</a>

<!-- 跳轉錨點作用點選回到頂部可以跳轉到對應的标簽屬性，herf可以綁定對應a标簽中的name屬性值和div标簽id屬性值 -->
<a href="#xx">回到頂部</a>

</body>
</html>

5.清單标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--ul無序清單标簽，type控制前面顯示的點  -->
<ul type="disc">
    <li>小白</li>
    <li>小紅</li>
    <li>小綠</li>
</ul>

<!-- 有序清單 前面标記了123等 start起始值 type屬性表示前面已什麼顯示 -->
<ol start="2" type="1">
    <li>小白</li>
    <li>小紅</li>
    <li>小綠</li>
</ol>

<!-- 标題清單 dd有縮進效果 -->
<dl>
    <dt>标題1</dt>
    <dd>内容1</dd>
    <dt>标題2</dt>
    <dd>内容2</dd>
</dl>


</body>
</html>

6.table表格标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- border邊框 cellpadding内邊框與内容距離 -->
<!-- cellspacing外邊框和内邊框距離 -->
<table border="1" cellpadding="10" cellspacing="10">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小白</td>
            <td>23</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>25</td>
            <td rowspan="2">女</td> <!--rowspan合并行-->
        </tr>
        <tr>
            <td colspan="2">小紅</td> <!--colspan合并列-->
            <!-- <td>34</td> -->
            <!-- <td>男</td> -->
        </tr>
    </tbody>


</table>



    
</body>
</html>

7.input标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- readonly 隻讀 不能寫 -->
使用者名:<input type="text" readonly="readonly">
<!-- disabled 表示選擇框置灰 -->
密碼:<input type="password" disabled="disabled">
日期選擇框:<input type="date">

<br>

<!-- 多選框 也需要加name屬性 表示一組 -->
<!-- checked="checked"意思是預設選中 -->
愛好:
<input type="checkbox" name="hobby" checked="checked">男人
<input type="checkbox" name="hobby">女人
<input type="checkbox" name="hobby">人妖

<br>
<!-- 單選 name屬性值相同時是一組才有單選效果 -->
<!-- checked="checked"意思是預設選中 -->
性别:
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女

<br>
<!-- 送出按鈕 value屬性可以更改，顯示預設是送出 -->
<input type="submit" value="确定">

<br>
<!-- 重置按鈕 放在form标簽裡面才有效果 -->
<input type="reset">
<br>

<!-- 普通按鈕 也可以用value修改顯示 -->
<input type="button" value="滾犢子">
<br>

<!-- 隐藏輸入框 頁面不顯示 f12中可以檢視 -->
<input type="hidden">
<br>

<!-- 檔案選擇框上傳檔案 -->
<input type="file">

</body>
</html>

8.下拉框select标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<!-- 下拉框選項 -->
<select name="" >
    <option value="">男人</option>
    <option value="">女人</option>
</select>

<!-- 多選下拉框選項 multiple="multiple"多選 -->
<select name="" multiple="multiple">
    <option value="">男人</option>
    <option value="">女人</option>
</select>


</body>
</html>

9.label标簽和textarea标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 綁定id 作用是點選使用者名可以把光标顯示在文本框中 -->
<label for="username">使用者名:</label>
<input type="text" id="username">

<!-- 多行文本輸入框 用在留言評論 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

-------------------------------------------

html a标簽 h5
上一篇: HTML初始----day01
下一篇: 07JSP-5. JSP九大隐含對象

繼續閱讀