HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_46126921/article/details/109453364

HTML

文档类型（DOCYTPE)
文档主体

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="##.css">
    </head>
    <body>
    </body>
</html>

文档类型（DOCYTPE)

过渡的（transitional）
严格的（strict）
框架的（frameset）

文档主体

head

title
meta charset（字符编码）

body

HTML标签

无语义标签

div（块状元素）
span（内联元素）

有语义标签

h1-h6（标题）

<h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>
    <h4>这是一个四级标题</h4>
    <h5>这是一个五级标题</h5>
    <h6>这是一个六级标题</h6>

p（段落）

<p>这是一个段落。</p>

img（图片）

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601406228427&di=2df13b17636ef7d024b2f7b7ff7e61fc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F02%2F20190202113911_evucb.thumb.400_0.jpg" title="金智秀">

a（超链接）

<a href="https://www.baidu.com" target="_blank" title="click here!">点击在新窗口打开百度</a>

ul（无序列表）
ol（有序列表）
li

<ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
    </ul>
    <ol>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ol>

table（表格）

<table border="1">
        <caption>这是一个border=1的表格</caption>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第二行</td>
                <td>第二行</td>
                <td>第二行</td>
                <td>第二行</td>
            </tr>
            <tr>
                <td>第三行</td>
                <td>第三行</td>
                <td>第三行</td>
                <td>第三行</td>
            </tr>
            <tr>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>100分</td>
                <td>100分</td>
                <td>100分</td>
            </tr>
        </tfoot>
    </table>

form（表单）

 <form method="post" action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" value="" />
        <br/>
        <label for="pass">密码:</label>
        <input type="password" name="pass" id="pass" value="" />
        <input type="submit" value="确定" name="submit" />
        <input type="reset" value="重置" name="reset" />
    </form>
    <p>数字输入框：</p>
    <input type="number" value="数字输入框" name="number" />
    <p>请输入一个网址：</p>
    <input type="url" value="网址输入框" name="url" />
    <p>请输入你的邮箱地址：</p>
    <input type="email">
  
    <form action="save.php" method="post">
        <label>性别:</label>
        <label>男</label>
        <input type="radio" value="1" name="gender" />
        <label>女</label>
        <input type="radio" value="2" name="gender" />
    </form>
    <form>
        个人描述：<br/>
        <textarea cols="50" rows="10">在这里输入内容...</textarea>
    </form><br/>
    <form method="post" action="save.php">
        爱好：
        <input type="checkbox" name="checkbox1" value="体育">体育
        <input type="checkbox" name="checkbox2" value="音乐">音乐
        <input type="checkbox" name="checkbox3" value="游戏">游戏
        <input type="checkbox" name="checkbox2" value="敲代码">敲代码
    </form>