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. Android客户端与PC服务端、android服务端通过WiFi通信

    前期准备:我的是Linux Mint操作系统(总之折腾的过程中怀疑过是不是系统的问题),首先是要创建wifi热点给android手机使用,这个时候笔记本作为通信的服务器端,android手机作为客户端 ...

  2. CentOS 6.4系统中编译和升级内核

    CentOS 6.4系统中编译和升级内核 [日期:2013-08-25] 来源:Linux社区  作者:vipshichg [字体:大 中 小] 可能因为以下几种原因,你可能需要对Linux kern ...

  3. Vue2.0搭建脚手架（vue-cli）

    一.安装node.js 进入官网下载node.js 二.安装 cnpm 1.说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理 ...

  4. GreenDao 使用知识小y

    //关于 group by 的实现//--------------------XXXDao.queryBuilder().where(new WhereCondition.StringConditio ...

  5. angular 学习笔记（3） ng-repeat遍历json并且给样式

    视图: <div ng-app="myapp" ng-controller="myctrl"> <ul> <li ng-repea ...

  6. Spring+Hibernateh使用小结

    由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to load class ’org.slf4j.impl.StaticLoggerBinder‘”的意思则是“加 ...

  7. uLua学习之调用Lua函数（五）

    前言 在我开始这个系列的第一篇文章中,我就提到了Lua脚本用来实现宿主脚本的配置性和扩展性.上节说到的调用外部Lua脚本就对应了它的两大特性之一的配置性,那么另一大特性如何来体现呢?这就要说我们今天的 ...

  8. DB2数据库备份还原

    恢复及备份NC DB2数据库步 一. 安装DB2数据库 解压db2v9.5ins.rar安装,在写此文档时客户一般用的是9.5: 注意不要将db2安装到系统盘: 二. Windows版本 1.数据库备 ...

  9. Sqlserver列出所有数据库名,表名,字段名【转】

    1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 注意: 表Master与SysDatabases之间有两个点 2.获取所 ...

  10. HDU2433 最短路 + 剪枝优化

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2433 ,最短路(SPFA或优化过的Dijstra) + 剪枝优化 这道题关键还是在几个剪枝上面,没有剪 ...