基础

发布日期: 2021-11-27

HTML

1. 标签

🍨 标题：

<h></h>

🍨 段落：

<p></p>

🍨 换行：

<br/>

🍨 水平线：

<hr/>

🍨 加粗:（推荐strong）

<b>加粗内容</b>
<strong>强调的内容</strong>

🍨 倾斜有两个标记（推荐em）

<em>倾斜文本</em>
<i>倾斜文本</i>

🍨 删除线（推荐del）

<s>文本</s>
<del>文本</del>

🍨 扩展：

<u>文本</u> 下划线
<sub></sub>下标
<sup></sup>上标

div

div是个盒子，把网页划分成一个个区域。默认每个div独占一行。

span

里面的内容格式不同可以使用这个标签。

主要应用于对文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

1.1 列表

1.1.1 有序列表

<ol type="A" start="4">
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

1.1.2 无序列表

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
快捷键 ul>li*3
1.ul里面只能放li，li里面可以放其他标签。
2.默认是黑色的实心圆
3.type 默认disc, circle是空心圆,square实心正放心，none啥都没有

1.1.3 自定义列表

<dl>
    <dt>可以是文字也可以是图</dt>
    <dt>相关文字</dt>
</dl>

1.2 图片

1.2.1 图片标签的路径

<img src="./code.gif"/> 一般写成相对路径。相对路径可以直接运行在服务器上的前端，绝对路径只能本地前端。
<img src="../code.gif"/>

1.2.2 图片标签的属性

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"/>

1.3 超链接标签

实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
target="_self" 默认值，在当前页面打开目标网页
target="_blank" 新窗口打开

a标签可以包含img标签：

<a href="路径">
	<img src="img/baidu.png" alt=""/>
</a>

1.4 table表格

<table><!-- 创建表格 -->
    <tr><!-- tr 表示行 -->
        <td>1</td> <!-- 表示单元格 -->
        <td>2</td>
    </tr>
    <tr><!-- tr 表示行 -->
        <td>3</td> <!-- 表示单元格 -->
        <td align="right" valign="top">4</td>
    </tr>
</table>

快捷键
table>tr>td*2
table>(tr>td*2)*2

1.4.1表格属性

宽度 width 支持px和百分比
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align=”left或right或center”
cellspacing=”单元格与单元格之间的间距”
cellpadding=”单元格与内容之间的空隙”

<table border="1" width="500" height="500"> // 外边框线
    
</table>

1.4.2 tr属性

高度 height
背景颜色 bgcolor
文字水平对齐 align=”left或right或center”
文字垂直对齐 valign=”top或middle或bottom”

1.4.3 td属性

宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=”left或right或center”
文字垂直对齐 valign=”top或middle或bottom”

注意：如果一个单元格设置宽度，影响的是这一列的宽度
高度，影响的是一行的高度

1.4.4 表格合并

Colspan=”所要合并的单元格的列数”必须给td。

Colspan="2"

Rowspan=”所要合并的单元格的行数” 必须给td。

1.5 表单

<form method="get或者post" action="向何处发送表单数据">
    <input/>
    	A. 属性type定义输入框的类型
    		a)文本框 type="text" 密码框 type="password"
    		b)提交框 type="submit" 和 <button>提交按钮</button>一样
    		c)按钮框 type="button" 单纯按钮
    		d)重置框 type="reset" 清空的效果
    	B. 属性 placeholder 描述输入字段预期值的简短的提示信息。兼容IE8以上。
    	C. 属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
    	D. 属性 value
</form>

🍨例子：

2. CSS样式

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值。

2）属性必须放在花括号中，属性与属性值用冒号连接。

3）每条声明用分号结束。

4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。

5）在书写样式过程中，空格、换行等操作不影响属性显示。

2.1 样式表

2.1.1 内部样式表

<style>
	这个标签中放CSS样式
</style>

2.1.2 外部样式表

单独的一个css文件。两种写法：

<link rel="stylesheet" type="text/css" href="css文件的路径"/>

<style>
	@import url("css文件的路径");
</style>

2.1.3 行内样式

<div style="width:200px; height:200px;">
    我是div
</div>

直接写在标签身上。

2.1.4 样式优先级

2.2 选择器

因为要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，这就需要用到CSS选择器。

对于某一类标签都进行某种格式的修饰。

语法：.class名{
	属性：属性值；
}
说明：
A）当我们使用class选择符时，应先为每个元素定义一个class名称。
B）class选择符的语法格式：
如：<div class="top"></div>
.top{
width:200px;
height:100px;
background:green;
}
用法：class选择符更适合定义一类样式。

2.2.1 id选择器

语法：#id名{属性：属性值;}
说明：
A）当我们使用id选择符时，应该为每个元素定义一个id属性。
如：<div id="box"></div>
B)id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px;height:300px;}
C）起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字）
如：head标记
D）一个id名称只能对应文档中一个具体的元素对象。（唯一性）

🍨 例子：

2.2.2 通配符

语法：*{属性：属性值;}
说明：通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0;padding:0;}代表清楚所有元素的默认边距值和填充值。

🍨例子：

<style>
    *{
        margin:0;
        padding:0;
    }
</style>

2.2.3 群组和后代选择器

群组选择器：
<style>
    div,p,h1,.box1{
        background-color:yellow;
    }
</style>
后代选择器：
div p{
	background-color:yellow;
}

2.2.4 伪类选择器

语法：
a:link{属性：属性值；}超链接的初始状态；
a:visited{属性：属性值；}超链接被访问后的状态；
a:hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态；
a:active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态；
Link--visited--hover--active。

说明：
A）当这4个超链接伪类同时使用，正常顺序为：
Link--visited--hover--active。错误的顺序有时会使得超链接的样式失效。
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如a{color:red;} a:hover{color:green;}表示超链接初始和访问后的状态一样，鼠标滑过的状态和点击时状态一样。

2.2.5 选择器权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲突，会选择权重高的来执行。

2.3 属性

2.3.1 css属性和属性值的定义

谷歌浏览器默认的字体是微软雅黑字体。

color:#ffffff 没两位一个颜色.

字体加粗：font-weight:100 100细体，400正常，700加粗，900更粗体。

首行缩进：text-indent:2em 如果设置成了负数，左侧缩进，很少用负数。

文本修饰：设置多个修饰只能空格并列设置。

font 可以写到一块，但是前后顺序比如粗和斜体顺序不能换。

2.3.2 css列表属性

list-style 把上面的三个属性一次并列写出来，顺序不能换。

2.3.3 css背景属性

background-color:red

background-color:rgb()

background-color:rgba() a指的是透明度，值是0-1，1不透明

图片 🍨例子：background-image:url(img/01.png)

默认平铺效果——repeat。

平铺x轴——repeat-x。

平铺y轴——repeat-y。

不平铺：no-repeat。
位置 position

10px 10px 🍨例子：background-position: 10px 10px 距离左上角10px

10% 10% 🍨例子：background-position: 10% 10% 距离左上角是整个区域的10%的距离

水平left centor right 垂直 top center bottom 🍨例子：background-position: left center
background-size

10px 10px 或 10% 10%

cover 能放大到多大算多大，多余的部分裁掉，然后覆盖目标区域。

contain 将图片完美地放到区域内部。但是区域内可能会留白，因为图片本身有宽高比例。
background-attachment 视差效果

fixed 无视窗口滑动，始终固定在浏览器的某个位置。相对于浏览器窗口，跟盒子没有关系。
复合写法

空格隔开，顺序可以换，可以只取一个值，放在后面能覆盖前面的值。 background-size无法使用复合写法，只能单独写出来。

2.3.4 css边框属性

2.3.5 css浮动属性

让div盒子横着并列的效果。竖着的东西横着来。

🍨 例子：

边距：

padding-left padding-top padding-right padding-bottom

背景色可以蔓延到padding中（内边距）。

2.4.6 盒子模型

边框 border

border 属性： border : 10px double red 其中，边框的形状可以有： solid double dashed dotted

border-top border-Left border-Right border-bottom

border还有很多属性，vscode中有提示。

🍨 例子：

应用：给盒子外面加上点框子啥的。

外边距 margin

快递和快递之间距离。

🍨 例子： margin: 10px 20px 30px 40px 顺时针方向走就行了。

同样支持四个方向 : margin-Left margin-top margin-bottom margin-Right

margin如果是负数：

负值往反方向走。

屏幕居中： margin: 0 auto

外边距特性

兄弟盒子（邻居盒子）
- 垂直方向取外边距最大值
- 水平方向取两者边距的合并（相加）值
父子盒子（内外）
- 要想达到父和子之间的关系，父盒子可以加padding，子盒子不能加margin，子盒子加margin会让效果加到父盒子。但这种方案要注意边界。
- 要想实现和兄弟盒子的那种方式，需要给父盒子加上边界border属性，不能让儿子没大没小不知道边界。这样儿子盒子就可以直接使用margin属性了。但是加了border父盒子高度会增加border的高度，注意计算的换算。
- 加上浮动，让父子分开，某一个加上浮动属性，就可以达到父子margin的属性正常赋值。
- overflow :hidden 父盒子加上BFC属性。本身不会和外界产生互动和干扰。这样子盒子虽然闹腾，但是父盒子不会和外边产生什么干扰，可以达到效果。

小灰灰

http://bruce11111.github.io/2021/11/27/qian-duan/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小灰灰 !

前端

算法笔记

2022-04-06 基础

算法

linux安装软件

2021-11-07 基础

linux

前端

HTML

1. 标签

1.1 列表

1.1.1 有序列表

1.1.2 无序列表

1.1.3 自定义列表

1.2 图片

1.2.1 图片标签的路径

1.2.2 图片标签的属性

1.3 超链接标签

1.4 table表格

1.4.1表格属性

1.4.2 tr属性

1.4.3 td属性

1.4.4 表格合并

1.5 表单

2. CSS样式

2.1 样式表

2.1.1 内部样式表

2.1.2 外部样式表

2.1.3 行内样式

2.1.4 样式优先级

2.2 选择器

2.2.1 id选择器

2.2.2 通配符

2.2.3 群组和后代选择器

2.2.4 伪类选择器

2.2.5 选择器权重

2.3 属性

2.3.1 css属性和属性值的定义

2.3.2 css列表属性

2.3.3 css背景属性

2.3.4 css边框属性

2.3.5 css浮动属性

2.4.6 盒子模型

边框 border

外边距 margin

外边距特性

你的赏识是我前进的动力