html、css基础---学习笔记
2024-05-11 20:18:46
title: VScode编辑同步Markdown文档到印象笔记
tags: Blog,Elegent
notebook: Elegent
超文本标记语言
超文本 : 文本内容 + 非文本内容
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML 标签进行编写。
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构。
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
- 便于团队开发与维护
文本修饰标签
<h></h>标题标签<p></p>段落标签
<strong></strong>： 表示强调，会对文本进行加粗 <em></em>： 表示强调，会对文本进行斜体<i></i><sub></sub>、<sup></sup>： 下标文本、上标文本<del></del>、<ins></ins>： 删除文本、插入文本
图片标签与图片属性
<img>： 图片 (单标签)src ：图片位置alt ：图片加载失败时显示的文字title ：网页显示信息width 、height
引入文件的地址路径
相对路径：. 在路径中表示当前路径..在路径中表示上一级路径绝对路径：E:/http://
跳转链接
标签 <a>href：链接地址target：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank<base>标签：在head里面写入<base target="_blank">所有a标签都在新窗口打开
跳转锚点
实现一#号id属性实现二#号name属性（注意name属性加给的是a标签）
特殊字符
特殊字符 含义 特殊字符代码空格符  ；© 版权 ©® 注册商标 ®；< 小于号 <；> 大于号 >& 和号 &；¥ 人民币 ¥° 摄氏度 °；
无序列表
<ul>、<li> ：列表的最外层容器、列表项注：ul和li必须是组合出现的，他们之间是不能有其他标签的type属性 : 改变前面标记的样式
有序列表
ol>、<li> ：列表的最外层容器、列表项注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。type属性 : 改变前面标记的样式
定义列表
需要添加标题和对标题进行描述的内容<dl>：定义列表<dt>：定义专业术语或名词(标题)<dd>：对名词进行解释和描述(标题解释)列表之间可以互相嵌套形成多层级列表
表格标签
<table>：表格的最外层容器 <tr> ： 定义表格行<th>： 定义表头<td>： 定义表格单元<caption>：定义表格标题
表格属性
border ： 表格边框cellpadding ： 单元格内的空间cellspacing ： 单元格之间的空间rowspan ： 合并行colspan ： 合并列align ： 左右对齐方式valign ：上下对齐方式
语义化标签
<tHead>、<tBody>、<tfoot> 在一个table中，tBody是可以出现多次的，但是tHead、tfoot只能出现一次。
表单标签
<form> ： 表单的最外层容器<input>： 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等<textarea> ： 多行文本框<select>、<option>：下拉菜单<label>：辅助表单
type属性 含义text 普通的文本输入框password 密码输入框checkbox 复选框radio 单选框file 上传文件submit 提交按钮reset 重置按钮
块和内联
div （块）：做区域划分的块div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套 在 <div>标签中，<div>中还可以嵌套多层<div>，用来将网页 分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联） : 对文字进行修饰，内联用来修饰文字的，div与span都是没有任何默认样 式的，需要配合CSS才行。
CSS 样式
基础语法
格式：选择器{ 属性1 : 值1 ; 属性2 : 值2 }1. px -> 像素2. % -> 百分比 外容器1 -> 600px 当前容器 50% -> 300px外容器2 -> 400px 当前容器 50% -> 200px基本样式：width、height、background-colorCSS注释：/* CSS注释的内容 */
内联样式与内部样式
内联（行内、行间）样式在html标签上添加style属性来实现的
内部样式在<style>标签内添加的样式注：内部样式的优点，可以复用代码
外部样式引入一个单独的CSS文件，name.css 通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )
外部样式
<link>标签relhref
CSS中的颜色表示法
单词表示法十六进制表示法rgb三原色表示法：rgb(255,255,255);取值范围 0 ~ 255
CSS背景样式
background-color 背景色background-image 背景图url(背景地址)默认：会水平垂直都铺满背景图
background-repeat 平铺方式repeat-x x轴平铺repeat-y y轴平铺repeat ( x , y 都进行平铺，默认值 )no-repeat 都不平铺
background-position : 背景位置x y : number(px、%) | 单词x : left、center、righty : top、center、bottom
background-attachment : 背景图随滚动条移动的方式scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )fixed ( 背景位置是按照浏览器进行偏移的 )
CSS边框样式
border-style : 边框样式solid : 实线dashed : 虚线dotted : 点线
border-width : 边框大小px ...
border-color : 边框颜色red #f00 ... 颜色：透明颜色 transparent 边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
CSS文字样式
font-family：字体类型英文字体：Arial , 'Times New Roman' 中文字体：微软雅黑 , 宋体
font-size : 字体大小默认 : 16px写法 : number(px) | 单词 ( small large ... 不推荐使用)
font-weight : 字体粗细模式： 正常( normal ) 加粗 ( bold )写法：单词(normal、bold) | number ( 100 200 ..... 900 , 100到500都是正常的，600都900都是加粗的 )
font-style : 字体样式模式： 正常 ( normal ) 斜体 ( italic )写法：单词 ( normal 、 italic )注：oblique也是表示斜体，用的比较少，一般了解即可。区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
CSS段落样式
text-decoration：文本装饰下划线 : underline删除线 :line-through上划线 : overline不添加任何装饰 : none注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写 （ 针对英文段落 ）小写：lowercase大写：uppercase只针对首字母大写：capitalize
text-indent : 文本缩进首行缩进em单位：相对单位，1em永远都是跟字体大小相同
text-align : 文本对齐方式对齐方式 : left 、right、center、justify（两端点对齐）
line-height : 定义行高什么是行高，一行文字的高度，上边距和下边距的等价关系。默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
letter-spacing : 字之间的间距word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题：1. word-break : break-all; (非常强烈的折行1. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)
CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。一个CSS属性控制多种样式，叫做复合样式。复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1. background : red url() repeat 0 0;2. border : 1px red solid;3. font : 注：最少要有两个值 size familyweight style size family √style weight size family √weight style size/line-height family √注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
CSS选择器
class选择器css : .elem{}html : class =“elem”注：1. class选择器是可以复用的。2. 可以添加多个class样式。3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。4. 标签+类的写法
ID选择器css : #elem{}html : id=“elem”注：1. 在一个页面中，ID值是唯一的。2. 命名规范， 字母 _ - 数字（命名的第一位不能是数字）。3. 命名方式，驼峰式、下划线式、短线式。驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton短线写法：search-small-button下划线写法：search_small_button
标签选择器css : div{}html : <div> div{} <div></div>使用的场景：1. 去掉某些标签的默认样式时2. 复杂的选择器中，如 层次选择器
群组选择器css : div , p , span{}可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
通配选择器*{ } -> div,ul,li,p,h1,h2....{} 注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。使用的场景：1. 去掉所有标签的默认样式时
伪类选择器CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。:link、:visited、:hover、:active 注：1. link visited 只能给a标签加，hover和active 可以给所有的标签加。2. 如果四个伪类都生效，一定要注意顺序 : L V H A。3. 一般网站只这样去设置：a{} a:hover{}。
M:伪类{}:link 访问前的样式 ( 只能添加给a标签 ):visited 访问后的样式 ( 只能添加给a标签 ):hover 鼠标移入时的样式 (可以添加给所有的标签):active 鼠标按下时的样式 (可以添加给所有的标签):after、:before 通过伪类的方式给元素添加一段文本内容，使用 content属性:checked、:disabled 、:focus 都是针对表单元素的
结构性伪类选择器nth-of-type() nth-child()角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大first-of-typelast-of-typeonly-of-type nth-of-type()和nth-child()之间的区别nth-of-type是取当前元素的兄弟元素的第n个nth-child取的是当前元素的第n个节点的当前元素type : 同类型下的元素child :当前元素下的
层次选择器后代 M N { }父子 M > N { }兄弟 M ~ N { } 当前M下面的所有兄弟N标签相邻 M + N { } 当前M下面相邻的N标签
属性选择器M[attr] {} = : 完全匹配*= : 部分匹配^= : 起始匹配$= : 结束匹配[][][] : 组合匹配
CSS样式继承
文字相关的样式可以被继承布局相关的样式不能被继承((默认不能继承，但是可以设置继承属性)inherit;)
CSS优先级
相同样式优先级当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。内部样式与外部样式内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级style行间 > id > class > tag > * > 继承
层次优先级1. 权重比较ul li .box p input{} 1 + 1 + 10 + 1 + 1.hello span #elem{} 10 + 1 + 1002. 约分比较 ul li .box p input{} li p input{}.hello span #elem{} #elem{}
css盒子模型
组成 : content -> padding -> border -> margin物品 填充物 包装盒 盒子与盒子之间的间距content : 内容区域 width和height组成的
padding : 内边距(内填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）单一样式只能写一个值：padding-leftpadding-rightpadding-toppadding-bottom
margin : 外边距(外填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：margin-leftmargin-rightmargin-topmargin-bottom注：1. 背景色填充到margin以内的区域 （不包括margin区域） 2. 文字在content区域添加。3. padding不能为负数，而margin可以为负数。
box-sizing:盒尺寸，可以改变盒子模型的展示形态。默认值: content-box : width、height -> contentborder-box : width、height -> content, padding, border使用的场景： 1. 不用再去计算一些值2. 解决一些100%的问题
盒子模型的一些问题：1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
margin叠加当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的解决方案：1. BFC规范2. 想办法只给一个元素添加间距。
margin传递margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。解决方案：1. BFC规范2. 给父容器加边框。3. margin换成padding。
margin自适应居中margin:0 auto;扩展：1. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。
标签分类
按类型block : 块inline : 内联inline-block : 内联块
按类型block : div、p、ul、li、h1 ...1. 独占一行2. 支持所有样式3. 不写宽的时候，跟父元素的宽相同4. 所占区域是一个矩形
inline : span 、a、em、strong、img ...1. 挨在一起的2. 有些样式不支持例如：width、height、margin、padding3. 不写宽的时候，宽度由内容决定4. 所占的区域不一定是矩形5. 内联标签之间会有空隙，原因：换行产生的
inline-block : input、select ...1. 挨在一起，但是支持宽高注：布局一般用块标签，修饰文本一般用内联标签
按内容Flow： 流内容Metadata： 元数据Sectioning： 分区Heading： 标题Phrasing： 措辞Embedded： 嵌入的Interactive：互动的（详情：https://www.w3.org/TR/html5/dom.html）
按显示替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input ...非替换元素 : 将内容直接告诉浏览器，将其显示出来。div、h1、p ...
显示框类型
display: block inline inline-block none ...block 块元素inline 行内元素inline-block 行内块none 无区别：display:none 不占空间的隐藏visibility: hidden 占空间的隐藏
标签嵌套规范
块标签可以嵌套内联标签块标签不一定能嵌套块标签内联标签不能嵌套块标签a标签是一个例外
溢出隐藏
overflowvisible : 默认hidden: 隐藏溢出的部分scroll： 右，下出现滚动条auto： 内容足够多的时候右侧出现滚动条x轴、y轴
透明度与手势
opacity：opacity : 0(透明) ~ 1(不透明) ，0.5(半透明)注：占空间、所有的子内容也会透明rgba：rgba() : 0 ~ 1注：可以让指定的样式透明，而不影响其他样式cursor ：手势要实现自定义手势需要：准备图片： .cur 、 .ico cursor : url(./img/cursor.ico),auto;default: 默认箭头自定义鼠标样式
最大、最小宽高
min-width、max-widthmin-height(>=)、max-height(<=>)%单位：换算 -> 已父容器的大小进行换算的一个容器怎么适应屏幕的高 : 容器加height:100%; body:100%; html:100%;html,body{ height:100%;}.contrainer{ height:100%;}
CSS默认样式
有些标签有默认样式，有些标签没有默认样式。没有默认样式：div、span、…默认样式： body、h1…h6、p、ul、…body -> marign : 8pxh1 -> margin : 上下 21.440pxfont-weight : boldp -> margin : 上下 16pxul -> margin : 上下 16px padding : 左 40px默认点：list-style : disca -> text-decoration: underline;
CSS reset重置属性
*{ margin:0; padding:0;}优点：不用考虑哪些标签有默认的margin和padding缺点：稍微的影响性能body,p,h1,ul{ margin:0; padding:0;}
ul{ list-style : none;} a{ text-decoration: none; color:#999;}img{ }问题的现象：图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。vertical-align: baseline; 基线对齐方式，默认值img{ vertical-align:bottom;} 解决方式是推荐的设置块：dispaly:block；
html、css基础---学习笔记相关推荐
- 在慕课上学习的，HTML和CSS基础学习笔记1
// 在此之前,看了一遍慕课上的HTML和CSS基础教程,还有就是上过大约一周的前端课.但是学习时间不集中,不够清晰. // 现在打算专心学习,重新开始学习:复习一遍慕课上的基础教程,再看一遍Head ...
- HTML5之CSS基础学习笔记
基础认知 CSS初始 CSS的介绍 CSS:层叠样式表(Cascading style sheets) CSS作用是什么?? 给页面中的HTML标签设置样式 CSS就是用来做美化的,我之前写的网页就是 ...
- miaov css基础学习笔记
html 超文本标记语言(结构) CSS 层叠样式表(样式) js javascript(行为) 文件编码格式与代码编码格式一致的时候,网页才不会出现乱码,才可以显示正常. GB2312 中文简体标准 ...
- C#学习笔记8：HTML和CSS基础学习笔记
<!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...
- 【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...
- ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
- CSS入门学习笔记（案例+详解）
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- 【UI界面设计】PS基础学习笔记
[UI界面设计]PS基础学习笔记 一.概述 1.行业规范: 2.介绍 二.PS入门 1.安装 2.基本介绍 3.新建项目 4.PS的基本使用流程 5.项目保存 6.抠图 7.修图 8.修人像图 9.如 ...
- CSS基础班笔记(二)
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.csdn.net/Augenstern_QXL/article/details/1155 ...
最新文章
- openresty编译添加stream-lua-nginx-module模块
- 基于Springboot实现在线考试管理系统
- 设计模式——工厂方法模式和抽象工厂模式
- php去掉多字节字符,PHP 面试题 - 如果没有 mb 系列函数，如何切割多字节字符串...
- 英语学习过程中的几点体会(2)
- oracle 新增加控制文件,Oracle增加控制文件副本
- 会计电算化是对用电子计算机处理,会计电算化的意义是什么
- Bert模型冻结指定参数
- 软件工程导论-软件工程概论（学习笔记）
- Visual Studio 2022把C#代码打印出来的技巧 有屋设计拆单管理一体化软件 全屋定制拆单 橱柜衣柜整装 木门归方程序
- uni-app项目部署 打包 运行
- 闲置台式机+文件服务器,闲置主机秒变家用NAS，让你的闲置电脑变存储中心
- 昆腾的反思：对象存储解困大数据
- 3 条掏心掏肺的建议，新手学习编程必备，快上车！
- hosts文件相关（hosts文件位置、hosts文件的一些用途、cmd命令修改hosts文件）
- python识别火车票二维码_python实现12306查询火车票
- ss客户端以及tcp,udp,dns代理ss-tproxy本地安装版--centos7.3 x64以上(7.3-7.6x64测试通过)...
- 推荐几个经常发干货的公众号
- 四川大学软件学院 2017级系统级编程 复习知识点-很零碎的那种
- phd计算机考试,21校计算机Phd详细申请经验
热门文章