1一乐

V1

2022/02/04阅读:53主题:默认主题

HTML必知必会知识【常用标签和面试题】



目录

一、HTML语言(结构)介绍

1、什么是HTML:

2、HTML有什么作用,能解决什么问题:

3、html 的语义化作用:

二、html常用标签(元素)

三、html面试题:

1、HTML是什么?

2、HTML有什么优点?

3、行级标签和块级标签的特点以及行级标签与块级标签的主要区别?

3-1、说出五个行级标签、五个块级标签?

4、谈一谈SEO:什么是SEO?SEO的工作原理?前端需要注意哪些 SEO?

5、什么是静态网页、什么是动态网页?

6、对于a标签 如何创建锚点?锚点的作用是什么?

7、常用的结构标签,并描述其作用?

8、img标签上的title和alt属性的区别是什么?

9、简述src和href的区别:

四、做网站的一些小建议:

 

五、html面试题答案:

1、HTML是什么?

2、HTML有什么优点?

3、行级标签和块级标签的特点以及行级标签与块级标签的主要区别?

4、谈一谈SEO:什么是SEO?SEO的工作原理?前端需要注意哪些 SEO?

5、什么是静态网页、什么是动态网页?

6、对于a标签 如何创建锚点?锚点的作用是什么?

7、常用的结构标签,并描述其作用?

8、img标签上的title和alt属性的区别是什么?

9、简述src和href的区别:

五、html常用标签(元素)详解

1、行级元素:

2、块级元素:常见结构的: 

3、登录界面常用的表单元素 form:

4、常用的表单元素:

5、表单中最重要的元素 input 【name-value 键值对,用来向服务器提交变量值】

6、事件属性 onchange 【监听绑定的标签的内容的改变】

7、标签的属性id和name的区别:

8、label的for属性的作用:(for属性关联label标签与哪个表单元素进行绑定)

9、表格元素 table

✿ 表格跨行、跨列的布局【 rowspan 跨行、colspan 跨列】:

10、媒体元素:音频元素、视频元素

(1)音频元素

(2)视频元素:


 

一、HTML语言(结构)介绍

1、什么是HTML

超文本标记语言,组成元素有文字、图片、音频、视频等等多媒体元素

2、HTML有什么作用,能解决什么问题:

   1)可以用来做网页html语言编写的html文档,可以通过浏览器进行运行显示效果

   2拓展浏览器原生功能,包括视频音频播放,表单功能增强,以及定位,多线程等

3html 的语义化作用:

  • 让页面的内容结构化,结构清晰,利于阅读也利于浏览器、搜索引擎的解析
  • 有利于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

作者介绍

1一乐
V1