本小节重点： 熟练使用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. openresty 使用cuid 类库生成短链接id

    cuid 是一个不错的id 生成算发,类似的有shortid .hashid 演示使用lua 包集成openresty 做测试 使用docker-compose 运行 dockerfile FROM ...

  2. u-boot分析

    4.Bootloader:u-boot.2009.08分析与移植4.1:分析u-boot根文件夹下的Makefile,能够看到uboot编译的顺序例如以下,由此可知编译运行的第一个文件是cpu/$(C ...

  3. 捷报 FastAdmin 国内开源排名第 13 名

    捷报 FastAdmin 国内开源排名第 13 名 FastAdmin 是一款基于 ThinkPHP 5 + Bootstrap 的后台开源框架. 去年是第 35 名. 今年是第 13 名,有进步.

  4. 一个5.0/3.3V双向通讯的电路

    来自群友 西江月-梧州 的分享 硬件程工-深圳福永(79993868) 17:06:33 当3.3V高时二极管阳极为3.3V,阴极接了10K上拉为5V,二极管的压降为反向,此时二极管不导通. 硬件程工 ...

  5. k最邻近算法——使用kNN进行手写识别

    上篇文章中提到了使用pillow对手写文字进行预处理,本文介绍如何使用kNN算法对文字进行识别. 基本概念 k最邻近算法(k-Nearest Neighbor, KNN),是机器学习分类算法中最简单的 ...

  6. WeakHashMap 理解

    WeakHashMap 通过 expungeStaleEntries 这个函数的来实现:移除其内部不用的条目,从而达到自动释放内存的目的. 基本上只要对 WeakHashMap 的内容进行访问就会调用 ...

  7. spring考试

  8. TopCoder客户端安装

    参考:https://blog.csdn.net/github_39353095/article/details/76165940 首先,下载 Java 环境. https://www.java.co ...

  9. Windows Phone 的这几年

    Windows Phone 从2010年10月发布,到如今已经有3年多了.从那时坚持到现在的用户和开发者一定感慨很多吧. 一直关注着这个让人既爱又恨的平台的发展,笔者不仅是使用者,也同时是开发者,这里 ...

  10. 微信JS-SDK官方示例程序

    示例地址:http://203.195.235.76/jssdk/ /* * 注意: * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能 ...