HTML CSS杂记

最新推荐文章于 2024-07-16 15:41:31 发布

hiflechazo

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量222

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/hiflechazo/article/details/128051269

版权

之html （超文本标记语言）css （层叠样式表)杂记
-------------------------------------------------------------------------
HTML
(.html)表示html文件
-------------------------------------------------------------------------
<html> 根标签，只能有一对。
<head>
</head> 编辑给浏览器的，人看不到。
<body>
</body> 展现给用户看的。
</html>

如果在hello world 后面添加中文会出现乱码，所以要添加字典:

在head中添加字典，具体如下：

<head>
<meta charset="utf-8">
</head>

P.S:

1. charest:编码字符集,其中有：gb2312a（只能识别简体中文字符，不识别繁体)） gbk（包含所有繁体字符集还有所有亚裔的)） unicode （包含所有国家的语言） utf -8(常用的)
2. 每个标签都可以添属性，属性添在标签的头标签上，每个属性代表一定的功能。见：<head lang="en"> (lang 为属性名，en 为属性值)

<html lang="en">
lang="en" 告诉搜索引擎爬虫，我们的网站是关于什么内容的
（这个属性除了English，其他都是汉语拼音）

添加标题

页角标

一些标签

六级标题标签。特点：独成一段，更改字体的大小，加粗字体

<strong></strong> 加粗展示

<em></em> 斜体展示

斜体且加粗显示：

del></del> 划线标签

<address></address> 地址标签（独占一行+斜体）

<div></div> 独占一行,没效果

<span></span> 没效果

div 和span 没有具体作用，
可以充当容器，使内容结构化

空格:英文单词分隔符

代表空格（html编码)：
&nhsp; 空格
&lt； <
&gt； >

<br> 回撤，一个<br>代表一个换行符

<hr> 水平线

有序列表：
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
（默认呈有序1.2.3...展示）
即为<ol typy="1">
而typy属性可以更改为：
<ol typy="a">
<ol typy="A">
<ol typy="i">
<ol typy="I">
若想倒叙排列，则添加reversed:
<ol typy="1" reversed="reversed">
若规定从几开始排，则添加start:
<ol typy="1" start="2"> 即显示从b开始排列

del></del> 划线标签

<address></address> 地址标签（独占一行+斜体）

<div></div> 独占一行,没效果

<span></span> 没效果

div 和span 没有具体作用，
可以充当容器，使内容结构化

空格:英文单词分隔符

代表空格（html编码)：
&nhsp; 空格
&lt； <
&gt； >

<br> 回撤，一个<br>代表一个换行符

<hr> 水平线

无序列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
默认值为<ul typy="disc"> discircle(实心圆）
还有：<ul typy="square">
<ul typy="circle">
<ul>和<il>父子结构

引入图片img标签：
<img src=” “> source
1.网上的url
浏览器上的地址
2.本地的绝对路径
D:/a/b/lesson.himl与 D:/a/b/c/123.jpg
此时在src=""里写D:/a/b/c/123.jpg
3.本地的相对路径
D:/a/b/lesson.himl与 D:/a/b/123.jpg
此时在src=""里可直接写123.jpg

<alt> 图片占位符
<img src=” 123.jpg“ alt="这是花">

<title> 图片提示符
<img src=” 123.jpg“ alt="这是花" title=”it is a flower">

<a>标签
1.超链接
<a href="">www.baidu.com</a>
(href==hyperText reference 超文本引用可添加指向的地址）
be like:
<a href="http://www.baidu.com">www.baidu.com</a>
2.锚点
3.打电话
<a href="tel：1234567">市民热线</a>
4.发邮件
<a href="mailto:1234@163.com">给办公室发邮件</a>
5.协议限定符
举例：
<a href="javescript:while(1){alert(’来点啊‘）}"></a>

表单标签：
<form></form>可以将前端的数据发送贵后端
p.s:其中method是一种数据发送的方式，
text 是输入块，password是密码块

<form method="get" action=“http://www.baidu.com/123.jpg”>
（action里可放一个地址）

(登录的组件： <input type="submit" > ，而提交文本可自行修改即添加属性(<input type="submit" value="login">)

name属性：数据名

一个例子，密码的填写提交（注意要有数据名和数据值，也就是下面的 name 以及type）：
<body>
<form method="get" action="">
<p>
username:<input type="text" name=”用户名“>
</p>
<p>
password:<input type="password" name="密码">
</p>
<input type="submit">
</form>
</body>

单选框radio:
1.苹果 <input typr="radio">
2.香蕉 <input typr="radio">
3.草莓<input typr="radio">
（此时在单选框后面加name 添加一样的名来统一元素）
1.苹果 <input typr="radio" name="star">
2.香蕉 <input typr="radio" name="star">
3.草莓<input typr="radio" name="star">

再来写属性值value: 如 1.小李子<input typr="radio" name="star" value="handsome">

（关于密码提交的一些小添加）
<body>
<form method="get" action="">
<p>
username:<input type="text" name=”用户名“ value="请输入用户名" οnfοcus="if(this.value==''){this.value='';}" οnblur="if(this.vaoue=''){this.value='请输入用户名‘}“>
</p>
<p>
password:<input type="password" name="密码">
</p>
<input type="submit">
</form>
</body>

复选框(将radi改为checkbox)
1.apple <input typr="checkbox" name="fruit" value="apple“>
2.banana <input typr="checkbox" name="fruit" value="apple“>
3.orange<input typr="checkbox" name="fruit" value="apple“>

这儿提一嘴，若想有默认选中不论单选框复选框，在默认的那一项后面添加checked="checked"

下拉菜单<select>作为架子，里面写<option>

注释：ctrl+?

---------------------------------------------------------------------------
CSS
(.css)表示css文件
---------------------------------------------------------------------------

引入css
1.行间样式
<div style=" "></div>
2.页面级css
在<head>里写<style></style>标签：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">(可写可不写）
</style>
</head>
3.外部css文件
新创建一个文件，用.css后缀
然后要在html文件里引用css文件，
所以在<head>下面添加：
<link rel="stylesheet" type="text/css" href="lesson.css">

---------------------------------------------------------------------------
选择器
权重!!!
！importent Infinity（正无穷）
行间样式 1000
id 100
class|属性选择器|伪类 10
标签选择器|伪元素 1
通配符选择器 0
且上面各位是256位进制
1.id选择器(一个元素只能有一个id值，反之同理）
(.html)<div id="only">123</div>
(.css)#only{}
2.class选择器(class与元素一对多的关系或者一个元素多个class)
(.html)<div class="demo">123</div>
(.css).demo{}
若想写多个class则：(.html)<div class="demo demo1">123</div>
3.标签选择器 (一选选全部）
(.html)<div>123</div>
(.css)div{}
4.通配符选择器
(.css)*{}
其中*代表任意，使用时直接选中全页面
5.属性选择器
在.css中使用[]{}
6.！importent
加在.css中末尾处
优先级：！importent>行间样式>id>class=属性选择器>标签选择器>通配符选择器
---------------------------------------------------------------------------

父子选择器(派生选择器）
举例：
（.html)
<div>
<span>123</span>
</div>
<span>234</span>
(.css)
div span{} （此处选择的是div内的span标签）

（.html)
<div class=”wrapper“>
<strong class="box">
<em>123</em>
<strong>
</div>
<em>234</em>
(.css)
.wrapper .box em{}
（.html)
<div class=”wrapper“>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
(.css)
div em{} 此处表示div下的em全变色

直接子元素选择器
举例：
(.html)
<div class=”wrapper“>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
(.css)
div > em{} (所以这里直接选中的是1，没有2）

这里值得注意一下当有一串父子选择器的时候（即套了很多层），浏览器是从右向左排查会更快。

并列选择器
举例：
(.html)
<div class="demo">2</div>
<p class="demo">3</p>
(.css)
div.demo{} (注意在div与demo中间不要加空格)

这里再次提及权重问题,如下：
在计算时将所有标签权重相加即可
(.html)
<div class="classDiv" id ="idDiv">
<p class="classP" id="idP">1</p>
</div>
(.css)
#idDiv p{}
100+1=101
.classDiv.classP{}
10+10=20
所以有101>20,因此显示#idDiv p{}中的设置
若权重值相等，则后面的会覆盖前面的
在计算机中正无穷加一大于正无穷

分组选择器
举例：
(.html)
<em>2</em>
<strong>2</strong>
<span>3</span>
(.css)
em,
strong,
span{在打括号里共用一个代码块}

---------------------------------------------------------------------------

css代码块
(写出的均为默认值或者重点)
font-size:16px
(字体大小，设置的是字体高度）

font-weight；normal
(还可以有 lighter细体，bold就等同于<strong>，还有bolder；或者用数字表示为100~900,其中100最细900最粗，normal为400）能到多粗取决于字体包

font-style:italic
(也就是<em>)

font-family:arial
(字体，此为乔布斯发明）

color:
设置颜色只用写color，有三种设置方式
1.纯英文单词(测试可用）
举例：
color:red
2.色代码（开发用）
构成：(光学)三原色：红绿蓝
r g b
例如：color:#f4400;
其中每两位代码代表一个颜色而且每两位就是一个十六位进制数
00-ff代表红色的饱和程度
00-ff代表绿色的饱和程度
00-ff代表蓝色的饱和程度
表示方式：将三个拼到一起前面加一个#
例如：#000000纯黑
若每两位字母都重复则简写为三位：
#ffffff=#fff（纯白）
#ff4400=#f40(淘宝红）
3.颜色函数
语法：color:rgb( , , )
括号里每一位都是十进制数，范围为0~255
举例：
color:rgb(255,255,255) 纯白

border：
(加盒子，即给盒子加外边框)
是一个符合属性
举例：
border:1px solid black;
粗细展示形式(实心）颜色
border也可以拆开来写(此处没有写例子）
p.s:
solid 实体；dotted 点状虚线；dashed 条状虚线；transparent 透明色：
注意一点，写的代码后面的会覆盖前面的！

border-left-color:red; 表示左边的线为红色
border-top-color:green; 表示上面的线为绿色
border-right-color:#00f; 表示右边的线为蓝色

width：__px（宽)
height:__px (高)

一个有趣的例子：
width:0px;
height:0px;
border:100px solid black;
(显示出来是一个黑色的方块)
如果用到下面这些，则会显示一块一块的三角状
border-left-color:red;
border-top-color:green;
border-right-color:#00f;

文本对齐方式(水平居中）：
text-align:left;
left为默认值;还有居中：center;右对齐：right

css注释：
/*--------*/
只有一种注释方式

文本行高设置(即行间距):
line-heinght:16px;(此值与默认字体高度一样，则显示的文本呈字帖字)

单行文本垂直居中：
即文本高度等于容器高度
举例：
height:200px;
line-height:200px;

文本缩进；
注意不是加空格！而是使用首行缩进
text-indent:2em; （此处便缩进两个文本距离）
p.s:
绝对单位：m cm nm um
相对单位：px(像素) em
换算：em = 1*font-size,根据设定的font-size而改变
举例：
文字的行高为1.2倍行高的表示：
line-height:1.2em;

---------------------------------------------------------------------------
一些HTML与CSS的小替换
上文提到的<del>标签:
(用css表示)
(.html)<span>原价100</span>
(.css) span{
text-decoration: line-through;
}

p.s: text-decoration: none;
表示去除划线

上文提到的<a>标签:
(.html)<span>www.baidu.com</span>
(.css)span{
color:rgb(o,o,238);
text-decoration: underline;
}
p.s: text-decoration: overlind;
上划线

光标：
呈现方式：
cursor:pointer; 小手
help; 问号
e-resiz; 双边箭头
etc....
---------------------------------------------------------------------------伪类选择器：
1.hover;
(.html)<a href="http://www.baidu.com">www.baidu.com</a>
(.css)a:hover{
background-color:orange;
}
展现为：光标移动到文字是显示，移动开后消失

---------------------------------------------------------------------------

标签小归类

1.行级元素(内联)
feature：内容决定元素所占位置
不可以通过css改变宽高
例如:
span strong em a del
行级元素里面有一个隐式的属性叫display
可以把span的属性改变
例如:
(.css)span{
display:block;
}
可将其变为块级元素
2.块级元素
feature：独占一行
可以通过css改变宽高
例如:
div p ul li ol form address
3.行级块元素
fature:可以决定大小
可以改变宽高
例如:
img
---------------------------------------------------------------------------
margin:
元素与元素之间的空隙
例如:
margic-left:-20px; (-号向左挪）
小问题:
带有inline的元素都带有文字特性，
所以<img>带有文字特性
图片会被分割
这里正常处理不能用margic哈
---------------------------------------------------------------------------
标签都可以初始化

而*标签可以初始化所有标签，
例如:
几乎所有标签都有内外边距，可以使用*标签
*{
padding:0;
margin:0;
}
---------------------------------------------------------------------------
盒子模型
html下的所有元素都符合盒子模型
盒子三大部分:
盒子壁 border
内边距 padding
盒子内容 width+height;
其中padding可以分开表示四个模块:上右下左
若写了三个值，则指的是:上左右下，左右值相等
若写两个值，则指的是:上下，左右值
举例：
padding-top:100px;
padding-left:100px;
padding-right:100px;

也可以用border来设置
只要是“盒子”都可以设置四个值

算真正的盒子宽高（即可视化内容）时不算margic

---------------------------------------------------------------------------
定位
(.css)position: ;
定位
1.absolute绝对定位
(.css)position:absolute;
left:100px;
top:100px;
其中left与top只与position结合
或者:
right:100px;
bottom:100px;
特点:
脱离原来位置进行定位；
相对最近的有定位的父级进行定位，如果没有这样最近的有定位的父级就相对文档定位，如果写自己身上则相对自己进行定位

p.s:
body都有默认的margin，这个值是8em
opacity 透明度
层模型
2.relative
特点:
保留原来位置进行定位

注意：定位需要参照物，一般用relative作为参照物，用absolute来定位。
3.fixed
特点:
不跟着滚动条动
若想让块儿不动且居中:

(.html)<div></div>
(.css)div{
position:absolute;
left:50%;(50%相对于文档的宽度)
top:50%;
width:100px:
height:100px;
background-color:red;
}
此时左顶点在中心但是需要将块放到中心所以需要将块向左向上移动半个身位，
所以改进如下:

(.html)<div></div>
(.css)div{
position:absolute;
left:50%;(50%相对于文档的宽度)
top:50%;
width:100px:
height:100px;
background-color:red;
margin-left:-50px;
margin-top:-50px;

}
absolute是相对文档居中
若相对可视窗口居中，将absolute改为fixed即可。
---------------------------------------------------------------------------
两个bug:
1.关于margin塌陷：
bfc(block format context)
让其中的几个盒子的渲染规则发生改变
如何触发一个盒子的bfc:
1.position：absolute;
2.display:inline-block;
3.float:left/right;
4.overflow:hidden;(溢出部分隐藏）
当然没有一个是可以完全解决的

2.margin区域不可共用，不能累加
水平方向可以“顶开”；垂直方向“顶不开”
要用bfc，可以在(.html)中专门写一层，
在(.css)中写入overflow:hidden;或者都放入环境中。
---------------------------------------------------------------------------

浮动模型<float>
可以给块排列，边界为父级的边界
还可以加margin

浮动元素产生浮动流，所有产生浮动流的元素只有块级元素看不到他们，产生了bfc的元素和文本类(You inline属性)属性的元素以及文本都能看到浮动元素

清除浮动流,在{}中添加:
clear:both;
both指两边都清除
(这里涉及到关于包含浮动流使边框撑开的问题)

---------------------------------------------------------------------------伪元素:
行级元素
其存在于任意一个元素当中，可以通过css将其选择出来
::before 就是把标签里面的最前面的元素可以选出来
::after 就是把把标签最后面的元素选出来
注意哈每个元素存在的时候其逻辑最前面的位置和逻辑最后面的位置就已经有了两个伪元素\
其次使用伪元素用到content:"",并在""中输入内容
举例:
(.html)<span>找一找</span>
(.css)span::before{
content:" 你来 "
}
显示：你来找一找

p.s:clear要在块级元素用;
凡是设置了position:abolite;和float:left/right;的元素会打内部把元素转换为inline-block;

实现文字环绕图片:
(.css)img{
width:100px;
float:left/right;(这一条代码会使文字自动与图片顶对齐)
}
---------------------------------------------------------------------------小补充
1.溢出容器要打点展示:
(而两者实现的技术不一样)
1.单行文本
(.html)<p>中国以华夏文明为源泉中华文化为基础，是世界上历史最悠久的国家之一</p>
(.css)p{
width:300px;
height:20px;
line-height:20px;
border:1px solid black;
(以下是要使用的三件套)
white-space:nowrap;(此代码使文本失去换行的功能)
overflow:hidden;(使溢出部分不能展示，隐藏）
text-overflow:ellipsis;（显示...)

}
2.多行文本(手打；移动端可以实现)

2.放入背景图片:
(.css)<div>{
width:200px;
height:200px;
border:1px solid black;
background-image:url(___.jpg);(括号里用来填写图片的地址)
background-size:200px 200px;(设置图片背景大小,如果background-size的大小小于width和height的大小，则在border中重复出现,)
background-repeat:repeat;(此条技术也就是上句话中提到的图片重复出现)
background-repeat:no-repeat;(使图片只展示一张)
background-repeat:repeat-x;(指X轴重复;同理有Y轴重复)
background-position: ;(里面填两个值，一个X轴，一个Y轴的值;其中值的表示可有top、left、 right、 center,若想居中可用center center;也可以使用百分数50% 50%即表示居中 )
}
---------------------------------------------------------------------------p.s:
1.行级元素只能嵌套行级元素
块级元素能嵌套任何元素
but:<p>里不可以套块级元素
<a>里不可以套<a>
2.margin:0 auto;
3.inline
block
inline-block
其中inline，inline-block称为文本类元素，带有文本类特点
4.一个行级块元素或一个文本元素里面包含的文字，则外面的文字会和里面的文字进行底对齐；
当然可以调对齐线，用vertical-align:;
-------------------------------------------------------------------------
暂时浅记到此，芜杂。
-------------------------------------------------------------------------