华清远见重庆中心—HTML+CSS基础阶段技术个人总结_华清远见实训html页面与haas板连接项目成品-CSDN博客

<!-- 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标签最为常用，它本身不具有任何意义，只是用来展示文本。

还有一些不常见的如：

x2

H2o

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

2.转义字符

常用转义字符：

 空格

&lsaquo;左尖括号

&rsaquo;右尖括号

™TM符号

©版权符号

&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

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

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

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