本小节重点： 熟练使用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. jsfl读取xml,图片，并生成swf

    var newdoc = fl.createDocument(); var doc = fl.getDocumentDOM(); var URI = fl.browseForFolderURL(&qu ...

  2. JVM监控

    jconsole 说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下 ...

  3. memcache 和 memcached 区别

    区别用一句话表达:Memcached (字母d可以理解为daemon)是一个服务(运行在服务器上的程序,监听某个端口),Memcache 是 一套访问Memcached的api. memcache客户 ...

  4. protobuf生成

    1,文件路径匹配好在src/main/proto下面 https://blog.csdn.net/u010939285/article/details/78538927

  5. springboot 知识点

    ---恢复内容开始--- 1springBoot项目引入方式, 1,继承自父 project (需要没有付项目才能用,一般我们的项目都会有 父 项目 所以 这种方式不推荐 ,记住有这种方式 就可以了) ...

  6. Angular 4 延缓加载组件

    1. 创建App ng new lazySample --routing 在app组件中的定义路由 2. 创建“Lazy” Module ng g module lazy --flat ng g co ...

  7. MySqli 中预处理类 stmt

    非select 语句(没有结果集的) 1.建立连接数据库 $mysqli=new mysqli("localhost","root","", ...

  8. java 静态导入

  9. java 异常和异常处理Exception

    Java Exception: 1.Error 2.Runtime Exception 运行时异常3.Exception 4.throw 用户自定义异常 异常类分两大类型:Error类代表了编译和系统 ...

  10. 安装Linux软件时没有图形界面的问题

    Q: 现在Linux下的软件有很多也采用图形界面安装了:但有时候我们发现启动安装程序时本该出现图形界面时却出现了文本界面. A: 检查常用的图形函数库(最主要的自然是gtk, qt)是否已安装.尤其是 ...