目录
3、行级标签和块级标签的特点以及行级标签与块级标签的主要区别？
4、谈一谈SEO：什么是SEO？SEO的工作原理？前端需要注意哪些 SEO？
3、行级标签和块级标签的特点以及行级标签与块级标签的主要区别？
4、谈一谈SEO：什么是SEO？SEO的工作原理？前端需要注意哪些 SEO？
5、表单中最重要的元素 input 【name-value 键值对，用来向服务器提交变量值】
6、事件属性 onchange 【监听绑定的标签的内容的改变】
8、label的for属性的作用：（for属性关联label标签与哪个表单元素进行绑定）
✿ 表格跨行、跨列的布局【 rowspan 跨行、colspan 跨列】：
一、HTML语言（结构）介绍
1、什么是HTML：
超文本标记语言，组成元素有文字、图片、音频、视频等等多媒体元素
2、HTML有什么作用，能解决什么问题：
（1）可以用来做网页，html语言编写的html文档，可以通过浏览器进行运行显示效果
（2）拓展浏览器原生功能，包括视频音频播放，表单功能增强，以及定位，多线程等。
3、html 的语义化作用：
- 让页面的内容结构化，结构清晰，利于阅读，也利于浏览器、搜索引擎的解析；
- 有利于SEO（优化搜索引擎）：搜索引擎的爬虫会依赖于HTML标记来确定上下文和各个关键字的权重；
- 根据代码的结构分块，便于维护网站（代码）。
二、html常用标签（元素）
1、行级元素：常见的：span 、a、img、、label、input等
2、块级元素：常见结构的: div、列表ul、段落标签p、表单标签form、下拉列表框select
3、登录界面常用的表单元素 form
4、常用的表单元素
5、表单中最重要的元素 input
6、7、属性id和name的区别：
8、label的for属性的作用：（for属性关联label标签与哪个表单元素进行绑定）
9、表格元素 table rowspan 跨行、colspan 10、媒体元素：音频元素audio、视频元素video
三、html面试题：
1、HTML是什么？
2、HTML有什么优点？
3-1、说出五个行级标签、五个块级标签？
4、5、什么是静态网页、什么是动态网页？
6、对于a标签 如何创建锚点？锚点的作用是什么？
7、常用的结构标签，并描述其作用?
8、img标签上的title和alt属性的区别是什么？
9、简述src和href的区别：
四、做网站的一些小建议：
1，做网站建议使用png图片格式
2，网页的结构是：语义化。
3，美观界面----含标题的属性 fielset-legend：
<fieldset style="width:300px ">
<legend align="center">登录界面</legend>
</fieldset>
五、html面试题答案：
1、HTML是什么？
超文本标记语言，组成元素有文字、图片、音频、视频等等多媒体元素
2、HTML有什么优点？
（1）语义化、简单易学、结构清晰
（2）跨端、跨平台
（3）与Css（样式）一起制作的网页，实现了结构与表现的分离，方便维护与扩展
3、行级标签和块级标签的特点以及行级标签与块级标签的主要区别？
■ 行级标签特点：
(1)会和相邻的行内元素排成一行。
(2)设置宽、高无效，默认宽高是其自身内容的宽高。
■ 块级标签特点：
(1)独自占据一行,故默认宽度是容器的100%。
(2)可以设置宽、高、行高、内外边距。
(3)可以容纳行内元素和其他块级元素。
■ 区别：行级元素不能设置宽高，默认宽高等同于文字，而块元素可以。
4、谈一谈SEO：什么是SEO？SEO的工作原理？前端需要注意哪些 SEO？
■ SEO是搜索引擎优化。
■ 工作原理：爬取网页，采集信息-》建立索引数据库数据 -》在数据库中进行搜索排序。
■ 前端需要注意 SEO的方面：
（1）合理的 title、description、keywords：搜索对这三项的权依次减小
（2）语义化：语义化代码让搜索引擎容易理解网页
（3）重要内容布局到最前面：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制
（4）重要内容 不使用 js 输出：爬虫抓取不到 js 的内容
（5）少用 iframe框架标签：搜索引擎也抓取不到的 iframe 中的内容
5、什么是静态网页、什么是动态网页？
■静态页面：没有数据交互的网页，即没有数据库参与，没有服务器端数据的加载。例如只有HTML+CSS+Javasript作出的网站。
■动态页面：指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要后台逻辑的支持。 例如 动态网页就是JSP页面（后台是JAVA编写的服务端）等。
6、对于a标签 如何创建锚点？锚点的作用是什么？
锚点：是文档中某个位置的一个标记，作用：通过链接相关联即可快速到达标记处。
创建锚点：元素通过id属性（唯一性）起个标记名，作为锚点；然后设置链接标签的href属性去关联锚点标签。
■ 举例：
<!-- 锚点元素[跟关联的链接标签不在同一个网页，在B网页 (相同网页href的值：前面不用写某网页.html)]： --> <div id=”head”></div> < a href=“B.html#head” />（标记名与id同名） <!-- #占位符：指向当前网页的意思。 -->
7、常用的结构标签，并描述其作用?
常用的结构标签：header、section、footer、nav、article、aside标签（侧边栏，可以做广告栏）
结构化标签作用：实现语义化。
8、img标签上的title和alt属性的区别是什么？
title属性：图片标题，当光标悬浮在img标签上显示的信息；
alt属性：图片的替换文本，当图片不能正常显示时（如加载失败），显示的文本信息，有利于SEO。
9、简述src和href的区别：
■ src (Source) 是来源地址，用在img、script等元素上。
src作用：指向资源所在位置，加载完资源，替换掉当前元素，例如当前元素是img，src加载完图片，就用图片直接替换掉img标签。
■ href（hypertext reference）是超文本引用，用在link和a等元素上。
href 作用：也是指向资源所在位置。使当前文档和引用资源之间建立联系。
例如建立链接元素和锚点元素之间的联系。又例如：link属性引入第三方的样式，引入BootStrap.css.
五、html常用标签（元素）详解
1、行级元素：
常见的：a、img、span、label、input等
2、块级元素：常见结构的:
列表【ul-> li】 【ol->li】 【dl->dt->dd】
段落标签 p
表单标签【form->input】
表格标签【table->tr->th/td】
下拉列表框/ 组合框【select -> option】
✿ 行级标签和块级标签的特点以及行级标签与块级标签的主要区别？
■ 行级标签特点：
(1)会和相邻的行内元素排成一行。
(2)设置宽、高无效，默认宽高是其自身内容的宽高。
■ 块级标签特点：
(1)独自占据一行,故默认宽度是容器的100%。
(2)可以设置宽、高、行高、内外边距。
(3)可以容纳行内元素和其他块级元素。
■ 区别：行级元素不能设置宽高，默认宽高等同于文字，而块元素可以。
3、登录界面常用的表单元素 form：
（1）form作用：实现了动态交互，即用户通过前端网页进行操作后，前端网页把用户操作过的数据传递到后端服务器。 而 form 的作用就是把用户输入一系列的数据封装起来，一次性提交给服务器。
（2） 为什么要进行表单验证：
•保证输入的数据符合要求 • 减轻服务器压力 •从而提高用户体验
（3）form : 重要属性【action、method】 ：
• action：指定提交后，由服务器上哪个处理程序来处理
• method：指定向服务器提交的方式，一般是post/get [post更安全]~不写method 默认是get
● get和post的区别：get 是明文提交【参数在地址栏可以直接被看到】；post是暗文提交：重要的文件、隐私、身份证号、银行卡号之类的重要信息，一般都是暗文提交。
4、常用的表单元素:
① form: 供用户输入的表单
② fieldset: 定义域。即输入区加有文字的边框。
③ legend：定义域的标题，即边框上的文字。
④ label：文本标签。如输入框前的文字，用以关联用户的选择。
⑤ input: 输入域，常用。可设置type属性，从而具有不同功能。
⑥ textarea: 文本域，默认可通过鼠标拖动调整大小。
⑦ button: 按钮。
⑧ select: 选择列表/下拉列表。
⑨ option: 下拉列表中的选项。
5、表单中最重要的元素input
■ 单选按钮细节：type=“radio”，注意细节：name变量要一样，这样才能覆盖，确定最终所选
✿ input 的 type 类型有：
text 单行文本框、 password 密码、buttom 按钮、submi 提交表单数据、
radio 单选框、checkbox 多选框、
reset 重置表单数据、image 图形提交按钮、file 文件上传、
▷ HTML5 新增加了：input 中的类型： email、number、range、date、color 等
6、事件属性 onchange 【监听绑定的标签的内容的改变】
■ onchange案例：
<p>修改输入域的文本，点击输入域外区域触发 onchange。</p>
输入文本: <input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
7、标签的属性id和name的区别：
id是前端使用样式时使用到id, name是给后端提供数据的。id 和 name 起的名字重复相同，没有问题，因为两个变量属性的去向不一样。
8、label的for属性的作用：（for属性关联label标签与哪个表单元素进行绑定）
label 中 for 属性 搭配 id （属性值要一样）：光标激活效果，用户点击文本，文本框被激活。
----- 文本框的id属性作用： 有快速定位的锚点作用
----- 文本标签的for属性： 是关联label标签要绑定到哪个表单元素
■ 举例：
9、表格元素 table
ps：表格的语义化：标题caption，表头thead，表身tbody，表脚tfoot
✿ rowspan 跨行、colspan 跨列
第一步：分析表格的布局
第二步：分析跨行、跨列的分析：与周围比较；
（跨行：与周围的行比较--横向比较），
（跨列：与周围的列比较—纵向比较）
某个单元格的内容如果处理过（假设跨行，第一行有它的身影，例如它从第一行跨到第三行，第一行写用 属性 rowspan 写上跨行总占行数后，到达第二行、第三行看到它的身影就可以不用理它了，处理过啦）
10、媒体元素：音频元素、视频元素
（1）音频元素
（2）视频元素：
标签：行级,面试题,必知,标签,元素,表单,HTML,属性 来源： https://www.cnblogs.com/shan333/p/15862761.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。