华清远见重庆中心—HTML+CSS基础阶段技术个人总结

目录

一、html标签与使用

1.文本格式标签

2.转义字符

3.行元素与块元素

4.图片与路径

5.列表与a标签

6.表格

7.表单

8.音频与视频

9.内联框架

二、css样式与使用

1.常见样式

2.css的引入

3.选择器

三、浮动与定位

1、浮动

2.定位

四、网格布局

---

一、html标签与使用

1.文本格式标签

<!-- b标签只是单纯加粗文本 -->
    <b>这是粗体</b>
    <!-- strong强调加粗,浏览器会更偏重(渲染) -->
    <strong>这也是粗体</strong>
    <!-- i表示倾斜 -->
    <i>这是斜体</i>
    <!-- 强调斜体标签同strong -->
    <em>这也是斜体</em>
    <!-- 删除线 -->
    <del>这是删除线</del>
    <s>这也是删除线</s>
    <!-- 添加下划线 -->
    <u>下划线</u>
    <!-- insert text 有强调作用同上 -->
    <ins>这也是下划线</ins>

常见的文本格式标签一共有四组，分别为加粗b与strong、斜体i与em、删除线del与s、下划线u与ins。除开这四组还有一个span标签最为常用，它本身不具有任何意义，只是用来展示文本。 

还有一些不常见的如：

    <p>x²</p>

    <p>H₂o</p>

这两个标签分别代表上标签与下标签，浏览器渲染结果为：x²与H₂o，当然当要用的时候记不到可以直接用输入法输入解决。

2.转义字符

 常用转义字符：

    &nbsp;空格

    &lsaquo;左尖括号

    &rsaquo;右尖括号

    &trade;TM符号

    &copy;版权符号

    &ensp;半角空格（半个字符宽的空格）

    &emsp;全角空格（一个字符宽的空格）

上面几种都是常用的html转义字符，转义字符存在的意义是键盘无法直接输入的字符。特别是要想打多空格时要用到上面的&nbsp；要想查看更多的转义字符可以链接网址：HTML转义字符对照表OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具https://tool.oschina.net/commons?type=2

3.行元素与块元素

    块标签（元素）

    特点：独占一行，可以放他元素，可以设置宽高

    常见块元素：h，p，div标签

    注意：p元素不能放入块元素

    行内元素

     特点：不独占一行，一行内可以有多过元素，不可以设置宽高。

     常见行内元素：b,strong,i,em,del,s,u,ins。。。等

其外还有行内块元素，可以通过display：inline-block进行转换设置。该元素不独占一行但是可以设置宽高。

4.图片与路径

img元素

    作用：显示图片

    属性：

        src：必要属性，查找图片位置；

        alt:图片错误，显示信息;

        title:鼠标放上去显示信息；

        width:定义图片的宽度；

        height:定义图片的高度；

    路径：

        相当于电子路线，定位电脑资源

        相对路径：

            相对于当前文件的位置，寻找其他目标的资源。

        绝对路径：

            相对于电脑盘符开始寻找路径。

            浏览器为了安全不允许访问本地资源

5.列表与a标签

 列表：

    无序列表 ul：

        li标签列表项

        无序列表项目符号

        通过type进行修改项目符号

        disc：实心圆点

        circle：空心圆点

        square:正方形

    有序列表

        li标签列表项

        通过type进行修改项目符号

        1:默认阿拉伯数字

        A:大写英文字母

        a:小写英文字母

        I/i：罗马数字

    自定义列表

        dt表示术语或者标题

        dd为dt做出解释

    所有标签下都可以放其他标签

a标签

        href:定义超链接跳转的路径

        target="_blank"新起一页进行页面的显示

        target="_self"默认本窗口显示跳转之后的内容

        target="_parent"在父页面的窗口显示

    锚点

        定位的点，给要调转的地方设置一个id属性，a标签的href=“#+对应id属性名”

        实现id锚点跳转

其中，列表一班会与a标签进行配合使用，比如常见<li><a></a></li>来实现一些链接跳转。

6.表格

table

    tr (table row)行

    td (table data)列

    th (table head)有加粗的效果

    表格常用属性:

    border 表格的边框，值为数字

    cellspacing 单元格之间的间隙（像素）

    cellpadding 单元格的内边距（像素）

    width 设置表格的宽度

    align 控制表格内容的位置

表格在很多布局中可以被使用到，其中还有两个比较重要的使用方法。

合并单元格

rowspan 合并行 数值，数值为多少就合并多少行，保留最上面一行的数据

colsapn 合并列 数值，数值为多少就合并多少列，保留最左边的一列

表格结构

        thead>tbody>tfoot

        这三个属性的显示顺序是固定，不会因书写顺序而改变位置

7.表单

    <form action="#">
        <input type="text">
        <input type="password">
        <input type="radio">男
        <input type="radio">女
        <input type="checkbox">记住密码
        <input type="date">
        <input type="month">
        <input type="datetime-local">
        <input type="color">
        <input type="file">
        <input type="button" value="登录">
        <input type="submit">
        <input type="reset">
    </form>

 表单首先就是表单域：

表单域form

        表单域的名字可以有多个，一个页面可以有多个名字

        action 设置服务器地址，将信息传递给后端，（url地址）

        method 设置提交的方式

            get 把提交的参数附在action的URL地址中一般用于不需要保密的信息比如分页

            post 把提交的参数包含在表单体中，不会显示在地址栏中。

    表单元素input

        表单元素要放在form表单中

        行内元素

        type

            text 输入文本

            password 密码

            radio 单选

            checkbox 复选框

            date 时间

            color 颜色

            file 文件选择框

            button 按钮

            submit 提交

            reset 重置

input框的几个重要属性值：

        name 第一元素的名字 他的值来至于输入的值或者value的值

            单选按钮要设置name值进行通类分组

            复选框也要添加name值

        value 元素的值

        placeholder 设置输入框的提示文字

        required 设置必填项，不填将弹出提示信息

        checked 在打开页面时处于，默认选择状态

        readonly 设置只读属性,不可进行修改

        disabled 设置元素不可用

8.音频与视频

音频与视频的标签分别为audio与vdieo，可以设置显示组件controls、自动播放autoplay、循环播放loop以及静音muted，当然还有宽高。值得注意的是以为浏览器兼容问题，几乎大多数浏览器都禁止自动播放autoplay。只有当设置静音muted时才可以进行自动播放。（据我上网问了度娘可能是用户使用协议，必须要用户进行点击操作才可以自动播放，想想看也是，自动播放会在用户不允许的情况下消耗流量以及带来影响。）

<audio src="" controls="controls">您浏览器不支持该音频</audio>

<video src=" " controls autoplay width="400px" loop>你的浏览器不支持该视频</video>

9.内联框架

<style>
    .bg {
        background-image: url(./bg.jpg);
        background-size: cover;
    }
</style>

<body>
    <a href="./35.活动表格.html" target="content">活动表格</a>
    <a href="./36.请假单.html" target="content">请假单</a>
    <a href="./32.视频.html" target="content">视频</a><br>
    <iframe name="content" src="" frameborder="1" width="800px" height="800px" class="bg"></iframe>
</body>

 上面就是内联框架的例子，内联框架使用的是iframe标签，是不使用js就可以实现单页面内容切换。与a链接配合使用，iframe要设置name值对应a标签里面的target属性值，以便a标签下的内容显示在iframe中，iframe中src属性是默认显示路径，可以不填，frameborder是设置iframe边框的大小。（有趣的上一个音频与视频不是不能自动播放吗，在使用iframe时将视频放入iframe中就可以有声音的自动播放了，但总归还是要点击一下视频a标签。）

二、css样式与使用

1.常见样式

背景：background

        属性有：background-color、background-image：url（）、ackground-repeat、background-size、background-origin、background-clip、background-position。

大小单位：

        px:像素值，%相对于元素大小的百分比值，1em：一个字符宽，lrem：相对于根节点（html元素）元素的一个字符宽。2ex：一元素字符的搞。

盒模型的样式：

        盒模型样式有：width、height、margin、padding、border、box-sizing

calc() 计算函数:

        函数中可以由任意单位的尺寸进行运算

        请注意计算的符号左右有空格

文本样式：

        font-size、text-align、font-family、font-weight、color、letter-spacing（字间距）、text-transform（修改大小写）

隐藏元素的几种方法:

/* 隐藏元素的几种方法: */

            /* 1. display: none 元素性质直接设为无 */
            /* display: none; */

            /* 2. opacity: 0 通过透明度 */
            /* opacity: 0; */

            /* 3. transform: scale(0) 元素缩放为0 */
            /* transform: scale(0); */

            /* 4. visibility: hidden 可见性设为不可见 */

2.css的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #other {
            color: #00ff00;
        }
    </style>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <div id="other" style="color: #ff0000">hello world</div>
</body>
</html>

css的引入有三种1.内部引入2.外部引入3.嵌入引用 

3.选择器

基础选择器：

        标签选择器、id选择器、类选择器

派生选择器（在基础选择器的基础上衍生出来的选择器）：

        后代选择器：选择后代元素

        子代选择器：选择子代元素

        兄弟选择器、复合选择器（交集选择器，并集选择器）

属性选择器：

        /* 从左到右读选择器，该选择器的含义为：input标签中含有name属性且属性值为name的标签 */
        input[name='name'] {
            border: 5px solid pink;
        }

        /* 选择input标签中包含name属性，且属性值以ag开头的所有标签 */
        input[name^='ag'] {
            border: 5px solid rgb(0, 238, 255);
        }

        /* 选择input标签中包含name属性，且属性值以end结尾的所有标签 */
        input[name$='end'] {
            border: 5px solid rgb(255, 153, 0);
        }

        /* 若同为属性选择器，优先级取决于前面的selector的基础选择器类型 */
        .de[name*='good'] {
            border: 5px solid rgb(245, 11, 11);
        }

        /* 选择input标签中包含name属性，且属性值包含good的所有标签 */
        input[name*='good'] {
            border: 5px solid rgb(245, 11, 225);
        }

        /* 优先级相同的选择器，写在后面的样式会覆盖前面的样式 */
        /* input[name^='good'] {
            border: 5px solid rgb(11, 245, 42);
        } */

伪元素选择器：

        ：link（连接时的属性）

        ：hover（鼠标放上去的属性）

        ：active（点击时激活的属性）

        ：visited（点击过后的属性）

        书写顺序link>visited>hover>active

选择器的优先级：

        基础选择器优先级：id>class>tag

        复合选择器的数量相同时，从左到右依次对比基础选择器，哪边优先级高就采用哪边

        所有选择器的优先级相同，但选择器数量不同，选择器数量多的将被应用

        当选择器优先级相同时，下面的内容将覆盖上面的内容

三、浮动与定位

1、浮动

        float：left/right(浮到左侧或者右侧)

        清楚浮动：由于container下所有子元素都浮动出去了，所以导致父元素高度坍塌(高度为零）

                          1. 给高度坍塌的父元素添加 overflow: hidden

                          2. 给高度坍塌的父元素的下一个元素添加 clear: both

2.定位

        绝对定位：absolute 参考系: 默认参考视口(viewport) 绝对定位的元素将浮出文档流

        相对定位：relative 参考系: 自己

        固定定位：fixed 参考系： 视口 该定位方式，当滚动条发生变化时，位置不会变化 

        粘性定位：sticky 参考系：视口（一般导航栏会使用）

四、网格布局

            基本用法

                display: grid

                grid-template-rows

                grid-template-columns

            通过网格线设置单元格位置和大小

                grid-row-start

                grid-row-end

                grid-row

                grid-column-start

                grid-column-end

                grid-column

            通过命名区域的方式进行布局

                grid-template-areas

                grid-area

            网格间距

                row-gap

                column-gap

                gap