一、简答
1、手写html模板，并解释模板每个标签的作用
   <!doctype html> 文件类型html
   <html>页面根
      <head>后勤内容
         <meta charset="utf-8" >元素字符编码
         <title>first page</title>标题
      </head>
      <body>显示内容
      </body>
   </html>

2、html三个组成部分，并分别举两个案例
    # 标签: h1  a
   # 指令: !doctype  <!-- -->
   # 转义字符: .class$p1  color:#FFF

3、解释一下什么是标签，为什么用标签
    一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，
    而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，
    所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。
 那什么是标签呢？
    #1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
    #2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，
        结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
    #3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>

4、分别书写五个已上单标签、双标签，并解释一下为什么要设置单双标签
- 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
a img br hr link
- 双标签：双标签有成对的结束标识，主要应用场景为内容性标签
div h1 ul li p

5、列举三个组合标签
table>tr>th+td
form>input
ul>li

6、简述css的引入方式，并简单解释各种的优点
行内式:简单直接,针对性强
内联式:解耦合了,可读性强
外联式:适合团队高效率开发, 耦合性低, 复用性强

7、简述什么是css选择器，为什么要使用css选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

8、列举三个基础选择器，css语法分别是什么，并分析优先级
通配选择器
* {
    border: solid;
}
标签选择器
div {

}
类选择器
.red {
    color: red;
}
id选择器
#div {
    text-align: center;
}
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

9、简单列举长度单位
CSS相对长度单位  说明
    em 元素的字体高度The height of the element's font
    ex 字母x的高度The height of the letter "x"
    px 像素Pixels
    %  百分比Percentage

CSS绝对长度单位  说明
    in 英寸Inches (1 英寸 = 2.54 厘米)
    cm 厘米Centimeters
    mm 毫米Millimeters
    pt 点Points (1点 = 1/72英寸)
    pc 皮卡Picas (1 皮卡 = 12 点)

10、说出至少两种颜色表示方式
第一种表示法使为直接写颜色的英文，例如：blue
第二种表示方法为用黄色，绿色，蓝色的值设定color的值。例如：rgb（204,213,9）
第三种表示方法为第四种表示方法是使用颜色的十六进制值设定color的值；十六进制颜色表示以#开头 0123456789abcdef 分别表示0~16的数字,#后面第一二位数字
表示红色的值，三四位数字表示绿色的值，最后两位数字表示蓝色的值，例 ：#cc0066

11、如何综合设置文本样式：字重900、大小30px、行高100px、字族"STSong"
/*字重 风格 大小/行高 字族  (风格可以省略) ***** */
        font: 100 normal 60px/200px "STSong", "微软雅黑";

12、代码实现文本"老坛酸菜牛肉面"在100px*100px的div.box盒子中水平垂直显示
<div class="box" style="height:100px; width: 100px;>老坛酸菜牛肉面</div>

13、简述什么是display，为什么要使用display
display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，
如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。
对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

14、列举display三种属性值，并分析每种属性值下，显示方式 css样式支持程度 嵌套规则等特性
    /*display:block: 块级标签, 独占一行, 支持所有css样式*/
    /*display:inline: 内联(行级)标签, 同行显示, 不支持宽高*/
    /*display:inline-block: 内联块标签, 同行显示, 支持所有css样式*/

        /*标签的嵌套规则*/
        /*①*/
        /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
        /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
        /*②*/
        /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
        /*③*/
        /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/

15、列举一下复杂选择器组合，并分析产生优先级的规则
群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器
组合选择器优先级与权值相关，权值为权重和
通配权重1,标签10,类 属性 100,id 1000,!important 10000
- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

16、列举7个或更多伪类选择器，并一一做简单介绍
    1、a标签四大伪类
    - :link：未访问状态
    - :hover：悬浮状态
    - :active：活跃状态
    - :visited：已访问状态
    2、内容伪类
    - :before：内容之前
    - :after：内容之后
    3、索引伪类
    - :nth-child(n)：位置优先，再匹配类型
    - :nth-of-type(n)：类型优先，再匹配位置
    4、取反伪类
    - :not(selector)：对selector进行取反

17、简述什么是盒模型，它的组成部分是什么
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content

18、代码实现100*100的sub盒子在200*200的sup盒子水平垂直居中显示
<head>
    <style type="text/css">
    .sup {
        width: 200px;
        height: 200px;

    }
    .sub {
    width: 100px;
    height: 100px;

    margin-top: -150px;
    margin-left: 50px;
    }
    </style>
</head>
<body>
    <div class="sup"></div>
    <div class="sub"></div>
</body>

19、代码举例说明精灵图的使用
.header h1 {
    background: url("../img/bg.png") no-repeat 0 -150px;
}
20、列举已学标签的reset操作
html, body, ul, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    color: black;
    text-decoration: none;
}

二、代码
完成w3c网站主页的编写

Python-HTML CSS题目的更多相关文章

  1. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  5. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  6. 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  7. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. （转）JVM——自定义类加载器

    背景:为什么要自定义,如何自定义,实现过程 转载:http://blog.csdn.net/SEU_Calvin/article/details/52315125 0. 为什么需要自定义类加载器 网上 ...

  2. html中空格字符实体整理

    摘要 浏览器总是会截短 HTML 页面中的空格.如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个.如需在页面中增加空格的数量,您需要使用 字符实体. 本篇就单介绍空格的字 ...

  3. 解决IIS8中 URLRewriter 不能使用的方法

    1.把应用程序池改成集成 2.的web.config 加入代码 <system.webServer> <validation validateIntegratedModeConfig ...

  4. Junit测试的理解------java基础知识

    前言:不知道是最近懒了,还不不想认真写博客,其实写一个质量高的博客是需要时间的,没办法时间太紧了 package com.mon11.day13.linkedlist; import static o ...

  5. python post提交

    # coding:utf8 import requests def login(): url = 'http://back.xiyilang.cc/staff/login.json' headers= ...

  6. 盖得化工----requests/bs4---采集二级网址

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  7. range与xrange的区别

    一.Python中range()与xrange()有什么区别 range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列 rang ...

  8. Linux操作系统原理

    Linux操作系统原理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.计算机经历的四个时代 1.第一代: 真空管计算机,输入和输出:穿孔卡片,对计算机操作起来非常不便,做一件事 ...

  9. 函数和常用模块【day04】：作用域、局部和全局变量（四）

    本节内容 概述 课前前引 局部变量和全局变量 总结 一.概述 我们之前写代码,都需要声明变量,但是我们思考过变量的作用范围吗?今天我们就来讲讲变量的作用范围,这个作用范围又叫作用域.首先我们根据变量的 ...

  10. javascript 转换大小写字母

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...