HTML以及CSS相关知识总结(一)

近日就开始回顾html和css相关知识啦，并且会学习html5和css3的新知识，以下是我对记忆不太深刻的地方以及新知识点的总结：

Web标准：

结构：用于对网页元素进行整理和分类，即HTML

表现：用于设置网页元素的版式，颜色，大小等外观样式，即CSS

行为：指网页模型的定义及交互的编写,即Javascript

VS常用快捷键：

快速复制下一行：shift+alt+下箭头

同时选中多个相同单词：ctrl+d

添加多个光标：ctrl+alt+下箭头（上箭头）

全局替换某个单词：ctrl+h

快速定位到某一行：ctrl+g

选择某个区块：shift+alt,之后拖动鼠标

<!DOCTYPE>:文档类型声明标签

 <DOCTYPE html>：即为当前页面采用的是HTML5版本来显示网页

  <html lang="en">：en表示该网页为英文网页，zh-CN表示为中文网页，fr为法文网站 

字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码，一般情况下，统一使用"UTF-8"编码，即万国码，基本包含了全世界所有国家需要用到的字符。

换行标签:<br/>，单标签，不像段落标签段落与段落之间有较大空隙，换行只是移至下一行

水平线：<hr>

文本格式化标签：突出重要性

加粗：<strong></strong>,<b></b>

倾斜：<em></em>,<i></i>

删除线：<del></del>,<s></s>

下划线：<ins></ins>,<u></u>

均推荐使用前者：语义更加强烈

img标签相关属性：

title：鼠标移至图片上所显示的文字

alt：图像显示不出来时用该文字替换

border:图片边框粗细

相对路径：

下一级路径：/ 

 超链接（a）标签相关属性：

href：指定链接目标的url地址

target：指定链接页面的打开方式，_self：默认打开方式_blank：打开新的窗口

内部链接：<a href=”index.html“>XXX</a>

空链接：<a href=”#“>XXX</a>

下载链接：<a href=”img.zip“>XXX</a>,如果href里面地址是一个文件或者压缩包，会下载这个文件

锚点链接： 快速定位到链接里的某个位置，<a href=”#name“>XXX</a>，将目标标签加上属性id=”name“，例如：<h1 id="name">XXX</h1>,此时点击链接就会跳转到h1标签指代的位置

特殊字符(必记)：

空格：&nbsp;

大于：&gt;,great than

小于：&lt; ,less than

 表格标签：

 <table align="center" border="1" cellpadding="20" cellspacing="0" width="200">
        <thead>
            <tr><!--表格中的行-->
                <th>姓名</th><!--表头单元格，加粗居中显示-->
                <th>姓名</th><!--表头单元格，加粗居中显示-->
                <th>姓名</th><!--表头单元格，加粗居中显示-->
                <th>姓名</th><!--表头单元格，加粗居中显示-->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><!--表格中的单元格，table data-->
                    单元格内的文字
                </td>
            </tr>
        </tbody>
    </table>

cellpadding：规定单元边沿（左边沿）与其内容之间的空白，默认1像素

cellspacing：规定单元格之间的空白，默认2像素

border：规定表格是否有边框

align：相对周围元素的对齐方式

width：规定表格宽度

合并单元格：

跨行单元格以最上方单元格为目标单元格

跨列单元格以最左侧单元格为目标单元格

以下为样例：

     <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <thead>
            <tr><!--表格中的行-->
                <th rowspan="2">姓名</th><!--表头单元格，加粗居中显示-->
                <th colspan="2">姓名</th><!--表头单元格，加粗居中显示-->
            </tr>
        </thead>
        <tbody>
            <tr>
                
                <td rowspan="2"><!--表格中的单元格，table data-->
                    单元格
                </td>
                <td><!--表格中的单元格，table data-->
                    单元格
                </td>
                <td><!--表格中的单元格，table data-->
                    单元格
                </td>
            </tr>
            <tr>
                <td><!--表格中的单元格，table data-->
                    单元格
                </td>
                <td><!--表格中的单元格，table data-->
                    单元格
                </td>
            </tr>
        </tbody>
    </table>

注意：给目标单元格加上属性之后记得删除多余的单元格，上图删去了第三列第一个单元格和第三行第一个单元格

 列表标签：

有序： <ol><li></li></ol>

自定义：<dl><dt><dd></dd></dt></dl>

 表单标签：

表单域： <form action="" method="post" name="name1"></form>

<input type="text" value="请输入用户名" maxlength="6"><!--文本框-->
<input type="password"><!--密码框-->
<input type="radio" name="sex"><!--单选按钮-->
<input type="checkbox" checked><!--多选框-->
<input type="submit" value="免费注册">
<input type="reset" value="重新填写"><!--重置按钮，重新填写数据-->
<input type="button"><!--后期结合JS使用，常用于给手机发送短信-->
<input type="file" ><!--上传文件-->

注意：单选框若要实现多选一的效果，必须将同一类的选项附上相同的名字，这样才能实现多选一的效果。

value值为文本框默认带的文字

单选按钮和多选按钮：共有属性：checked，默认选中

label标签：用于绑定一个表单元素，当点击label标签内的文字时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素用来增加用户体验

例如：填写用户名信息时，选择用户名即文字就可聚焦该文本框

    <label for="text">用户名</label>
    <input type="text" id="text">

注意：label属性里的for和input的id属性要相对应

下拉表单：

    <select name="" id="">
        <option value="">XXX</option>
        <option value="">XXX</option>
        <option value="" selected>XX</option>
        <option value="">XXX</option>
        <option value="">XXX</option>
    </select>

select与option搭配

文本域：

    <textarea name="" id="" cols="30" rows="10"></textarea>

tip：若要写出两列整齐的结构，例如，用户填写信息时，姓名，文本框可使用表格进行规划姓名，文本框即两个td，整体一行为tr，以此类推。

推荐查阅信息的网站:

W3C:  http://www.w3school.com.cn/

 id选择器:

 #div {
            color: red;
        }
<div id="div">
        CSDN博客
    </div>

 id选择器只能调用一次！用过一次之后其他相同id名字不可再次使用

通配符选择器：将所有标签都改样式。

        * {
            color: red;
        }

字体样式：

        .em{
            font-style: italic;
        }

字体复合样式：font:font-style font-weight font-size/line-height font-family;顺序不可颠倒

text-align：center；文本水平居中

text-decoration:line-through;删除线，underline,下划线，overline,上划线 ，none，取消

text-indent：2em；文本缩进（第一行）

内联样式：在html文件中的style中的样式

行内样式：在标签属性中写的样式

外部样式表：专门写一个css文件写样式

    <link rel="stylesheet" href="xxx.css">
  •  文字内的元素不能使用块级元素：p标签里不可存放块级元素，h1-h6里均不能存放块级元素
  • 常见行内块元素：img，表单元素，单元格td等
  • background-color：transparent；设置背景透明效果 
  • background-position：x，y；如果只写一个，另一个默认居中
  • 混合单位：background-position：20px center；x为20px，y为center（有顺序关系）
  • background-attachment：fixed/scroll;背景图像固定/背景图像随内容滚动
  • 背景复合写法：background:背景颜色 背景图片地址 背景平铺（重复） 背景图像滚动 背景图片位置; 例： background:transparent url(image.jpg) repeat-x fixed top;

行高为1.5，即为行高为当前文字的1.5倍 

选择器的权重：

选择器

选择器权重

继承或*0，0，0，0
元素选择器0，0，0，1
类选择器，伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式style=”“1，0，0，0
！important 重要的=无穷大
注意： 继承的权重为0 

    <style>
        #father
        {
            color: red;
        }
        p{
            color: pink;
        }
       
    </style>
    <div id="father">
        <p>猜猜我是什么颜色</p>
    </div>

由以上代码可知，尽管ID选择器的权重比元素选择器的权重大，但p元素仍然使用了元素选择器的样式，因为ID选择器为父元素的样式，而p元素对于父元素的样式为继承，权重为0，故元素选择器的样式占上方。

  • 表格细线边框 ：border-collapse:collapse;  合并相邻的边框
  • padding:
值的个数表达意思
padding:5px上下左右全为5
padding:5px 10px上下5，左右10
padding:5px 10px 20px上5  左右10 下20
padding:5px 10px 20px 30px上右下左，顺时针依次对应

注：若一个盒模型未设定宽度或高度，则设置padding之后不会撑大盒子。

  • 块级元素水平居中：设定宽度，margin:0 auto;
  • 行内元素或者行内块元素水平居中给父元素添加text-align:center;

外边距合并问题(当父元素和子元素均设置margin-top时，子元素与父元素的外边距合并问题，最终表现为父元素和子元素离上方元素距离为二者margin-top的最大值)解决方案 ：

  • 为父元素加上边框（将边框设置为透明）
  • 给父元素设置内边距
  • 为父元素添加overflow:hidden

清除内外边距：

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先清除·网页元素的内外边距。 

        * {
            padding: 0;
            margin: 0;
        }

行内元素设置内外边距时，只可设置左右内外边距，设置上下无效，除非将其改为块级元素或行内块元素。

 ps相关操作快捷键：

  • ctrl+r：打开标尺，或者视图->标尺，右击标尺，改变单位为像素
  • ctrl+加号：放大试图，缩小同理
  • 按住空格键，鼠标变成小手，拖动图片至任意位置
  • 用选区拖动可以直接测量大小
  • ctrl+d：取消选区，也可直接在旁边空白处点击一下

去掉无序列表前面的圆点：在li样式里加入list-style:none;

border-radius:

若想制作成如上样式，只需将border-radius设置为矩形高度的一半即可。

    <div class="rect" style="width: 200px; height: 100px; background: pink; border-radius: 50px;"></div>
  •  border-radius也可写成四个值，从左上开始顺时针对应圆的半径
  • 若为两个值，则分别对应两组对角线，第一个值为左上角对应的对角线，以此类推

盒子阴影 ：

box-shadow:h-shadow v-shadow blur spread color inset;

值描述
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊距离（影子的虚实）
spread可选，阴影的尺寸（大小）
color可选，阴影的颜色
inset可选，将外部阴影（outset）改为内部阴影
  • 阴影默认为外部阴影，但不可写出来，写出来之后阴影就无效，但如果要改为内部阴影，内部阴影（inset）就必须得写出来
  • 盒子阴影不占用空间，不会影响其他元素的排列
box-shadow: 10px 10px 10px rgba(0,0,0,.3);

 文字阴影：

text-shadow:h-shadow v-shadow blur color;

值描述
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊的距离
color可选，阴影的颜色

格式和盒子阴影基本相同 

  • 浮动元素具有行内块的特性，如果行内元素有了浮动，则不需要转换为行内块或者块级元素，就能直接设置宽高
  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但若是添加浮动元素，他的大小根据内容决定
  • 浮动盒子会避开标准流盒子，标准流盒子不会避开浮动盒子

浮动元素不再占有原文档流的位置，导致外部元素无法感知浮动盒子而造成高度坍塌

解决高度坍塌的方法：

1.在最后一个浮动元素后面加上一个<div class="clear"></div>，新增的盒子必须是块级元素

    <style>
        .box {
            width: 500px;
            background-color: antiquewhite;
            border: 1px solid black;
        }
        .c1,.c2,.c3 {
            float: left;
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin-right: 5px;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="clear"></div>
    </div>
</body>

 2.给父元素加上overflow属性，将其属性设置为hidden或auto或scroll

3.给父元素添加伪元素使其撑开父元素

        .clearfix:after{
            content: "";
            display: block;
            height:0;
            clear: both;
            visibility: hidden;
        }

给父元素加上类名clearfix之后会产生同样效果

4.给父元素添加双伪元素，还是要给父元素添加类名clearfix

        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/339440.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算机的受信任平台模块出现故障,错误代码 80090016

计算机的受信任平台模块出现故障,错误代码 80090016

在一次修改 MicroSoft 365 密码后&#xff0c;本地登录Teams出现错误&#xff1a; 计算机的受信任平台模块出现故障。如果此错误仍然存在&#xff0c;请与系统管理员联系&#xff0c;并提供错误代码80090016。 详细信息&#xff1a;https::/www.microsoft.com/wamerrors Teams…
阅读更多...
OpenAI的GPT接口的调用流程

OpenAI的GPT接口的调用流程

要调用OpenAI的GPT接口&#xff0c;您需要获得API密钥&#xff0c;并使用HTTP请求发送请求。以下是一般的步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.获取OpenAI API密钥&#xff1a; 在使…
阅读更多...
Threejs实现立体3D园区解决方案及代码

Threejs实现立体3D园区解决方案及代码

一、实现方案 单独贴代码可能容易混乱&#xff0c;所以这里只讲实现思路&#xff0c;代码放在最后汇总了下。 想要实现一个简单的工业园区、主要包含的内容是一个大楼、左右两片停车位、四条道路以及多个可在道路上随机移动的车辆、遇到停车位时随机选择是否要停车&#xff0…
阅读更多...
【MATLAB源码-第121期】基于matlab的斑马优化算法(ZOA)机器人栅格路径规划，输出做短路径图和适应度曲线。

【MATLAB源码-第121期】基于matlab的斑马优化算法(ZOA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 斑马优化算法&#xff08;Zebra Optimization Algorithm&#xff0c;简称ZOA&#xff09;是一种模仿斑马群体行为的优化算法。在自然界中&#xff0c;斑马是一种社会性很强的动物&#xff0c;它们具有独特的群体行为模式&…
阅读更多...
精品基于Uniapp+springboot菜谱美食饮食健康管理App

精品基于Uniapp+springboot菜谱美食饮食健康管理App

《[含文档PPT源码等]精品基于Uniappspringboot饮食健康管理App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm 安卓…
阅读更多...
Leveraging Unlabeled Data for Crowd Counting by Learning to Rank

Leveraging Unlabeled Data for Crowd Counting by Learning to Rank

无标签人群技术&#xff0c;作者引入了一种排名。 利用的是一个图的人群数量一定小于等于包含这个图的图 生成排名数据集 作者提出了一种自监督任务&#xff0c;利用的是一个图的人群数量一定小于等于包含这个图的图 流程&#xff1a; 1.以图像中心为中心&#xff0c;划分一…
阅读更多...
All the stories begin at installation

All the stories begin at installation

Before installation, there are some key points about Conan: “Conan is a dependency and package manager for C and C languages.”“With full binary management, Conan can create and reuse any number of different binaries (for different configurations like a…
阅读更多...
MATLAB Fundamentals＞＞＞Smoothing Data with Moving Average

MATLAB Fundamentals＞＞＞Smoothing Data with Moving Average

MATLAB Fundamentals>Common Data Analysis Techniques>Smoothing Data> (2/5) Smoothing Data with Moving Average 例1&#xff1a; Smoothing method:Moving mean Moving window:Centered 2 代码2&#xff1a; % Smooth input data ySm smoothdata(y,"mov…
阅读更多...
系统引导器GRUB

系统引导器GRUB

全称为GNU GRUB&#xff0c;来自GNU计划的多操作系统引导器。 作用&#xff1a; 查看引导分区内容 ls /boot ls /boot/grub2/ 查看GRUB2的配置文件 cat /boot/grub2/grub.cfg 可以看到/boot中保存的文件主要是linux内核、内存映像文件等。 注意到是子用户&#xff0c;但在…
阅读更多...
Elasticsearch+Kibana 学习记录

Elasticsearch+Kibana 学习记录

文章目录 安装Elasticsearch 安装Kibana 安装 Rest风格API操作索引基本概念示例创建索引查看索引删除索引映射配置&#xff08;不配置好像也行、智能判断&#xff09;新增数据随机生成ID自定义ID 修改数据删除数据 查询基本查询查询所有&#xff08;match_all&#xff09;匹配查…
阅读更多...
axios的基本使用

axios的基本使用

在项目根目录下创建js目录&#xff0c;目录中添加axios.min.js文件 准备页面&#xff1a;testAxios.html: 实现一个简单的GET请求 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title>…
阅读更多...
Java数据结构之排序(头歌平台，详细注释)

Java数据结构之排序(头歌平台，详细注释)

目录 第1关&#xff1a;选择排序 任务描述 相关知识 代码&#xff1a; 第2关&#xff1a;插入排序 任务描述 相关知识 插入排序 代码&#xff1a; 第3关&#xff1a;归并排序 任务描述 相关知识 归并排序 原理 代码&#xff1a; 第4关&#xff1a;快速排序 任务描述 相关…
阅读更多...
Prometheus配置Grafana监控大屏（Docker）

Prometheus配置Grafana监控大屏（Docker）

拉取镜像 docker pull grafana/grafana挂载目录 mkdir /data/prometheus/grafana -p chmod 777 /data/prometheus/grafana临时启动 docker run -d -p 3000:3000 --name grafana grafana/grafana从容器拷贝配置文件至对应目录 docker exec -it grafana cat /etc/grafana/gra…
阅读更多...
[C++]:12:模拟实现list

[C++]:12:模拟实现list

[C]:12:模拟实现list 一.看一看SGI的stl_list的源码&#xff1a;1.基础结构构造函数1.节点结构&#xff1a;2.节点构造函数&#xff1a;3.链表结构&#xff1a;4.链表的构造函数&#xff1a; 2.析构1.节点析构&#xff1a;2.链表的析构&#xff1a; 3.迭代器 二.模拟实现list1.…
阅读更多...
PyTorch深度学习实战（31）——生成对抗网络(Generative Adversarial Network, GAN)

PyTorch深度学习实战（31）——生成对抗网络(Generative Adversarial Network, GAN)

PyTorch深度学习实战&#xff08;31&#xff09;——生成对抗网络 0. 前言1. GAN2. GAN 模型分析3. 利用 GAN 模型生成手写数字小结系列链接 0. 前言 生成对抗网络 (Generative Adversarial Networks, GAN) 是一种由两个相互竞争的神经网络组成的深度学习模型&#xff0c;它由…
阅读更多...
EOCR电机保护器带煤电厂的具体应用

EOCR电机保护器带煤电厂的具体应用

EOCR系列电动机智能保护器在煤电厂中有广泛的应用。这些保护器具有齐全的保护功能、直观的测量参数、快速的反应灵敏度、可靠的行动以及与上位机通讯构成远程监控的能力&#xff0c;使其成为理想的低压电动机保护及远程监控产品。 在煤电厂中&#xff0c;电动机保护器需要具备过…
阅读更多...
SpringCloud Aliba-Sentinel【上篇】-从入门到学废【4】

SpringCloud Aliba-Sentinel【上篇】-从入门到学废【4】

&#x1f3b5;诗词分享&#x1f3b5; 大江东去&#xff0c;浪淘尽&#xff0c;千古风流人物。 ——苏轼《念奴娇赤壁怀古》 目录 &#x1f37f;1.Sentinel是什么 &#x1f9c2;2.特点 &#x1f9c8;3.下载 &#x1f32d;4.sentinel启动 &#x1f953;5.实例演示 1.Senti…
阅读更多...
IOT pwn

IOT pwn

已经过了填坑的黄金时期 环境搭建 交叉编译工具链 很多开源项目需要交叉编译到特定架构上&#xff0c;因此需要安装对应的交叉编译工具链。 sudo apt install gcc-arm-linux-gnueabi g-arm-linux-gnueabi -y sudo apt install gcc-aarch64-linux-gnu g-aarch64-linux-gnu -…
阅读更多...
RK3568笔记十：Zlmediakit交叉编译

RK3568笔记十：Zlmediakit交叉编译

若该文为原创文章&#xff0c;转载请注明原文出处。 编译Zlmediakit的主要目的是想实现在RK3568拉取多路RTPS流&#xff0c;并通过MPP硬解码&#xff0c;DRM显示出来。为了实现拉取多路流选择了Zlmediakit,使用FFMEPG也可以&#xff0c;在RV1126上已经验证了可行性。 一、环境…
阅读更多...
对MODNet 主干网络 MobileNetV2的剪枝探索

对MODNet 主干网络 MobileNetV2的剪枝探索

目录 1 引言 1.1 MODNet 原理 1.2 MODNet 模型分析 2 MobileNetV2 剪枝 2.1 剪枝过程 2.2 剪枝结果 2.2.1 网络结构 2.2.2 推理时延 2.3 实验结论 3 模型嵌入 3.1 模型保存与加载 法一&#xff1a;保存整个模型 法二&#xff1a;仅保存模型的参数 小试牛刀 小结…
阅读更多...
最新文章

Copyright @ 2022~2023