挑戰前端基礎120題--HTML5基礎合集一

前端进阶中發表於2024-04-24
前端HTML

1. 常見HTML5標籤？常用的是哪幾個？

標籤有：h1~h6, head,meta, title, link, script,body,header, section,aside,nav,article,dialog,footer,video,audio,canvas,source,div,p,span,ul,li,dt,dl等。(背景色部分為H5新增)

日常新標籤使用：header,footer dialog, video, audio,canvas等

2. doctype、meta、常見屬性？

!DOCTYPE 文件宣告 ：
  • Html4.01和 Xhtml1.0： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 和 <!DOCTYPE html>
  • html5: <!DOCTYPE html>
meta 頭部資訊
  • Html4.01和 Xhtml1.0： <meta http-equiv="content-type" content="text/html; charset=utf-8">
  • html5: <meta charset="utf-8">

meta每一項具體意思：

charset="utf-8" ：配置字元編碼

name="viewport" content="width=device-width, initial-scale=1.0"：針對移動端配置

width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放

name="description" content="80字以內的一段話，與網站內容相關"： 網頁描述資訊

name="robots" content="此處可選值見下表"：針對搜尋引擎爬蟲技術

name="author" content="tt" ：配置網頁的作者

name="copyright" content="2023-2027©版權所有"： 配置版權所有

http-equiv="refresh" content="10;url=http://www.baidu.com"：配置自動重新整理

3. HTML5新特性？

1.語義化標籤
2.表單增強
3.本地儲存
4.Canvas/Svg
5.影片和音訊
6.地理定位
7.拖拽API
8.Websocket
9.WebWorke

4. 各種表單型別 表單元素？

表單輸入特性：

五個表單元素：

表單屬性：

5.拖拽API

6. 手動擼一個表單提交

<form action="#" method="get" id="nameform">
    <p>
        <label for="lname">姓名：</label>
        <input type="text" name="lname" id="lname" placeholder="請輸入姓名"/>
    </p>
    <p>
        <label for=email>郵箱：</label>
        <input type="email" name="email" id="email" placeholder="請輸入郵箱"/>
    </p>
    <p>
        <label for="address">居住地：</label>
        <select name="address" id="address">
            <option value="1">深圳</option>
            <option value="2">廣州</option>
            <option value="3">南京</option>
            <option value="4">北京</option>
        </select>
    </p>
    <p>
        <label>喜好：</label>
        <input type="radio" name="like" value="1"> 羽毛球
        <input type="radio" name="like" value="2"> 籃球
    </p>
    <p>
        <label>提交進度：</label>
        <progress id="progress" max="100" value="0"></progress>
    </p>
</form>
<button type="button"  onclick="submit()">提交</button>
<!-- <button type="submit"  form="nameform">提交</button> -->
    function submit(){
       let progress = document.getElementById('progress');
       progress.value= 100;
    }

效果：

相關文章