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
  1. li元素可以嵌入ul，ol，div等标签

3、如果给你一个网站，让你只用div来画块的画，如何画？比如京东

可以分为logo，导航，主体，页脚。然后依次用div 去划分，调节大小，背景等属性。

4、一个html文件包含几部分？

一个HTML文件是有自己固定结构的。

<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

让我们来解释一下上面的代码：

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

  1. <html></html> 称为根标签，所有的网页标签都在<html></html>中。
  2. <head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
  3. 在<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属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。


HTML练习题的更多相关文章

  1. Linux基础练习题(二)

    Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...

  2. shell 脚本之 shell 练习题汇总

    整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...

  3. MySQL练习题

    MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...

  4. MySQL练习题参考答案

    MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...

  5. mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

  6. 【UOJ#228】基础数据结构练习题 线段树

    #228. 基础数据结构练习题 题目链接:http://uoj.ac/problem/228 Solution 这题由于有区间+操作,所以和花神还是不一样的. 花神那道题,我们可以考虑每个数最多开根几 ...

  7. 【Java EE 学习 28 下】【Oracle面试题2道】【Oracle练习题3道】

    一.已知程序和数据 create table test1 (id int primary key, name ), money int); ,); ,); ,); ,); 要求根据下图写出相应的sql ...

  8. 从一道NOI练习题说递推和递归

    一.递推: 所谓递推,简单理解就是推导数列的通项公式.先举一个简单的例子(另一个NOI练习题,但不是这次要解的问题): 楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可 ...

  9. 《java编程思想》读书笔记 暂停一段时间，改为上面的练习题

    发现个很尴尬的现象.我一天实在看得太快了...全写下 写博客都得一晚上.. 之前因为是第一次看这么厚的书,别人都说很难,以为会看很慢的.然而,已经完全学过Java的 我感觉没啥压力,越看越快....第 ...

  10. 很不错的sql练习题（select）

      创建表和输入数据 CREATE TABLE STUDENT (SNO VARCHAR(3) NOT NULL,    SNAME VARCHAR(4) NOT NULL,    SSEX VARC ...

随机推荐

  1. 几百道常见Java初中级面试题

     注:  有的面试题是我面试的时候遇到的,有的是偶然看见的,还有的是朋友提供的, 稍作整理,以供参考.大部分的应该都是这些了,包含了基础,以及相对深入一点点的东西.   JAVA面试题集 基础知识: ...

  2. Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  3. border实现矩形中斜线分割 切换按钮

    思路:将该矩形分为三个div,中间的div使用border的特性 代码实现如下:

  4. 01html基础

    01_html 1 Mac中的快捷键 基础快捷键: command+c 复制 command+v 粘贴 command+m 最小化当前窗口 Shift+command+c 桌面环境打开Finder c ...

  5. WPF中的StackPanel、WrapPanel、DockPanel（转）

    一.StackPanel StackPanel是以堆叠的方式显示其中的控件 1.可以使用Orientation属性更改堆叠的顺序 Orientation="Vertical" 默认 ...

  6. 【来龙去脉系列】QRCode二维码的生成细节和原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...

  7. JFinal常量配置学习笔记

    在继承 JFinalConfig 类时,需要 实现 /** * Config constant */ public abstract void configConstant(Constants me) ...

  8. Linux一键脚本合集vps

    首先,想说说一键脚本流行的原因何在? 众所周知的是,Linux 是占据大半壁江山的服务器系统,但在桌面上的占有率可就远不是那么回事儿了,使用和熟悉 Linux 的人远没有 Windows 多,但又因为 ...

  9. 标准输入输出 stdio 流缓冲 buffering in standard streams

    From : http://www.pixelbeat.org/programming/stdio_buffering/ 译者:李秋豪 我发现找出标准流用的是什么缓冲是一件困难的事. 例如下面这个使用 ...

  10. python_18_三元运算

    # result=值1 if 条件 else 值2 如果条件为真:result=值1,否则result=值2. a,b,c=1,3,5 d=a if b>c else c print(d)