网页基本内容、标签、选择器、git使用

回顾学习历程

创建一个html5的网页

网页基本要素DOCTYPE、html、head、body

声明是H5：
声明H4（已经过时）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML网页文档的根要素，或者叫做根标记，是网页文档中最外层的标记。
<html lang="zh"></html>

属性是lang="zh"设置网页描述语言为中文

HTML其他的特殊属性：
manifest
<html manifest="example.appcache"></html>

指定网页缓存文件，可以让用户在离线的时候（比如说在飞机上时）也能够访问页面。

xmlns
<html xmlns="http://www.w3.org/1999/xhtml"></html>

设置html文档的名空间，比如把网页设置成xhtml的时候可以用这个属性

meta标记

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

meta name指定要描述的信息的名称
meta.http-equiv设定网页的头信息，可以用于设置http协议传输时的头信息，也可以设定一些网页的行为。
meta.content和name,http-equiv等属性配合使用，记载属性的描述内容。
meta.charset指定网页的文字编码，推荐使用utf8编码。

title

设置网页的标题，可以显示在浏览器上。
title是head标记的子标记，写在head标记中。
这个也是搜索引擎优化（SEO）的一部分，所以给自己的网页起一个好的标题， 更容易被所有引擎找到。

link标记是链接外部文件时使用的标记，它能把外部文件的内容引用到当前的网页中来， 使当前的网页能够实现更多的功能。

  • href 指定链接外部文件的路径和文件名
  • rel 引用资源(文件)的类型定义
// 比如外联css样式文件
<link rel="stylesheet" href="./rWR.css">

style

style标记描述CSS样式单的定义。（样式单文件的引用使用link标记）
属性

  • media 指定使用样式单的媒体类型
  • type 样式单的MIME多媒体属性的制定，如果省略的话则是“text/css”
  • scoped(Firefox) 局部区域内的样式单设定

tempalte标记（H5）

模版标记template可以定义一个HTML的代码片段，然后通过脚本语言（javascript）向网页中动态生成内容，减少html的重复编码，增加代码的复用性，从而提高工作效率。在vue框架中常用

script标记

属性

  • src 引用的外部javascript脚本文件的路径（URL）
  • type 外部文件的MIME多媒体类型指定，比如：text/javascript

深度思考

HTML文件里开头的Doctype有什么作用

DOCTYPE是document type的简写,它并不是 HTML标签，也没有结束标签它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。

不声明doctype会发生什么？

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是怪异的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

标准模式和怪异模式

标准模式，浏览器使用W3C的标准解析渲染页面.
怪异模式，浏览器使用自己的怪异模式解析渲染页面。

其他进入怪异模式的方法？

除了不写DOCTYPE声明外，最常见的就是在DOCTYPE声明前面出现了这些内容：普通文本、HTML 标签、HTML 注释、XML 声明、IE条件注释。

如何理解盒模型

盒模型分为IE盒模型（怪异盒子）和W3C标准盒模型（标准盒子）。

  1. W3C 标准盒模型：
    属性width,height只包含内容content，不包含border和padding。
width = content（不包含 padding 和 border）
  1. IE 盒模型：
    属性width,height包含border和padding，指的是content+padding+border。
width = border（边框左右）+padding（左右）+content

现在默认是标准盒子但是可以将box-sizing设为border-box则用的是IE盒模型

在盒子模型中常会遇见的问题: margin重叠问题

什么是外边距margin重叠

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

  • 外边距重叠计算方式: 全部都为正值，取最大者；
  • 不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值
  • 没有正值，则都取绝对值，然后用0减去最大值。

元素和父元素margin值问题
父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。

常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别

  • inline行内元素：a, span, br, i, em, strong, label, q, var, cite, code
  • block块级元素：div, p, h1... h6, ol, ul, dl, table, address, blockquote, form
  • inline-block行内块元素:img, input

行内元素的特点：

  • 和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  • 元素的高度、宽度及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。

block块元素特点

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block行内块元素特点

  • 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
  • 代码display:inline-block就是将元素设置为行内块状元素。
  • 和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

一些问题

  • inline和inline-block元素之间的间距问题
    • font-size:0
    • 使用margin负值
    • 弹性盒子--给父元素设置弹性盒子
  • inline-block元素的如何垂直居中
    • 设置上下padding值相等
    • 设置line-height
    • 弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
  • img元素底部为何有空白？
    • 默认是基线对准，设置成顶线对准vertical-align:top
    • 给图片img标签display:block
    • 定义容器里的字体大小font-size为0。

如何使用浏览器的F12调试页面？

  • Elements板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。
  • Console应该都很熟悉了吧？经常会以为少写了’}’而报语法错误。当然它的功能远不止这些。点击这里查看更多
  • Sources就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。
  • Network这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。
  • Timeline跟前面的工具相比，Timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层。了解更多，查看之前的文章浏览器渲染流程
  • Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。
  • Resources工具显示资源的，跟Sources不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等等。
快速切换文件：
按Ctrl+P（cmd+p on
mac）,就能快速搜寻和打开你项目的文件。

在源代码中搜索：
大家都知道如果在要在Elements查看源码，只要定位到Elements面板，然后按ctrl+f就可以了

使用多个插入符进行选择：
当编辑一个文件的时候，你可以按住Ctrl在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑

Pretty Print的按钮在Sources标签的左下角用于格式化凌乱的js源码  

颜色选择器：
当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。

在颜色预览功能使用快捷键Shift + Click，可以在rgba、hsl和hexadecimal来回切换颜色的格式

Chrome Dev开发者选项,浏览器进入chrome://flags，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。

加和不加meta的viewport有什么区别？

viewport 是用户网页的可视区域。
在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的，但是移动端浏览器的情况会不一样，介于各种设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面，它们的视口大小可能会不一样。

css 中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css 中的 1px 所代表的设备物理像素是不同的。

移动设备默认的 viewport 是 layout viewport，也就是那个比屏幕要宽的 viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport。

在head中加入以下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。如果不这样的设定的话，那就会使用那个比屏幕宽的默认 viewport，也就是说会出现横向滚动条

动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二种方法

通过setAttribute来改变 

<meta id="testViewport" name="viewport" content="width = 380"><script>var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');</script>

Git学习

Git是啥

  • Git 管理代码，保证代码版本迭代连续性，即：向A分支merge或者push代码时，A分支代码必须是当前代码的上一个版本，不然会产生冲突。
  • Git有修改就有提交，就有新的代码版本，git管理维护的是修改
  • Git分支存储的是代码副本。
  • push ：实际上就是将本地分支合并到远端库分支；pull：实际就是将远端分支合并到本地分支。

常用操作指令

  • git init 在当前目录中生成一个.git 目录
  • git add . 添加到stage准备状态
  • git commit –m “XXXX” 提交修改,添加注释
    -== git status== 查看当前代码库的状态
  • git log 查看修改提交信息
  • git reset 撤销修改
  • git push origin 分支名 向远端库推送修改
  • git clone/pull 获取远端库项目
  • git branch AAA 建立分支AAA
  • ==git checkout -b AAA == 从当前分支切换到AAA分支 (若AAA分支不存在，则自动新建)
  • git merge AAA （将分支AAA与主枝合并）

git和svn的区别？

1．SVN优缺点

优点：

1、 管理方便，逻辑明确，符合一般人思维习惯。

2、 易于管理，集中式服务器更能保证安全性。

3、 代码一致性非常高。

4、 适合开发人数不多的项目开发。

缺点：

1、 服务器压力太大，数据库容量暴增。

2、 如果不能连接到服务器上，基本上不可以工作，看上面第二步，如果服务器不能连接上，就不能提交，还原，对比等等。

3、 不适合开源开发（开发人数非常非常多，但是Google app engine就是用svn的）。但是一般集中式管理的有非常明确的权限管理机制（例如分支访问限制），可以实现分层管理，从而很好的解决开发人数众多的问题。

2．Git优缺点

优点：

1、适合分布式开发，强调个体。

2、公共服务器压力和数据量都不会太大。

3、速度快、灵活。

4、任意两个开发者之间可以很容易的解决冲突。

5、离线工作。

缺点：

1、学习周期相对而言比较长。

2、不符合常规思维。

3、代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版
posted @ 2019-11-20 18:50  Hou-Sheng  阅读(455)  评论(0)  编辑  收藏  举报