一文入门HTML

本文详细介绍了HTML中的各种基础标签,包括根标签、头标签、身体标签,以及常用的块、标题、段落、隔离、换行、列表、表格、媒体、框架、表单和语义化标签的用法,同时提及了标准属性如id、class、style和title的使用。
摘要由CSDN通过智能技术生成

一、常用HTML标签:

一、3个基础标签:

根标签:<html>;

头标签:<head>;

身体标签:<body>

二、6种标签:

块标签:<div>

标题标签:<h1-h6>

段落标签:<p>

隔离标签:<span>

强制换行标签:<br>

水平分割线标签:<hr>

例如:

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <span>这是普通文本,标题只有六级</span>
    <div>
        这是大块<br>
        <div>
            这是中块<br>强制换行啦
            <div>
                这是小块<hr>上面是水平分割线
                <p>段落嵌套分割符<br><span>这是分割符内<br><span>分割符内嵌套分割符<br></span></span></p>
            </div>
        </div>
    </div>
</body>
三、8个文本样式标签:

加粗:<b>/<strong>

斜体:<i>/<em>

下划线:<u>

删除线:<del>

上标:<sup>

下标:<sub>

例如:

<body>
    <div>
        <div>
            <h1>span显示普通文本</h1>
            <p><span>普通文本</span></p>
        </div>
        <div>
            <h1>b与strong显示粗体</h1>
            <b>粗体</b>
            <strong>也是粗体</strong>
        </div>
        <div>
            <h1>i与em显示斜体</h1>
            <i>斜体</i>
            <em>也是斜体</em>
        </div>
        <div>
            <h1>del删除线与u下划线</h1>
            <del>删除线</del>
            <u>下划线</u>
        </div>
        <div>
            <h1>sub下标与sup上标</h1>
            <sub>下标</sub><sup>上标</sup><span>H<sub>2</sub>CO<sub>3</sub>==2H<sup>+</sup> + CO<sub>3</sub><sup>2-</sup></span>
        </div>
    </div>
</body>
四、6种列表标签:

无序列表:<ul>

有序列表:<ol>

列表项目:<li>

自定义列表:<dl>

自定义列表项目:<dt>

自定义列表项目说明:<dd>

例如:

<body>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>

    <hr>

    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>

    <hr>
    <dl>
        <dt>html</dt>
        <dd>html是网页的骨架</dd>
        <dt>css</dt>
        <dd>css是网页的皮肤</dd>
        <dt>javascript</dt>
        <dd>javascript是网页的血液</dd>
    </dl>
    <hr>
</body>
五、4个表格标签

表外框:<table>

行标签:<tr>

表头单元格标签:<th>

普通单元格标签:<td>

table标签属性:border(边框)、cellspacing(单元格间距)、cellpadding(单元格内补)、width(宽度)、align(对齐)

td标签属性:colspan(合并列)、rowspan(合并行)

例如:

 <table border="5" cellspacing="3" cellpadding="5" width="50%" align="center">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
           <td>11</td>
           <td>雷娜</td>
           <td>20</td>
        </tr>
        <tr>
            <td>11</td>
            <td>雷娜</td>
            <td>20</td>
        </tr>
        <tr>
            <td>11</td>
            <td>雷娜</td>
            <td>20</td>
        </tr>
    </table>
六、4个媒体标签

超链接:<a>

图片:<img>

音频:<audio>

视频:<video>

src后跟图片音频视频地址

例如:

<body>
    <div>
        <span id="top">顶部</span>
        <span><a href="#middle">去中间</a></span>
    </div>
    
    <div>
        <h1>图片展示</h1>
        <img src="./img/bg2.jpg" alt="" width="300" height="200">
        <br>
        <img src="./img/IMG_9197(20240319-161341).JPG" alt="" width="300" height="200">
        <br>
        <!-- <img src="https://ossweb-img.qq.com/upload/adw/image/194/20240318/cf96dcef54360fa5962627370bca5484.jpeg" alt="图片飞走了" width="300" height="200"> -->
    </div>

    <div>
        <h1>视频展示</h1>
        <video src="./video/视频1.mp4" controls width="300" height="200"></video>
    </div>

    <div>
        <h1>声音展示</h1>
        <audio src="./audio/bgm.wav" controls></audio>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <ol id="middle">
        <li>
            <a href="http://www.baidu.com">百度</a>
        </li>
        <li>
            <a href="https://pvp.qq.com/">王者荣耀</a>
        </li>
        <li>
            <a href="https://val.qq.com/">无畏契约</a>
        </li>
        <li>
            <a href="./1.html与html5初始.html">第一个html</a>
        </li>
        <li>
            <a href="#top">跳转到顶部</a>
        </li>
        <li>
            <a href="#b">跳转到底部</a>
        </li>
    </ol>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <span id="b">底部</span>
    <span><a href="#middle">去中间</a></span>
</body>
七、1个框架标签

框架标签:<iframe>

<body>
    <div>
        <h1>使用iframe引入其他页面</h1>
        <iframe src="./1.html与html5初始.html" frameborder="0"></iframe>
    </div>
    <hr>
    <div>
        <h1>使用iframe引入其他页面</h1>
        <iframe width="100%" height="800" src="./6.4个媒体标签.html" frameborder="0"></iframe>
    </div>
</body>
</html>
八、1个表单标签

表单域:<form>

表单标签:<input>、<select>、<textarea>

    <form action="" method="get">
        <p>
            <label for="username">用户名</label>
            <input name="username" id="username" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input name="pwd" id="password" type="password">
        </p>
        <p>
            <span>性别:</span>
            <label for="man">男</label> <input value="man" name="sex" id="man" type="radio">
            <label for="woman">女</label> <input value="woman" name="sex" id="woman" type="radio">
        </p>
        <p>
            <span>爱好:</span>
            <label for="lanqiu">篮球</label>
            <input value="lanqiu" name="hobby" id="lanqiu" type="checkbox">
            <label for="zuqiu">足球</label>
            <input value="zuqiu" name="hobby" id="zuqiu" type="checkbox">
            <label for="paiqiu">排球</label>
            <input value="paiqiu" name="hobby" id="paiqiu" type="checkbox">
        </p>
        <p>
            <label for="color">喜欢的颜色</label>
            <input type="color" name="color" id="color">
        </p>
        <p>
            <label for="file">上传文件</label>
            <input type="file" name="file" id="file">
        </p>
        <p>
            <label for="address">居住地</label>
            <select name="address" id="address">
                <option value="zhengzhou">郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="kaifeng">开封</option>
            </select>
        </p>
        <p>
            <label for="info">评论区</label>
            <textarea name="info" id="info" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>

    </form>
九、语义化标签

头部:<header>

导航栏:<nav>

主体:<main>

区域:<section>

文章:<article>

侧边栏:<aside>

底部栏:<footer>

十、标准属性

id:单个HTML文件内部一定要唯一

class:一个标签可以有多个类名,多个类名之间可以使用空格隔开,一个类名可以用于多个标签

style:样式

title:鼠标划入提示信息

  • 13
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值