复习：Git-HTML-CSS

Git

曾做练习

> git init
> git status
> git add hello-world.js
> git status
> git commit -m "commit hello-world.js"
> echo '*.tmp' > gitignore
> git add .gitingore
> git commit -m "gitignore file"
> git status

> git diff
> git add committed.js
> git diff
> git diff --staged
> git log
> git show
> git show 497ef11

> git remote add origin /s/remote-project/1
> git push origin master
> git pull origin master
> git log
> git show
> git log --grep="#1234"
> git fetch
> git  checkout remotes/origin/master

> git checkout
> git reset HEAD
> git reset --hard HEAD
> git revert HEAD --no-edit
> git revert HEAD...HEAD~2 --NO-edit

> git merge remotes/origin/master
> cat staging.txt
> git checkout --theirs staging.txt
> git status
> git add staging.txt
> git commit --no-edit

相关理论

git工作流

image.png

git checkout

在日常的git操作中，git checkout——检出，是我们的常用命令。最为常用的两种情形是创建分支和切换分支。
git checkout的主要功能就是迁出一个分支的特定版本。默认是迁出分支的HEAD版本。
$ git checkout -b newBrach origin/master
上面命令表示，在origin/master的基础上，创建一个新分支。

git reset

在git的一般使用中，如果发现错误的将不想staging的文件add进入index之后，想回退取消，则可以使用命令：git reset HEAD <file>
--hard：重设（reset） index和working directory，自从<commit>以来在working directory中的任何改变都被丢弃，并把HEAD指向<commit>。

git revert

git revert 撤销 某次操作，此次操作之前和之后的commit和history都会保留，并且把这次撤销作为一次最新的提交。

git revert 和 git reset的区别

git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。
在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入。
git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。

git merge

git merge的基本用法为把一个分支或或某个commit的修改合并到现在的分支上。

参考资料

git - the simple guide

Git远程操作详解

HTML

HTML中的基本语法

标签不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性不必引号，推荐双引号
某些属性值可以省略，比如 required、readonly

曾做练习

  1. 关于link元素说法错误的为 C
  • 可以添加在头部标签中
  • <link> 标签定义了文档与外部资源之间的关系
  • <link> 标签可以用于链接到js文件
  • <link> 标签可以用于链接到样式表

  1. <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>. 都可以添加在头部区域

  2. 以上代码表示的内容为

<ol type="A">
  <li>Apples</li>
  <li>Bananas</li>
</ol>

序号为大写字母的有序列表

  1. 在浏览器无法载入图像时，如何使用替换文本属性提示失去的信息为info
    <img src="example.jpg" alt="info">

  2. 九九乘法表


    image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script>
        window.onload = function () {
            //根据id获取值
            var p1 = document.getElementById("p1").innerHTML;
            var p2 = document.getElementById("p2").innerHTML;
            var p3 = document.getElementById("p3").innerHTML;
            var p4 = document.getElementById("p4").innerHTML;
            console.log(p1);
            console.log(p2);
            m = p1*p2;
            n = p3*p4;
            l = m + n;
            document.getElementById("fuck1").append(m + "元");//给最后一行添加计算结果列
            document.getElementById("fuck2").append(n + "元");
            document.getElementById("fuck3").append(l + "元");
        }
    </script>
</head>
<body align="center">
    <table border="1" align="center">
        <caption>购物车</caption>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>
        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>
        <tr>
            <th>苹果</th>
            <td><span id="p1">3</span><span>公斤</span></td>
            <td><span id="p2">5</span><span>/公斤</span></td>
            <td id="fuck1"></td>
        </tr>
        <tr>
            <th>香蕉</th>
            <td><span id="p3">2</span><span>公斤</span></td>
            <td><span id="p4">6</span><span>/公斤</span></td>
            <td id="fuck2"></td>
        </tr>
        <tr>
            <td colspan="3">总价</td>
            <td id="fuck3"></td>
        </tr>
    </table>
</body>
</html>
  1. 用什么方法可以将整个表格在页面中居中
    align=center

8.在HTML中,关于表单提交方式说法错误的是 A

  • action属性用来设置表单的提交方式
  • 表单提交有get和post两种方式
  • post比get方式安全
  • post提交数据不会显示在地址栏，而get会显示

action - 向服务器发送的请求地址
应该是method

相关理论

列表

有序列表用ol标签包围，意为order list，其中的每一项用li标签表示。
无序列表用ul标签包围，意为unorder list，其中的每一项用li标签表示。
列表列表用dl标签包围，意为definition list，其中用dt（definition title）表示定义的标题，用dd（definition description）表示定义的标题所对应的具体内容。

引用

引用一共有如下三种写法<blockquote>、<cite>、<q>，<blockquote>标签会有段落的缩进，<cite>标签引用的内容会是内容倾斜，<q>标签引用的内容会在内容外面加上双引号。

<link>标签

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

<img>标签

示例

<p>
  我是一张图片
  <br>
  <img width="500" height="250" 
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png">
</p>

img标签是一个内联元素，将不会单独占据一行，而是以图像设置的大小来在行内显示。

<video>标签

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

video标签还有一些其他的属性，比如：
width和height，控制视频的尺寸，但当我们对视频的尺寸进行调整是，视频会一直保持固定的纵横比，如果未被视频内容填充的部分，将会显示为默认的背景颜色。
autoplay，这个属性会使视频内容自动播放，即使页面的其他部分还没有加载完全。
muted，该属性设置该视频在播放时，默认是处于静音的状态。
poster，同img标签类似，指向一个图像的URL，该图像作为该视频的海报，在视频播放前显示。
preload，该属性通常被用来缓存较大的视频文件，该属性有以下几个值：
none：不缓冲
auto：页面加载后缓存视频文件
metadata：仅缓冲视频的元数据

<iframe>标签

<iframe src="https://baidu.com"
        width="500" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://baidu.com">
    Fallback link for browsers that don't support iframes
  </a></p>
</iframe>

allowfullscreen，若设置为true，iframe则可以使用全屏的接口在当前页面采用全屏页面显示。
sandbox，沙盒，体现了现代浏览器对安全性的设置。为了最大程度上减少网站被黑客的攻击，尽量始终使用sandbox属性。未沙盒化的内容可以做的不安去的事情太多，比如：执行JavaScript、提交表单等。

CSS

image.png

曾做练习

  1. 关于块状元素说法正确的是 C
  • 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括div h1-h6 p ul
  • 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下块状元素会按顺序自上而下排列。
  • 块状元素都不可以定义自己的宽度和高度
  • 块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素，我们可以把这种容器比喻为一个盒子。
  1. 在下列CSS语言中()适用对象是“所有对象” A
  • 背景附件
  • 文本排列
  • 纵向排列
  • 文本缩进

外链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<p>
    Hello World
</p>
</body>
</html>

内联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联</title>
</head>
<body>
<p style="background-color: #00539F; font-size: 2em; text-align: center">
    Hello World
</p>
</body>
</html>

嵌入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入</title>
    <style type="text/css">
        p {
            background-color: #00539F;
            font-size: 2em;
            text-align: center;
        }
    </style>
</head>
<body>
<p>
    Hello World
</p>
</body>
</html>
  • 使用属性选择器选中有title属性的div
  • 使用属性选择器选中title属性值是demo的div
  • 使用属性选择器选中title属性值包含demo的div
  • 使用属性选择器选中title属性值是zh或者是zh-开头的div
div[title] {
            font-weight: bold;
        }
        div[title="demo"]{
            color: #00539F;
        }
        div[title*=demo]{
            background: red;
        }
        div[title=zhi] {
            color: aquamarine;
        }
        div[title^=zhi] {
            background: burlywood;
        }

下列关于重叠样式的说法不正确的是 C

  • 当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来
  • 如果两个元素是块级元素，文字比背景层级高
  • 和行内块的行为一样，文字比背景层级高，并且也是前一个元素比后一个元素层级高
  • 如果是行内或行内块，背景比文字层级高

权重相同时取后面定义的样式

在HTML中，盒子模型中元素实际占位的高度应该为()?
height属性+padding-top+padding-bottom+border-top+border-bottom

  1. 新建HTML文档，制作如下要求的页面效果：网页有“box1、box2、box3、box4”四个盒子组成，1、2、3号盒子在一行，4号盒子在2号盒子的正下方，每个盒子的宽均为400px，高均为200px，5px边框黑色，盒子间距为10px。截图并给出代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style type="text/css">
        /*div {*/
        /*    margin: 5px;*/
        /*    width: 400px;*/
        /*    height: 200px;*/
        /*    border: 5px solid;*/
        /*}*/
        .div-inline {
            float: left;
            margin: 5px;
            width: 400px;
            height: 200px;
            border: 5px solid;
        }
        #div4 {
            width: 400px;
            height: 200px;
            border: 5px solid;
            margin-left: 420px;
            /*clear: both;*/
            /*overflow: hidden;*/
        }
    </style>
</head>
<body style="text-align: center; line-height: 200px; font-weight: bolder">
<div style="overflow: hidden; width: max-content">
<div class="div-inline">1</div>
<div class="div-inline">2</div>
<div class="div-inline">3</div>
</div>
<div style="overflow: hidden; margin: 5px">
<div id="div4">4</div>
</div>
</body>
</html>
  1. 三列圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧自适应右侧固定</title>
    <style>
        .container > div {
            height: 200px;
            float: left;
        }
        .container {
            padding-left: 200px;
            padding-right: 200px;
            overflow: hidden;
        }
        .main {
            width: 100%;
        }
        .left {
            width: 200px;
            margin-left: -100%;
            position: relative;
            right: 200px;
        }
        .right {
            width: 200px;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        .border {
            /*border-width: 2px;*/
            /*border-color: gray;*/
            /*border-style: solid;*/
            border: 2px gray solid;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
<!--    main放在前面先渲染-->
    <div class="main">main</div>
    <div class="left"><img class="border" src="tmp.png"></div>
    <div class="right"><img class="border" src="tmp2.png"></div>
</div>
</body>
</html>

相关理论

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342

推荐阅读更多精彩内容

  • **git** 使用笔记
    git 使用笔记 git原理： 文件(blob)对象，树(tree)对象，提交(commit)对象 tree对象 ...
    神刀阅读 3,756评论 0赞 10
  • Git命令大全
    Add & Commit git init 初始化一个 Git 仓库（repository），即把当前所在目录变成...
    冬絮阅读 4,773评论 0赞 8
  • Git学习总结——简单易懂的教程
    安装Git Git的下载地址：Git官网下载地址 Git本地仓库和命令 配置用户 下载完Git后，右键会有一个Gi...
    TokyoZ阅读 4,485评论 1赞 7
  • Git使用教程
    （预警：因为详细，所以行文有些长，新手边看边操作效果出乎你的预料） 一：Git是什么？ Git是目前世界上最先进的...
    axiaochao阅读 1,921评论 1赞 8
  • 2017.8.13
    深夜总是最孤独的时候，也是最容易想很多，感情特别丰富的一个时间段，很多人都说不要在深夜做决定，那个决定可能是...
    可是我没有猫也没有你阅读 74评论 0赞 1