1、查询一下对div和span标签的理解
div标签:是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,中文我们把它称作“层”。
span标签:是被用来组合文档中的行内元素。span没有固定的格式表现, 当对它应用样式时,它才会产生视觉上的变化。
2、如何理解标签的嵌套结构?它们的规则是怎样的?
块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素
如:
<div><div></div><h1></h1><p><p></div>
✔️
<a href=”#”><span></span></a>
✔️
<span><div></div></span>
❌
块级元素不能放在p标签里面,比如
<p><ol><li></li></ol></p>
❌
<p><div></div></p>
❌
有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
h1、h2、h3、h4、h5、h6、p
- li元素可以嵌入ul,ol,div等标签
3、如果给你一个网站,让你只用div来画块的画,如何画?比如京东
可以分为logo,导航,主体,页脚。然后依次用div 去划分,调节大小,背景等属性。
4、一个html文件包含几部分?
一个HTML文件是有自己固定结构的。
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
让我们来解释一下上面的代码:
首先,<!DOCTYPE HTML>
是文档声明,必须写在HTML文档的第一行,位于<html>
标签之前,表明该文档是HTML5文档。
<html></html>
称为根标签,所有的网页标签都在<html></html>
中。<head></head>
标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>
、<script>
、<style>
、<link>
和<meta>
等标签,头部标签在下一节中会有详细介绍。- 在
<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在<body>
标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性
5、当使用p标签的使用,应该注意什么?
p标签是块级元素,要注意的是他里面不嵌套块级元素,只能包含内嵌元素。
6、阐述一下form标签的作用?form标签的属性有哪些?
通俗的讲 form标签是用来进行表单提交用的
form标签里面的常见属性如下
action: 表单提交的地址, 肯定是要提交给某个服务器的,action的地址就是要提交的服务器的地址
method:以何种方式提交,常见的为get和post. 区别在于一个是明文(在url中显示),一个是暗文
form标签是和服务器交互用的, 以用户注册为例
用户在浏览器中的注册页面添加信息后,点击提交,此时是将这些信息提交至某个服务器
服务器根据提交的信息将注册信息保存. 这个过程就需要使用form标签了
form中action属性应该是服务器注册模块的地址
form标签下应该有input,textarea,select等表单标签以及<input type=" submit"标签
当点击submit按钮时,浏览器会自动将表单信息封装提交至action中的地址
所谓的提交就是访问action中地址并携带着form表单中input,textarea,select的信息
7、ul的孩子元素一定是li么?
不一定,ul是无序列表,块级元素,它可以包含,其它块级元素以及内嵌元素。
8、如何理解语义化的标签?
语义化的主要目的在于,直观的认识标签(markup)和属性(attribute)的用途和作用。可以概括为:用正确的标签做正确的事情。
html语义化可以让页面的内容结构化,便于浏览器解析,便于搜索引擎解析,并提高代码的可维护度和可重用性。
比如,尽可能少的使用无语义的标签div,使用结构化标签<header>、<section>、<footer>。
9、标签的分类
常用的块状元素:
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素:
<img> <input>
块级元素特点:display:block;
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
行内元素特点:display:inline;
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
行内块状元素的特点:display:inline-block;
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置
注意
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换,为后面页面布局做好了准备。