一、简答
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. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  2. Python练习1

    一.linux,基于文件大小,创建时间,修改时间,文件内容,文件名称等进行查找汇总和输出 2019-01-04 只操作文本文件 #!/usr/bin/env python # -*- coding: ...

  3. mongodb的备份和还原

    1.首先把mongodb的bin加入环境变量 2.备份 我们使用mongodb内置的mongodump mongodump -h dbhost -d dbname -o dbdirectory 例如: ...

  4. es7预览

    哈哈,es6才刚刚掌握,就给大家介绍es7了. es7的草案其实早已经定下来了,而且更加向着java这些高级语言看齐了 chrome的高版本其实也已经对es7的部分功能实现了!! 1.数组 inclu ...

  5. 记录一次iptables端口转发的配置

    需求是公网访问2.2.2.22的80端口,直接转发到内网的192.100.100.178的80端口上. 代理服务器的,两个不同的网卡 eth0 2.2.2.22 eth1 192.100.100.10 ...

  6. PHP7 学习笔记（五）安装event扩展（libevent）

    一.描述:有效安排I/O,时间和信号的扩展 使用可用于特定平台的最佳I/O通知机制的事件,是PHP基础设施的libevent端口. 二.下载地址:http://pecl.php.net/package ...

  7. html5 实时监听输入框值变化的完美方案：oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...

  8. webuploader

    https://www.cnblogs.com/study-fanzeng/p/8930939.html http://fex.baidu.com/webuploader/doc/index.html ...

  9. Anaconda3 指南

    Anaconda 是一个 Python 的生态.它包含很多的科学计算库和大数据处理工具等. $ python --version Python 3.6.1 :: Anaconda 4.4.0 (64- ...

  10. 记录一个PHP安装redis扩展时的问题

    安装过程:https://www.cnblogs.com/pengyunjing/p/8688320.html 由于我之前安装过该扩展,重新安装时没有执行make clean命令,所以安装好出现了下面 ...