• HTML和CSS

    HTML和CSS

    HTML

    基础讲解

    1569173197503
    要点：

    1. 标记语言不是编程语言
    2. .html和.htm都是html文档的后缀
    3. 标签有围堵和自闭两类
    4. 开始标签中可以定义属性，属性的值要用引号引起来

    H5一般用于移动端的开发

    1569204650388

    文件标签

    H5中新增了一个lang标签，放在<!DOCTTPE html>之后，用于表示页面目标群体所在的国家，我们一般这样写：

    <html lang="ch">

    meta标签用来指定字符集:<meta charset="UTF-8">

    注意，html中的注释格式为：<!-- 内容 -->

    图片标签

    图片标签是自闭标签

    <img src="图片的相对路径"/>

    相对路径从html所在的文件夹开始，可以用.表示当前文件夹，".."代表上一层目录，"/"代表根目录。如果图片和html放置在同一个文件夹下，则相对路径可以写为./图片名，也可以写为当前文件夹名/图片名，当然，也可以什么都不写，此时默认就是./

    img标签下的属性：

    1569205610557
    1569206384627
    图片加载失败了，就显示alt中的文字信息

    列表标签

    1569206941224
    1569206963824

    链接标签

    <a herf="点击后要跳转到的位置">要显示的文本内容</a>

    属性：

    target: _self:在本页面打开； _blank：在空白页面打开

    mailto:邮箱名：点击之后会启动邮箱对其发邮件：

    1569207280379
    也可以为图片添加超链接（但这种方法其实不常用，更多时候是用Javascript实现的)：

    1569207331249

    块标签

    div和span，与CSS搭配使用。

    span默认在一行中展示，是行内标签；而div会换行，是块级标签

    题外话：

    标签：
    标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

    语义化标签：H5新定义

    在html4中，为了区分不同块的作用以及提高文档可读性，我们会在每一个div标签中定义一个id，而在H5中则直接提供了语义化标签：

    <header>:头部

    <footer>:尾部

    这些标签同样是要结合CSS一起来使用的

    表格标签

    HTML中，表格只有行的概念，列要分别在行中定义单元格进行。输入的时候是一行一行输入

    1569207968793
    <table>：定义表格，border属性定义表格线，width表示表格宽度

    注意，这里border对应的是“1”“2”等，这个1表示的是用几条线包围td r，所以如果这个值是1，两个单元格之间其实有两条线。如果要变成一条线，应该将cellspacing属性，也就是定义单元格之间空白的属性，设置为0.

    1569208411450
    <tr>:定义行

    <td>：定义单元格

    <th>:定义表头单元格

    <caption>:定义表格标题

    1569209939573
    上面三个没有样式，而同样是为了与CSS搭配，同时增强阅读性

    定义了三个部分之后，表格就会按thead-tbody-tfoot的顺序展示，和书写的顺序就无关了

    合并单元格：

    1. 合并行

      colspan，值为几就合并从这里向下几个行，合并之后的算在第一行中

      例如：1569210370676

    2. 合并列

      rowspan，值为几就合并从这里向右几个列，合并之后的算在第一列中

    如果不使用CSS,table也可以用来做布局，由于网页的布局总是比较复杂的，并不好说有几列，所以多使用table的嵌套来完成，这样每一行就只有一个单元格了

    实例：旅游网首页简版

    1569210967260

    <!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网</title>
</head>
<body>
    <!--采用Table来完成布局-->
    <!-- 最外层Table，用于整体布局-->
<table width="100%",align="center">
    <tr>
        <td>
            <img src="./source/image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="source/image/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="source/image/search.png" alt=">"
                    </td>
                    <td>
                        <img src="source/image/hotel_tel.png"alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <table width="100%" align="center" cellspacing="0">
            <tr bgcolor="orange" align="center" height="45" >
                <td>
                    <a href="https://www.baidu.com">首页</a>
                </td>
                <td>
                    门票
                </td>
                <td>
                   酒店
                </td>
                <td>
                    香港车票
                </td>
                <td>
                    出境游
                </td>
                <td>
                    国内游
                </td>
                <td>
                    港澳游
                </td>
                <td>
                    抱团定制
                </td>
                <td>
                    全球自由行
                </td>
                <td>
                    收藏排行榜
                </td>
            </tr>
        </table>
    </tr>
    <tr>
        <!-- 轮播图-->
        <td>
            <img src="source/image/banner_3.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_5.jpg">黑马精选<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table width="95%">
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_1.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                        <!-- &yen是人民币符号的表示，其后必须加一个分号-->
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_6.jpg">国内游<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2" height="100%">
                        <img src="source/image/guonei_1.jpg">
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jingxuan_2.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <img src="source/image/icon_7.jpg">境外游<hr color="orange">
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2" height="100%">
                        <img src="source/image/jiangwai_1.jpg">
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="source/image/jiangxuan_3.jpg">
                        <p>上海飞三亚，五天四晚自由行</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <img src="source/image/footer_service.png" width="100%">
    </tr>
    <tr>
        <td >
            <table bgcolor="orange" align="center" width="100%">
                <tr>
                    <td align="center">
                        <font color="gray" size="2" >
                            贾丁版权所有
                        </font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

    表单标签

    表单：用于采集用户输入的数据，用来和服务器进行交互

    使用的标签：form,用于定义一个范围，表示采集用户数据的范围

    表单项中的数据要想被提交，必须指定其name属性

    1569220543648
    #可以用来表示当前页面

    get和post的区别：

    1569220847420

    • input:可以通过修改type属性值，改变元素展示的样式

      Input常见元素类型：

      1. text：文本输入，是input项的默认值

      2. password：密码输入框，是密文显示的

      3. radio：单选框。要想让多个单选框实现单选的效果，则多个单选框name属性值必须一样，这样才能声明他们是归于同一组的

      为每一个单选框设置value属性作为提交时的值，注意，value和name是不一样的，不能混为一谈

      1569254509748
      4. checkbox：复选框

      ? checked="checked"//默认被选中

      placeholder属性：给出输入框的提示信息

      题外话：label元素的作用。如果将输入框对应的文字放置在label中：

      1569254924793
      1. file:文件选择框<input tyep="file" name='file'>
      2. hidden:隐藏域：不被显示，但是值可以被提交，以便于携带隐藏数据一并提交
      3. submit:提交按钮
      4. button:一个纯按钮，一般和JavaScript配合使用以实现动态效果
      5. 用image做按钮：src引用图片位置，input类型中就填image,这样就会把图片作为按钮了
      6. color：取色器，选中的颜色也会被提交
      7. data:年月日
      8. datatime-local:年月日+小时分钟
      9. email：会自动对输入的内容进行校验，必须符合邮箱格式
      10. number：自动校验输入内容是否为数字

    • select:下拉列表

      列表项要用option进行定义，当然我们也要给select加value

      1569255824973
      一般第一项都会写“请选择之类的引导性的话，当然用户要是提交了这个也不行，所以要对它设计特定的值并在随后检验

      题外话：最后提交的表单项是一个key:value形式的，这里的key就是select的name（注意不是它的value,我们不会直接对select设置value的，那就没有选的意义了)

    • textarea:文本域

      多行的待输入区域

      常用属性:

      1. cols:列数
      2. rows:行数

    CSS

    CSS概述

    1569256417102

    CSS的优点：

    1. 功能强大
    2. 将内容的展示和样式的控制分离（解耦）：降低耦合度以便于分工协作、提高开发效率以及CSS的重用性（因为不需要和具体HTML内容绑定了，可以套在不同HTML上）

    CSS与HTML结合

    1. 内联样式：在标签内使用style属性指定css代码

      1569256739778
      不推荐使用，没有实现解耦的效果，并且只对当前元素生效

    2. 内部样式:在head标签内定义style标签，其的标签体内容就是css代码

      作用域更大了，可以作用域整个HTML页面

      1569256889296

    3. 外部样式:在外部的CSS文件中写CSS代码

      1. 定义CSS资源文件
      2. 在head标签内，定义link标签，引入外部资源文件

      这种方式下，CSS文件的作用域可以拓展到整个项目

    1569257004262
    ? 也可以写为：

    1569257074278

    CSS基础语法

    CSS格式

    1569289463840
    选择器：筛选具有相似特征的元素。例如如果我们写div，那么所有的div都会被控制

    CSS的注释：

    /*
注释内容
*/

    注意，每一对属性都要用分号隔开，最后一个可以不加

    如果CSS格式有问题，则不会生效

    CSS选择器

    1. 基础选择器

      1. id选择器：选择具体id属性值的元素

        语法：#id属性值{内容}

        注意，对于div和p,我们也能给他们赋id

        建议在一个html中选择唯一id

      2. 元素选择器:选择有相同标签名称的元素

        如果一个元素被多个同级别的css控制且控制的类型相同，则后面的会覆盖前面的

        id选择器的优先级高于元素选择器

      3. 类选择器：选择具有相同的class属性值的元素

        语法:.class属性值{}//注意前面那个.

        在元素内部可以定义类：1569293035068
        类选择器的优先级也高于元素选择器

    2. 拓展选择器

      1. *{}:选择所有元素

      2. 并集选择器，语法为 ；选择器1，选择器2{}。

      3. 子选择器，语法为“选择器1 选择器2{}“:筛选选择器1元素下的选择器2元素

        1569293309316
        例如像这样，操作div下的p

      4. 父选择器,语法为“选择器1>选择器2{}":筛选选择器2的父元素选择器1

        1569293401848
        操作的是p标签的父类div标签

      5. 属性选择器,语法为"元素名称[属性名=“属性值]{}",一般用于input元素下的选择（因为input元素下的种类太多了，需要通过指定属性名来指定元素）

      6. 伪类选择器,选择一些元素具有的状态，语法为：“元素：状态{}”，一个典型的使用是用来控制超链接：

        1569293803949

    CSS属性

    1. 字体、文本

      1. font-size:字体大小
      2. color:文本颜色
      3. text-align:对齐方式
      4. line-height:行高

    2. 背景

      background:背景，可以使用图片

      background: url("image/test.png")no-repeat center;

    3. 边框

      1. border:设置边框，是一个复合属性。

        四条线组成一个边框，每一条线都可以单独设置，如果泛指border那就是指四个一起。

        多个属性值用空格隔开就好了

    4. 尺寸

      1. 宽度
      2. height:高度

    5. 盒子模型

      把元素当成盒子来看待，主要用来控制布局。

      • mergin:外边距
      • padding:内边距

      1569394996512
      每一个方向上的内外边距其实都是可以单独设置的

      内外边距都是相对的，它取决于当前我们所研究的元素是哪个。

      1569394841540
      举个例子：

      1569395085178

    注意，修改内边距会改变盒子大小。解决方案：设置盒子属性box-sizing为border-box，让width和height就是最终盒子的大小。

    • 浮动：float

      left/right:左浮动、右浮动

      最最最最最简单的理解是，浮动可以实现元素排列在一行

      关于浮动，这里有更加详细的介绍：https://www.jianshu.com/p/07eb19957991
  • 相关阅读:
    主流开源深度学习框架对比分析
    机器学习资源汇总----来自于tensorflow中文社区
    Caffe fine-tuning 微调网络
    最牛逼的开源机器学习框架，你知道几个
    基于OpenCL的深度学习工具：AMD MLP及其使用详解
    写作是这个时代最好的自我投资
    nanoporetech/nanonet
    nanonets
    有道添加词典
    一道算法
  • 原文地址：https://www.cnblogs.com/BeyondTechnology/p/15212321.html
Copyright © 2020-2023  润新知