HTML5新增 | 前端笔记（二）

前端学习记录之路

已于 2023-04-30 11:44:45 修改

阅读量43

点赞数

文章标签：前端 javascript html

于 2023-03-24 12:12:41 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/129748212

版权

(二）HTML5新增

1.语义化标签

标签名	标签
头部标签	`<header>`
导航标签	`<nav>`
内容标签	`<article>`
某区域标签	`<section>`
侧边栏	`<aside>`
尾部	`<footer>`

2.视频标签

<video src="视频文件地址"></video>

属性	含义
controls=“controls”	显示播放控件
autoplay=“autoplay”	自动播放（谷歌要加 muted=“muted”）
loop=“loop”	一直播放
poster= “地址”	视频未加载时显示的图片
muted=“muted”	静音

备注：文件最好为MP4格式，可修改宽和高。

3.音频标签

<audio src="音频文件地址"></audio>

属性	含义
controls=“controls”	显示播放控件
autoplay=“autoplay”	自动播放
loop=“loop”	一直播放
muted=“muted”	静音

备注：文件最好为MP3格式。

4.input表单

<input type="email/url(地址)/date/time/month/week/number/tel(手机号码)/search(搜索)/color">

属性	含义
required=“required”	不能空
placeholder=“文本”	默认灰色显示（一点击就消失）
autofocus=“autofocus”	光标自动聚焦
multiple=“multiple”	多选文件

备注:

1.input必须放在form表单域里面。

2.placeholder 要修改颜色则 input::placeholder{color：...}

案例（来自b站pink老师）

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600">
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg"> 男 </label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</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="love"> 妩媚的
                <input type="checkbox" name="love"> 可爱的
                <input type="checkbox" name="love"> 小鲜肉
                <input type="checkbox" name="love"> 老腊肉
                <input type="checkbox" name="love" checked="checked"> 都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </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>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>