发表于： 2018-06-14 22:07:52
1 693
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
task1任务总结
任务耗时2018-06-13~2018-06-14
我的脑图：
官方脑图：
首先知晓了html标签
<!DOCTYPE html>
通过doctype标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
然后学习了其他的html标签。
排版标签：<p> <div> <span>``<br> <hr> <center> <pre>
字体标记：<h1> <font> <b> <u> <sup> <sub>
列表标签：<ul>、<OL>、<dl>
表格标签：<table>
框架标签及内嵌框架<iframe>
表单标签：<form>
滚动字幕标签：<marquee>
等等、
对html有了基本的认识和理解。。
然后学习了css 全称：Cascading Style Sheets层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。
通过在html<head>标签内书写<style type="text/css"></style>
来声明使用css。
语法格式：
选择器{
属性名: 属性值;
属性名: 属性值;
}
CSS的选择器分为两大类：基本选择题和扩展选择器。
基本选择器
标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用，规定用#来定义
类选择器：针对你想要的所有标签使用，规定用圆点.来定义
通用选择器（通配符*）：匹配任何标签
高级选择器
后代选择器：用空格隔开
交集选择器：用.隔开
并集选择器（分组选择器）：用逗号隔开
然后学习了解了盒子模型。
在html中无论是行元素还是块元素都是一个个盒子，但是，图片、表单元素一律看作是文本，它们并不是盒子。比如，一张图片里并不能放东西，它自己就是自己的内容。
能存放文本的元素是盒子。
一个盒子实际所占有的宽度（或高度）是由"内容+内边距+边框+外边距"组成的。
而后学习了解了css 浮动。
通过float：left or right，让盒子脱离标准文档流
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父类的100%。
块级元素可以通过display: inline;转换为行内元素，转换为行内元素后则不能设置宽度、高度。
同样的道理，行内元素转换为块级元素。display: block;
浮动的元素脱离标准流。
浮动的元素会相互贴靠
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度。
然后学习了谷歌浏览器的开发者工具的使用..
https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn
。
深度思考
1.HTML文件里开头的Doctype有什么作用
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2.如何理解盒模型及其content、padding、border、margin？
在html中无论是行元素还是块元素都是一个个盒子，但是，图片、表单元素一律看作是文本，它们并不是盒子。比如，一张图片里并不能放东西，它自己就是自己的内容。
能存放文本的元素是盒子。
一个盒子实际所占有的宽度（或高度）是由"内容+内边距+边框+外边距"组成的
一个盒子最中心是content内容，然后与边框间则是padding内边框，border则是边框，margin则是外边距-从边框到盒子的边上。
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
inline元素全称Inline Elements，英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一个内联元素不会开始新的一行，并且只占有必要的宽度。
常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。
block元素全称Block-level Elements，英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)
常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form。
inline-block元素，英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素，但具有宽度和高度。
img、input标签就是这种内联块元素标签
inline元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高及顶部和底部边距不可设置；
(3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。
block元素:
(1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
(2)、元素的高度、宽度、行高以及顶和底边距都可设置;
(3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高以及顶和底边距都可设置
区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
4.如何使用浏览器的F12调试页面？
- -在更新后网上现有的教程和新的谷歌浏览器标签对不上了。。
Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
打开Chrome 开发者工具
在Chrome菜单中选择 更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”
使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
设备模式
Device Mode
使用设备模式构建完全响应式，移动优先的网络体验。
元素面板
Elements Panel 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.
控制台面板
Console Panel
在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。
源代码面板
Sources Panel
在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
网络面板
Network Panel
使用网络面板了解请求和下载的资源文件并优化网页加载性能。
性能面板
Note: 在 Chrome 57 之后时间线面板更名为性能面板. Timeline Panel
使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
内存面板
Note: 在 Chrome 57 之后分析面板更名为内存面板. Profiles Panel
如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
应用面板
Note: 在 Chrome 52 之后资源面板更名为应用面板. Application Panel
使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
安全面板
Security Panel
使用安全面板调试混合内容问题，证书问题等等。
6.IDE是什么？它和文本编辑器相比有什么优缺点？
编辑器就是纯编辑文本的编辑器，IDE是带有软件开发功能的“集成开发环境”的编辑器
7.加和不加meta的viewport有什么区别？
viewport meta标签可以满足不同的浏览器大小，对网页进行缩放。不加标签的话..会导致在浏览器大小改变时，网页信息显示不完全。
。
开始任务二- -
github以前弄过了，简单过了一遍。
在阿里云linux上安装了svn
将任务一上传到svn服务器上。
检出成功
任务二总结。
2018.6.14~6.14
我的脑图
官方脑图
首先复习了github的使用。。将任务代码上传到github上。并使用github的托管部署，可以从http访问html文件。。
然后因为使用了vscode。。所以webstorm和sublime只是简单看了一下。
svn的部署和本地链接服务器有点麻烦。。
重置了一次服务器。按照教程部署成功。熟悉了linux的操作命令，和vi编辑器的操作指令。
在本地安装小乌龟。tortoisesvn。通过它将代码上传到svn服务器，并将其从服务器下载。
任务三开始。。
首先看了css的内外边距。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。
另外，还可以为 margin 设置一个百分比数值，
百分数是相对于父元素的 width 计算的。在内边距时也同样。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
总结与 rem 差异 em
rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
为什么使用 rem 单位:
Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反，它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。
为此，使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。
使用 em 单位:
根据某个元素的字体大小做缩放而不是根元素的字体大小。
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
明天计划的事情：（一定要写非常细致的内容）
任务三总结、继续做任务
遇到的问题：（遇到什么困难，怎么解决的）
百度万岁
收获：（通过今天的学习，学到了什么知识）
对css盒子模型和html的写法更加熟悉了。
返回列表
评论