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;}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Node 创建 Web 服务器

Node.js 提供了 http 模块&#xff0c;http 模块主要用于搭建 HTTP 服务端和客户端&#xff0c;使用 HTTP 服务器或客户端功能必须调用 http 模块&#xff0c;代码如下&#xff1a; var http require(http); 以下是演示一个最基本的 HTTP 服务器架构(使用 8080 端口)&#x…

「最大化最小值」或者「最小化最大值」采样二分

分割数组的最大值 给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k 个非空的连续子数组。 设计一个算法使得这 k 个子数组各自和的最大值最小 思路&#xff1a;段数分的越多&#xff0c;最大值就越小&#xff0c;从不分段开始找&#xff0c;l为M…

LeetCode 第381场周赛个人题解

目录 100191. 输入单词需要的最少按键次数 I 原题链接 题目描述 思路分析 AC代码 100188. 按距离统计房屋对数目 I 原题链接 题目描述 思路分析 AC代码 100192. 输入单词需要的最少按键次数 II 原题链接 题目描述 思路分析 AC代码 100213. 按距离统计房屋对数目…

Python实现稳健线性回归模型(rlm算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 稳健回归可以用在任何使用最小二乘回归的情况下。在拟合最小二乘回归时&#xff0c;我们可能会发现一些…

python写完程序怎么运行

python有两种运行方式&#xff0c;一种是在python交互式命令行下运行; 另一种是使用文本编辑器直接在命令行上运行。 注&#xff1a;以上两种运行方式均由CPython解释器编译运行。 当然&#xff0c;也可以将python代码写入eclipse中&#xff0c;用JPython解释器运行&#xff0c…

雪花算法回拨问题解决方案

什么是时间回拨问题 雪花算法通过时间来即将作为id的区分标准之一,对于同一台id生成机器,它通过时间和序号保证id不重复当机器出现问题,时间可能回到之前,此时,时间就不能区分又或者因为闰秒的出现,导致时间回拨 如何解决 方法1 直接抛出异常 不管3X721,直接抛出异常将问题…

力扣208题:实现Tire(前缀树)

【题目链接】 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 【解题代码】 public class Trie {public class TireNode {private int level; // 所在层级private boolean end; // 是否为词尾private HashMap<Character, TireNode> nextChs;…

Spring MVC的原理

Spring MVC中的MVC即模型-视图-控制器&#xff0c;该框架围绕一个DispatcherServlet设计而成&#xff0c;DispatcherServlet会把请求分发给各个处理器&#xff0c;并支持可配置的处理器映射和视图渲染等功能。Spring MVC的具体工作流程如下&#xff1a; &#xff08;1&#xff…

微服务不死 — 共享变量在策略引擎项目的落地详解

01 背景 1、共享变量的提出 前段时间&#xff0c;来自亚马逊 Prime Video 团队的一个案例研究在开发者社区中掀起了轩然大波。大体是这样一件事&#xff0c;作为一个流媒体平台&#xff0c;Prime Video每天都会向客户提供成千上万的直播流。为了确保客户无缝接收内容&#xff0…

【动态规划】【数学】【C++算法】805 数组的均值分割

作者推荐 【动态规划】【数学】【C算法】18赛车 本文涉及知识点 动态规划 数学 805 数组的均值分割 给定你一个整数数组 nums 我们要将 nums 数组中的每个元素移动到 A 数组 或者 B 数组中&#xff0c;使得 A 数组和 B 数组不为空&#xff0c;并且 average(A) average(B)…

Java基础(2)

一 String、StringBuffer、StringBuilder String 为什么要设计成不可变的&#xff1f; String是不可变的&#xff08;修改String时&#xff0c;不会在原有的内存地址修改&#xff0c;而是重新指向一个新对象&#xff09;&#xff0c;String用final修饰&#xff0c;不可继承&…

两个bbox的IoU计算步骤分析

IoU&#xff1a;交并比&#xff0c;数值上等于交集面积除以并集面积。 两个bbox的位置关系无外乎以上三种情况&#xff1a;&#xff08;1&#xff09;部分相交。&#xff08;2&#xff09;不相交。&#xff08;3&#xff09;包含。 计算步骤&#xff1a; 计算交集&#xff08…

flutter中使用基于flutter_sound的flutter_sound_record录音

flutter_sound_record 前言文章案例所使用插件的版本号插件安装引入安卓和ios权限支持的编码自定义生成的文件名代码main.dartaudio_player.dart 源码地址 前言 使用flutter_sound,总是出现莫名的错误,所以改为flutter_sound_record,实现录音录制和播放 文章案例所使用插件的…

操作系统-操作系统引导(磁盘 操作系统引导过程)

文章目录 总览一个刚买来的磁盘&#xff08;硬盘&#xff09;往磁盘安装操作系统后操作系统引导过程例&#xff1a;windows操作系统的初始化程序 总览 一个刚买来的磁盘&#xff08;硬盘&#xff09; 此时空空如也 往磁盘安装操作系统后 操作系统在C盘 主引导记录不属于某…

C# 更改Bitmap图像色彩模式

方法一&#xff1a;直接修改RGB的值 首先将BitmapData扫描线上的所有像素复制到字节数组中&#xff0c;然后遍历数组并对每个像素的RGB值进行修改&#xff0c;最后将修改后的像素值复制回BitmapData。这个过程不会影响原始的Bitmap对象&#xff0c;但会改变锁定的位图区域的数…

java idea 中的 Scratches and Consoles

IDEA 中&#xff0c;"Scratches and Consoles" 是一个用于临时代码编辑和交互式开发的工具窗口&#xff0c;作用如下&#xff1a;Scratches&#xff08;草稿&#xff09;&#xff1a;Scratches 是一个用于临时编写和运行代码片段的工具&#xff0c;你可以在其中创建临…

Python实现中英文互译

&#xff1a; 使用预训练模型时经常会涉及到中英文互译&#xff0c;总结一下方法 translate库 安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple translate使用 #中文翻译成英文translator Translator(from_langchinese,to_langenglish)result translator.t…

Python基础第四篇(Python函数)

文章目录 一、函数介绍二、函数的定义三、函数的参数与返回值四、函数说明文档五、函数的嵌套六、变量域七、函数案例1.源代码2.读出结果 在程序设计领域&#xff0c;函数成为一个不可或缺的角色&#xff0c;它们为我们提供了精练、高效和易于管理的编程方式。本篇博客将带您深…

Win32 GetDeviceCaps 函数学习

GetDeviceCaps 函数检索指定设备的设备特定信息。 其第二个参数取不同的值,返回不同结果; void CdevcapView::OnDraw(CDC* pDC) {CdevcapDoc* pDoc = GetDocument();ASSERT_VALID(pDoc);if (!pDoc)return;// TODO: 在此处为本机数据添加绘制代码CString str1;int ret;ret =…

无人机航迹规划(四):七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划(提供MATLAB代码)

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁殖…