本小节重点： 熟练使用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. streamsets 集成 rabbitmq 以及benthos stream 处理框架

    benthos 是一个stream 处理框架,streamsets 也是,但是两者可以通过不同的工具进行集成起来 一般我们可以使用http 服务,消息中间件(kafka.rabbitmq ...) 使 ...

  2. Windows 10 子系统 Ubuntu 中安装 FastAdmin

    Windows 10 子系统 Ubuntu 中安装 FastAdmin 打开 Windows 10 子系统 安装 Ubuntu 修改安装源为阿里的 %LOCALAPPDATA%\Packages\Ca ...

  3. linux同一客户端多个git账号的配置

    有时候我们需要在同一台机器上使用多个git账号,为了避免冲突,我们需要配置~/.ssh/config文件. 步骤一:用ssh-keygen命令生成一组新的id_rsa_new和id_rsa_new.p ...

  4. C#如何使用VS2010与SQL2008建立链接及初步调用（转）

    关于VS2010与SQL2008建立链接及初步调用问题,网上参考的资料很多,我写这个博客,并非是做重复工作,也不是做搬运工.本文将以一种初学者的角度,去完成从数据库建立,到VS2010与SQL中的数据 ...

  5. 获取post发送过来的xml包

     if (Request.HttpMethod.ToLower() == "post") { byte[] ar; ar = new byte[this.Request.Input ...

  6. Oracle查看及修改Oracle最大连接数

    Oracle查看及修改Oracle最大连接数 .查询oracle的最大连接数: select * from v$parameter where name='processes'; .oracle 11 ...

  7. Extjs下拉多选框

    //------录入时间,下拉列表框------ var inputTimeRow = new Ext.data.Record.create([ { name : 'value' },{ name : ...

  8. gcc gdb调试 & 命令行带参 (一) ******

    用GDB调试程序 GDB概述———— GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像VC.BCB等IDE的调试,但如果你是在UNIX平台下做软 ...

  9. UDP丢包问题

    1. 问题描述 PC-A向PC-B发送UDP packet(共16K bytes),如果B机木有及时Read,UDP包将大量丢失. 2. 原因及解决 因为B木有及时接收,socket缓冲区放不下了. ...

  10. 合并单元格/VBA

    ' 合并某一列中相同数据的单元格 Sub MergeColumns() Dim rowN As Integer Dim i, j, m, n As Integer Dim col As Integer ...