第二次作业（学习中碰到的各种问题）

作者: 浩克与浩文 | 来源:发表于2017-01-19 04:21 被阅读0次

1.作业

1.1什么是css语法？

答：CSS 语法由三部分构成：选择器、属性和值。CSS又名层叠样式表，选择器通常是你希望定义的HTML的元素和标签，例如 #ID，.class等；属性是你希望改变的属性，而每个属性都有一个值，例如：color：red；这里color就是属性，red是值。关于CSS根据其位置的几种分类在我上一篇文章里出现过，就不一一赘述。

1.2列举常见的css选择器

答：ID选择器 class选择器包含选择器群组选择器类型选择器。以上是我目前见到的选择器，考虑到笔者刚刚接触，以上五种只能熟练使用ID选择器，其他几种仅仅只是知道而已，若想了解更多，点击下方链接，有详细代码。
http://wenku.baidu.com/link?url=EvIXB2IePkW6KN7-7Qm3T8UKi8Iyb7S7_oyGFqPFdFG7f1VCqoDVJi0WN_8Ue-QjgKeGSDUYMiiPgWbX6YaAXScYiqCu23YoCahwLxH3PDO

1.3.background属性如何简写？

答：background-color 使用的背景颜色。
background-image 使用的背景图像。
background-repeat 如何重复背景图像。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图像的位置。
background-size 背景图片的尺寸
以上是笔者目前接触并用到的background的几种属性，简写很简单，background后面没有顺序要求把上面哪几种属性挨个在后面写，注意没写完一项要用分号结尾，并空格（这样能触发DW的一些帮助机制，开始笔者不知道，写代码贼慢，后来发现这种办法既不用很准确的背单词还提高了写代码速度）。

1.4.文本的属性有哪些？请写出font的复合式写法

答：文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值： left (居左) right (居右) center (居中) justify (两端对齐)
文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无) underline (下划线) overline (上划线) line-through (当中划线)
文本缩进属性(text-indent) 这个属性设定文本首行缩进。
行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象高度的百分比)
字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。
font : font-weight; font-style; font-size/line-height; font-family ;
color
其中font-size,font-family必须要写，而color要单独写。

1.5.text-indent有什么作用？

答：text-indent是用来设定文本块中第一行的缩进。例如：text-indent:2em;就是首行缩进两字符。

1.6.超链接a标签的作用有哪些？

答：其中href是页面地址的话可以进行页面跳转；href是压缩包的话可以进行下载；href里写的是ID的话，点击会直接跳转到ID所在位置，又称为锚点；其中target=“_blanck”的话会进行新窗口打开；target=“_self”为当前窗口打开。

1.7.a标签默然样式是什么？

答：链接底部有下划线，整个链接包括下划线是蓝色。

1.8.什么是盒模型？盒模型包括什么？

答：在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容，元素的补白，元素的边框，元素的边界四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了中元素的盒模型。

1.9.padding和margin的区别？

答：margin是指的外边距属性,padding是指的内边距。这是盒子模型的概念。请见上图。

1.10.什么是margin叠加？什么是margin传递？

答：叠加

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <title>margin 重叠现象</title>
    <style type="text/css">
    .top {
      height: 100px;
      background: #795f98;
      margin-bottom: 20px;
    }
    .bottom {
      height: 100px;
      background: #7f9140;
    }
    </style>
</head>
<body>
    <div class="dadDiv">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

传递

<style>
        div.parent{background: #FF92D5;height:200px;margin-top: 0;}
        .child{height: 40px;margin-top: 40px;background: green;}
</style>

<body>
    <div class="parent">        
        <div class="child"></div>        
    </div>
</body>

对于这样的一段代码，我们期待的效果是,child的顶部距离parent 40px:

但是，很不幸，结果是这样的：

这就是传递，对于此类问题的解决网络上有好多种，然而笔者只是一名萌新，并不了解此类问题产生的原因与原理，更别提解决办法了，只是通过视频知道有此类问题的出现，如有兴趣，可自行去网络上了解，学习，或者在未来的几期笔者会更新此部分内容也说不定。

1.11.列举几种常见的语义化标签？

答：

section 版块用于划分页面上的不同区域,或者划分文章里不同的节
header 页面头部或者版块（section）头部
footer 页面底部或者（section）底部
nav 导航（包含链接的的一个列表）
article 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
aside 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
1，被包含在<article>中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等
2，在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
h1-h6 标题
ul 无序列表
ol 有序列表
li ul或者ol的列表项
dl 定义列表
dt 定义列表的项目
dd 对dt展开的描述扩展
p 段落
time 时间
em 强调一个词或者一段话
strong 强调一个词或者一段话
img 图片
此段为笔者直接引用，刚刚学到，实在记不住如此繁多的标签。

1.12.常见的块元素和内嵌元素有哪些？简要说一下它们的区别？

a - 锚点

abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

块元素(block element)

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
行内元素会再一条直线上，是在同一行的。
注块级元素各占一行。是垂直方向的！
块级元素可以用样式控制其高、宽的值
行内元素不可以控制宽和高。

2.学习感想

这两天的学习还是那么的过瘾，但是我明显感觉到内容有些难了，有些地方光看教学视频已经无法令我完全明白，我还一直用百度查各种资料。我觉得HTML的语言相当直观，语法也不是很难，但是要想能够熟练掌握，做出一个像样的网页来也绝非易事，在这两天的学习过程中我遇到了padding与margin我完全不明白他们的意义，看视频就像听天书一样，我从小空间想象能力就差，高考数学立体几何一道大题也做错了，再加上这次的一批视频讲的远没有上次的那一批入门篇细，我就很恼火的呗卡在了这。我是一个喜欢钻牛角尖的人，这块地方不懂，我就没有心情学别的了，反复看，反复暂停，想弄清楚每一个字符的意义，但我用实际证明了有时候一个明白人的一句话远胜你苦想一整天，学长的一个比喻：“你就把它想象成两张纸，一张盖住另一张。”我顿时明白了，很是感激。
还有这次的作业，我很不满意，因为我做出来的效果和原图有挺大差别，关键是我还不知道自己哪不对，修修改改还是没有用。

3.问题

3.1我在使用PS画辅助线时有时候出现了几点几像素，导致我后来有选框框的时候，总是框不准那些线条，总差那么不到一像素，让我这个有点强迫症的忍不了，屡次Ctrl＋H重新画，但总是不完美，看视频上，老师随便一画就刚刚好，有什么技巧吗？

3.2对于一个带有文本的网页或者图片，有没有什么办法能够快速分辨出文本字体样式？

附上我做的两个作业以及效果图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#box {
    width:513px;height:341px;border:#000 solid 1px;margin:30px auto;
    padding:0 22px;
    }
#content1 {
    padding:0px 408px 0px 0px; font-weight:bold; line-height: 44px; font-size:24px "宋体";
    }
#content2{
    padding:0px 289px 0px 0px;font-weight:bold; line-height:54px; font-size:20px "宋体";
    }
#content3{
    padding:0px 52px 28px 0px; line-height:26px; font-size:14px "宋体"; color:#9b9b9b; text-indent:2em;border-bottom:#000 dashed 1px;
    }
#content4{
    padding:19px 250px 0px 17px;font-weight:bold; line-height:37px; font-size:17px "宋体";
    background:url(z2.gif) no-repeat 0px 32px;
    }
</style>
</head>
<body>
<div id="box">
<div id="content1">动态新闻</div>
<div id="content2">掌握一门技术的重要性</div>
<div id="content3">掌握一门技术是未来生存的一块敲门砖，掌握一门技术是未来生存的一敲门砖，掌握一门技术是未来生存的一块敲门砖</div>
<div id="content4">走进民企观摩学习与民企面对面
                                   走进民企观摩学习与民企面对面
                                   走进民企观摩学习与民企面对面
                                   走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {
    width:200px;height:2px;background:#ff5f5f;margin:0 auto;
    }
#div2 {
    width:0px;
    height:0px;
    border:#f00 100px solid;border-top:#f00 99px solid;border-bottom:#fff 99px solid;margin: 0 auto;
    }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

链接: https://pan.baidu.com/s/1bWdlYA 密码: vwgf
(其中有原图和我做的效果图，希望有大神帮我看一眼，到底什么地方出了问题)