一、简答
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. 收藏：SQL重复记录查询 .

    来自:http://blog.csdn.net/chinmo/article/details/2184020 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select ...

  2. weichat Small 程序

    微信小程序教程用什么语言  ? 答:php java html5 css, 咫尺微页很棒可以自制 html 它是一套自有的语言(暂且叫 WeLang),使用 WeLang 开发出来的页面. 一个微信页 ...

  3. gradle执行test任务报错

    起初报错内容: > Task :compileJava FAILEDC:\Users\x\eclipse-workspace\old_code\src\main\java\CookieDemo. ...

  4. KVM使用入门

    KVM使用入门 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.KVM管理工具 1.libvirt系列 它是由REDHAT公司开发的适用于管理众多不同架构上的虚拟化技术的管理工具 ...

  5. Spark2.1.0编译

    1.下载spark源码包 http://spark.apache.org/downloads.html 2.安装Scala与maven,解压spark源码包 安装Scala: tar zxf scal ...

  6. Keil4 几例异常解决办法

    以下几个问题在Keil5上没有发现,不过因为下载的例子都是Keil4,强迫症让我用起了Keil4 错误一:main.c: Warning: C3910W: Old syntax, please use ...

  7. 如何写一个好的缺陷（Defect）报告

    编写缺陷报告是测试人员的日常工作,好的缺陷报告能够让开发人员更容易理解,更快速的定位问题:不好的缺陷报告可能会误导调查方向,增加沟通成本.那么一个好的缺陷报告应该包括哪些方面呢? 请看我的mindma ...

  8. 我的Mac中毒了，病毒居然叫做MacPerformance

    禁用 ReportCrash 直接干掉进程肯定不管用,从名字就知道这个进程会自动被触发,除非修改系统配置. Google 了一下,发现很简单,在 terminal 里执行 launchctl unlo ...

  9. 嵌入式iframe子页面与父页面js通信方式

    iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...

  10. MySQL - 日常操作一 增删改查

    mysql 源码安装 创建 mysql  账户 组 groupadd mysql useradd mysql -g mysql -M -s /bin/false 解压缩源码安装 .tar.gz cd ...