本小节重点： 熟练使用div+span布局，知道div和span的语义化的意思 熟悉对div、ul、li、span、a、img、table、form、input标签有深刻的认知，初期也了解他们，知道他们在浏览器上的初始化样式是怎样的。 熟练网站布局结构 比如 header区域，侧边栏区域，内容区域，脚部区域

  1. 查询一下对div和span标签的理解
  2. 如何理解标签的嵌套结构？它们的规则是怎样的？
  3. 如果给你一个网站，让你只用div来画块的画，如何画？比如京东
  4. 一个html文件包含几部分？
  5. 当使用p标签的使用，应该注意什么？
  6. 阐述一下form标签的作用？form标签的属性有哪些？
  7. ul的孩子元素一定是li么？
  8. 如何理解语义化的标签？
  9. 标签的分类

1、查询一下对div和span标签的理解

div是块级元素，在没有任何布局属性作用时，默认排列方式是换行排列

span是行内元素、内联元素，在没有任何布局属性，默认是同行排列

编程题：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>百度注册</title>

</head>

<body>

<dir >

<form action="https://www.baidu.com" method="post">

    <p>

        <label for="user">用户名</label>

        <input type="text" name="username" id="user" placeholder="请设置用户名">

    </p>

    <p>

        <label for="user">手机号</label>

        <input type="number" name="phone_number" id="phone_number" placeholder="可用于登录和找回密码">

    </p>

     <p>

        <label for="user">密码</label>

        <input type="password" name="password" id="pwd" placeholder="可设置登录密码">

    </p>

     <p>

        <label for="user">验证码</label>

        <input type="number" name="验证码" id="验证码" placeholder="请输入验证码">

         <input type="button" name="btn" value="获取短信验证码">

    </p>

    <p>

    <input type="radio" value="阅读并接受">阅读并接受

        <a href="#" >《百度用户协议》</a>

        <a href="#" >《百度隐私权保护声明》</a>

    </p>

</form>

    <dir>

    <p>

        <input type="submit" value="注册" style="height: 50px;width: 200px" >

    </p>

    </dir>

</dir>

</body>

</html>

运行结果：

前端-HTML练习题的更多相关文章

  1. 前端工作面试问题--摘取自github

    前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...

  2. 前端笔记之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链

    一.对象(Object) 1.1 认识对象 对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体, ...

  3. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  4. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  5. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  6. web前端篇：JavaScript基础篇（易懂小白上手快）-1

    目录 详细内容: 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象(object): 10 ...

  7. 一统江湖的大前端（8）- velocity.js 运动的姿势(上)

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  8. 练习题 vue_01：

    目录 练习题: vue_01 点击事件控制标签颜色: 点击次数控制标签的样式: 周期性实现标签的旋转变色: 每日一题: http协议,https与http的区别: 前端页面布局的方式 框架内orm的功 ...

  9. 前端(5)之jQuery

    前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

随机推荐

  1. adnanh webhook 框架request values 说明

      request values 在adnanh webhook 是比较重要的,规则触发以及命令参数传递都是通过它 支持的request values 类似 http header 查询参数 play ...

  2. 【转】每天一个linux命令（52）：ifconfig命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...

  3. ZooKeeper 知识点

    zookeeper 命令: 命令 说明 ./zkServer.sh start 启动ZooKeeper(终端执行) ./zkServer.sh stop 停止ZooKeeper(终端执行) ./zkC ...

  4. TFS错误-TF249053

    前几天规划了下代码结构,改了很多东西后,台式机依然正常访问,但是笔记本一连接或者更改TFS相关资源就报错TF249053.报错点击后不影响正常使用,但是很郁闷.于是查了下资料如下. 错误原因: htt ...

  5. HttpClient连接池

    HttpClient连接池,发现对于高并发的请求,效率提升很大.虽然知道是因为建立了长连接,导致请求效率提升,但是对于内部的原理还是不太清楚.后来在网上看到了HTTP协议的发展史,里面提到了一个属性C ...

  6. linux 静态库文件

    1.生成目标文件 gcc -o mylib.o -c mylib.c 2.生成静态库文件 ar rcs libmylib.a mylib.o 查看库信息: nm libmylib.a //====== ...

  7. python处理excel（二）：写

    代码参考自zhoujie.函数接口可参考该blog. 基本的write函数接口很简单: 新建一个excel文件 file = xlwt.Workbook() (注意这里的Workbook首字母是大写) ...

  8. bzoj 1390: [Ceoi2008]Fence

    Description 在一个大小为1000*1000的区域中,有n个固定点,m棵tree . 现在你要建一个围栏来保护tree,建它的费用为你选用的固定点的个数 *20和 你没有圈进围栏的tree* ...

  9. java操作Excel之POI（3）

    一.字体处理 /** * 字体处理 */ public static void main(String[] args) throws Exception { Workbook wb = new HSS ...

  10. js区分大小写

    JavaScript 区分大小写 区分大小写 JavaScript 语言是区分大小写的,不管是命名变量还是使用关键字的时候. 如前面 alert弹出提示框 的例子,如果将 alert 命令改为 ALE ...