html經常使用標籤表單和表格等及css的簡單入門

時間  2020-07-27
標籤 html 經常 使用 標籤 表單 表格 css 簡單 入門 欄目 HTML 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>

<!-- 表格table -->
<table border="1" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <th>name</th>
            <th>address</th>
        </tr>

        <tr>
            <td>jack</td>
            <td>shenzhen</td>
        </tr>

        <tr>
            <td>tom</td>
            <td>hangzhou</td>
        </tr>

        <tr>
            <td>lily</td>
            <td>chengdu</td>
        </tr>
    </tbody>
</table>
<br>
<!-- form表單 -->
<form action="http://www.baidu.com/" method="get"> 名字:<input type="text" name="username"> 密碼:<input type="password" name="password">
    <br> 愛好： <input type="checkbox" name="sports" value="zuqiu">足球 <input type="checkbox" name="sports" value="basketball">籃球 <input type="checkbox" name="sports" value="pingpang">乒乓球 <br> 性別：<input type="radio" name="gender" value="male">籃球 <input type="radio" name="gender" value="female">籃球 <br> 你在哪 <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="guangzhou">廣州</option>
        <option value="hangzhou">杭州</option>
        <option value="chengdu">成都</option>
    </select>

    <input type="submit" value="提交">
</form>


<!-- 標題標籤 -->

<h1>標題標題標題標題標題標題標題</h1>
<h2>標題標題標題標題標題標題標題</h2>
<h3>標題標題標題標題標題標題標題</h3>
<h4>標題標題標題標題標題標題標題</h4>
<h5>標題標題標題標題標題標題標題</h5>
<h6>標題標題標題標題標題標題標題</h6> 換行br<br>標籤 hr橫線標籤<hr>

<div> div <span>span</span>
</div>


<!-- 標籤列表 -->
<ul>
    <li>段落1</li>
    <li>段落2</li>
    <li>段落3</li>
</ul>

</body>
</html>

 csscss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css test</title>
    <style type="text/css">
        /* 標籤選擇器*/ div{ width: 200px; height: 150px; background: gray; margin-top: 20px;
        } .font-white{
            /*類選擇器小數點開頭*/ color: white;
        } #box2{
            /* id選擇器 # 開頭 id只能選擇一個元素 */ font-size:20px;
        } [name="password"]{
            /*屬性選擇器*/ border: 1px solid blue;
        } [chinasoft="css_study"]{
            /*自定義屬性選擇器*/ border: 1px solid yellow;
        }

    </style>
</head>
<body>
    <input type="text" class="input" name="username" chinasoft="css_study">
    <input type="text" name="password" class="input">
    <div class="font-white">一個沒有樣式的盒子</div>
    <div class="font-white" id="box2">一個沒有樣式的盒子</div>
    <div>一個沒有樣式的盒子</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程