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. 转 --简单解决Linq多条件组合问题

    本文笔者用清晰的实例,解决了Linq多条件问题,思路十分的清晰,笔者也很细心的做了描述,希望能给你带来帮助. 最近有个项目准备功能改版,师兄吩咐:尽可能地做到万般皆Linq,所以很多东西都要从存储过程 ...

  2. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第八天(非原创）

    文章大纲 一.课程介绍二.Solr基本介绍三.ssm整合Solr四.项目源码与资料下载五.参考文章   一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的 ...

  3. metaclass元类解析

    一.创建类的流程 二.什么是元类 在Python3中继承type的就是元类 示例 # 方式一 class MyType(type): '''继承type的就是元类''' def __init__(se ...

  4. 学习笔记：MDN的服务器端网站编程

    互联网是如何工作的 互联网(Internet)和网络(web) 互联网是基础设施,网络是建立在这种基础设施之上的服务. 网页,网站,网络服务器和搜索引擎的区别是什么? 网页(webpage) 一份能够 ...

  5. 三、css 和 js 的装载与执行

    一个网站在浏览器端是如何渲染的? 一.html 页面加载渲染的过程. 请求回来最先应该是HTML,从一个字节流转换成字符流,浏览器拿到字符流,然后浏览器端进行相应的词法分析成相应的token,然后不断 ...

  6. java网络编程—TCP（1）

    演示tcp的传输的客户端和服务端的互访. 需求:客户端给服务端发送数据,服务端收到后,给客户端反馈信息. 客户端: 1,建立socket服务.指定要连接主机和端口. 2,获取socket流中的输出流. ...

  7. SpringBoot的特性

    SpringBoot的理念“习惯优于配置” 习惯优于配置(项目中存在大量的配置,此外还内置了一个习惯性的配置,无须手动进行配置) 使用SpringBoot可以方便地创建独立运行.准生产级别的基于Spr ...

  8. ionic 2 起航 控件的使用 客户列表场景(三)

    我们来看看客户列表的搜索控件是怎么工作的吧. 1.打开customer.html <ion-content> <ion-searchbar [(ngModel)]="sea ...

  9. System Center Configuration Manager 2016 域准备篇（Part2）

    对于" 服务器角色",请选择" Active Directory域服务",当系统提示您添加Active Directory域服务所需的功能时,请选择" ...

  10. office密匙

    office 2010 VYBBJ-TRJPB-QFQRF-QFT4D-H3GVB 6QFDX-PYH2G-PPYFD-C7RJM-BBKQ8 BDD3G-XM7FB-BD2HM-YK63V-VQFD ...