一、简答
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. Eclipse导入jdk的源码

    eclipse导入JDK源码 前言:这件事情的重要性不言而喻,对于学习和观摩优秀的代码非常的有用,我喜欢想看什么代码都能 Ctrl+鼠标一点 就能够看到,不过这个不常操作,在这里小记一笔,以备后用.( ...

  2. vs2013配置opencv2.4.13

    此方法配置简单,方便易行,解压opencv2.4.13后得到opencv文件夹,进行如下步骤: 1.添加环境变量 用户变量,新建,变量名opencv,值D:\opencv\build 系统变量,Pat ...

  3. （大数 小数点） 大明A+B hdu1753

    大明A+B Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  4. shell函数与数组

    shell函数与数组 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为什么要使用shell函数 简单的说函数的作用就是把程序里多次调用的相同的代码部分定义成一份,然后起个名字, ...

  5. Spring中的Bean配置

    IOC&DI概述 OPC(Inversion of Control):其思想是反转资源获取的方向.传统的资源查找方式要求组件向容器发起请求查找资源.作为回应,容器适时的返回资源.而应用了IOC ...

  6. listcontrolc插入列时，出现断言错误

    原因:窗口还未创建,就对listcontrol进行了操作 解决方案:在初始化函数中 添加CDialogEx::OnInitDialog();

  7. linux 网络之 bond 网卡模式

    Linux bond模式通过多个网卡绑定技术既能增加服务器的可靠性,又增加了可用网络宽带,为用户提供不间断的网络服务: 七种bond模式: 第一种模式:mod=0 ,即:(balance-rr) Ro ...

  8. QMouseEvent鼠标事件

    Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击.释放等操作,而对鼠标滚轮的响应则通过QWheeEvent来处理

  9. vue pc端网站项目开发坑点与难度记录

    背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非 ...

  10. linux 链接理解

    1.软链接 只包含另外软链接的基本信息, 生成与源文件不同的节点号, 可以链接目录.不同网络的文件 2.硬链接只能链接文件,不会生成节点号,说白了就是指针,指向同个文件,所以链接的节点号与源节点号一致