[TOC] # 题1、DOCTYPE 标签是干什么用的？ 答：doctype 是一种标准的标记语言的文档类型声明，用来指示web浏览器关于页面使用哪个HTML版本进行编写的； `<!DOCTYPE>` 声明必须是HTML文档的第一行，位于html标签之前。 # 题2、什么是语义化标签？请列出至少5个语义化标签？ 答：语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。 `<nav>` : 页面导航 `<header>` : 页面顶部区域 `<footer>` : 页脚区域 `<aside>` : 页面侧边栏 `<article>` : 文章整体内容区块，整个模块 `<section>` : 内容分组 …… 等HTML5新增的语义化区块标签 # 题3、行级标签和块级标签的区别？ **行级标签**： 1. 不能设置宽、高，宽高由内容撑开 2. 能和其他行级标签在一行显示 常用行级标签：`span、input、a、strong、em、i` 等等 **块级标签**： 1. 可以设置宽高，默认宽是100% 2. 默认不能和其他标签在同一行显示，除非定位、浮动、flex布局等等 常用块级标签：`div、p、ul、li、form、h1~h6` 等等 HTML5中新增的块级标签：`header、footer、aside、section` # 题4、请写出至少5个行级标签？ 答： span、a、img、input、strong、i、em、select、textarea 等等 # 题5、请写出 table 标签中包含的标签？ 答：thead、tbody、tfoot、tr、td、th 等等 # 题6、很多网站不使用 table 和 iframe 标签，为什么？ 答：table 和iframe 标签在渲染时性能不好，用户体验不好，所以一般前端页面都不使用。一般在后台管理系统做数据列表时使用的比较多。 # 题7、HTML 如何进行 SEO？ 1. 适用的使用语义化标签 2. 让页面结构尽量简洁清晰 3. 使用 TDK 标签（T:title、D:description、K:keywords）  # 题8、常用的浏览器有哪些？对应的内核是什么？ 答： chrome（blink)、opera (blink) 、IE (trident) 、 firefox (Gecko) 、 safari (webkit). ​ # 题9、a 标签中打开新窗口使用哪个属性？ 比如：在新窗口中打开京东 ~~~ <a href="http://www.jd.com" target="_blank">京东</a> ~~~ # 题10、写两个 a 标签中间会出现空格？为什么？ 比如： ~~~ <a href="">你好</a> <a href="">你好</a> ~~~ 解决方法： 1. 最好最简单的办法，就是把它们写在同一行 2. 使用 flex 布局 # 题11、form 标签上哪个属性定义请求方法？哪个属性定义请求地址？ ~~~ <form method="post" action="/user/login"></form> ~~~ # 题12、img 标签的 alt 属性的用途是？设置图片路径的属性是？ ~~~ <img src="./abc.jpg" alt="abc" /> ~~~ # 题13、input 标签上 `readonly` 和 `disabled` 属性的用途？ disabled：设置标签为禁用状态，并且不能被选中。 # 题14、iframe 标签的用途是？ 示例： ~~~ <iframe src="https://www.jd.com/" frameborder="0"></iframe> ~~~ # 题15、GET 和 POST 两种提交表单方式的区别？应用场景？ 答： 区别1、GET 方式提交时，数据是通过URL地址上提交的，且GET请求只能进行url编码 POST 方式提交时，数据是看不到的，且POST支持多种编码方式 区别2、GET 方式提交的数据量比较小 POST 可以一次提交较大的数据量 区别3、GET 方式不能上传文件 POST 方式可以上传文件 应用场景： GET：搜索时的表单。 POST：添加、修改、登录、注册 等 # 题16、制作下拉框用哪个标签？ ~~~ <select name="city">    <option value="北京">北京</option>    <option value="上海">上海</option> </select> ~~~ # 题17、如何制作复选框？ ~~~ <input type="checkbox" value="男" /> 男 <input type="checkbox" value="女" /> 女 ~~~ # 题18、如何实现复选框在点击后面的汉字就选中？ ~~~ <label>        <input type="checkbox" value="男" /> 男    </label>    <p>        <input type="checkbox" value="女" id="check" />        <label for="check">女</label>    </p> ~~~ # 题19、什么是SEO？做 SEO 有什么用？ 搜索引擎：百度、谷歌这种搜索网站。 SEO 的用途：让网页在百度、谷歌中搜索时排名靠前的技术。 # 题20、无序列表用哪个标签？有序列表用哪个标签？二级列表嘞？ ~~~ 无序列表： Unorderd List <ul>    <li>123</li>    <li>123</li> </ul> ​ 有序列表：Ordered List <ol>    <li>123</li>    <li>123</li> </ol> ​ 二级列表： <dl>    <dt>北京</dt>   <dd>朝阳区</dd>   <dd>东城区</dd>    <dt>河北</dt>        <dd>石家庄</dd>        <dd>廊坊</dd> </dl> ~~~ # 题21、 th 和 td 标签的区别？ 答：这两个标签都是使用在 table 中的 tr 中的。 th： 居中并加粗。一般用在表格的第一行。 td：普通单元格 ~~~ <table>    <tr>        <th>id</th>        <th>name</th>    </tr>    <tr>        <td>1</td>        <td>tom</td>    </tr> </table> ~~~ # 题22、常用的图像都是什么格式？ 答： gif（动图）、png、jpg、jpeg、bmg、avg 等等 # 题23、如何制作多行文本框？ 答：使用 textarea 标签。 ~~~ <textarea rows="10" cols="60"></textarea> ~~~ # 题24、块级标签默认的宽度是多少？ 答： 独占一行 有内容时，宽度是 100% 。 没有内容时，宽度是 0 .