本小节重点： 熟练使用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. nuclio kubernetes 部署

    一张参考架构图: 从图中可以看到nuclio可以运行到docker 以及kubernetes中 提供了kubernetes 部署的脚本 安装 创建命名空间 kubectl create namespa ...

  2. css中display为none 和visibility为hidden的区别

    区别一: display:none Turns off the display of an element (it has no effect on layout);  all child eleme ...

  3. oracle之 11.2.0.4 bbed安装

    一. bbed安装: 1.ORACLE 11G下安装BBED,需要从ORACLE 10G中复制三个包 sbbdpt.o .ssbbded.o 并将两个文件移到$ORACLE_HOME/rdbms/li ...

  4. PHP查找中文字符的解决方案

    在PHP中查找中文字符,有两种方案.1.中文字符是gbk(gb2312)有两种解决方法第一种:将PHP保存为ASCII编码,然后使用strpos查找,如:strpos($curl_res, ‘哈哈’) ...

  5. OpenWrt的web服务器

    参考: http://www.szchehang.com/news/10602.html 我们登录的路由器主界面就是通过这个软件指定了80端口来访问的.我们要添加自己额外的网站服务,那只需要重新定义一 ...

  6. [转]使用Nginx实现反向代理

    使用Nginx实现反向代理 解释 正向代理的概念 正向代理,也就是传说中的代理,他的工作原理就像一个跳板,简单的说,我是一个用户,我访问不了某网站,但是我能访问一个代理服务器这个代理服务器呢,他能访问 ...

  7. CentOS7.1下生产环境Keepalived+Nginx配置

    CentOS7.1下生产环境Keepalived+Nginx配置 [日期:2015-07-20] 来源:Linux社区  作者:soulful [字体:大 中 小]   注:下文涉及到配置的,如无特别 ...

  8. ubuntu 安装时分辨率太小 导致无法继续安装

    当分辨率是800 *600时,底部的按钮无法显示,不能继续安装. 可以在右上角,点击电源按钮,在系统设置中调整显示的分辨率后,继续安装.

  9. 关于 android 读取当前手机号码

    手机号码不是所有的都能获取.只是有一部分可以拿到.这个是由于移动运营商没有把手机号码的数据写入到sim卡中.SIM卡只有唯一的编号,供网络与设备识别那就是IMSI号码,手机的信号也可以说是通过这个号码 ...

  10. Android启动过程中背景图片显示

    转自:http://blog.csdn.net/zhangzhikaixinya/article/details/17001321 大部分Android App启动过程中,都会设置一个背景图片,直到A ...