HTML/CSS(1)

最新推荐文章于 2024-07-21 17:23:08 发布

小叮当仁不让

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量240

点赞数

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_44971069/article/details/108695664

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html基础

1.HTML基本结构和属性？

HTML ：超文本标记语言

超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )

标记 : <单词>（标签）创建标签的快捷键：单词 + tab键 -> <单词> 标签是可以上下排列，也可以组合嵌套。

语言 : 编程语言

2.HTML初始代码？

每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。

! + tab键 : 快速的创建html的初始代码

<!DOCTYPE html>           //文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> //html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
    <head>
        <meta charset="UTF-8">    //元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
        <title>Document</title>   //设置网页的标题
    </head>
    <body>
        显示网页内容的区域
    </body>
</html>

2.文本修饰标签

下标 : <sub></sub>
上标 : <sup></sup>

删除文本 : <del></del>
插入文本 : <ins></ins>

注：一般情况下，删除文本都是和插入文本配合使用的。

3.图片标签

src:引入图片的地址

alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小（给定之后即使图片没有加载出来，也会自动占高度和宽度）

4.路径

绝对路径（在电脑中的路径）

相对路径（推荐）

5.标签链接

href属性 : 链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank

6.锚点

实现一：#号

id属性

<!-- <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <h2 id="html">HTML</h2>
    <p>模拟的段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟的段落</p>

实现二：#号

name属性

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a name="html"></a>    
    <h2>HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟的段落</p>

7.特殊字符

&lt(<); &gt(>); &nbsp(空格);

8.列表标签？

无序列表 -> ul li 符合嵌套的规范（前面是小黑点）
有序列表 -> ol li 一般用的比较少，可以用无序列表来实现（前面是数字）
定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容

注：列表之间可以互相嵌套，形成多层级的列表。

<dl>
    <dt>中国</dt>
  <dd>
      <dl>
          <dt>山东</dt>
          <dd>辽宁</dd>
          <dd>济南</dd>
      </dl>
      <dl>
          <dt>四川</dt>
          <dd>南充</dd>
          <dd>乐山</dd>
      </dl>
  </dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czI91d0r-1600593518494)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600588660313.png)]

9.表格标签

table（表格的最外层容器）

tr（表格行）

th（表头）

td（表格单元）

caption（表格标题）

注：之前是有嵌套关系的，要符合嵌套规范。

语义化标签：tHead、tBody、tFood

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

align : left、center、right
valign : top、middle、bottom

10.span对文字修饰的内联

11.CSS样式的引入方式？

内联样式
style属性
```
<style>
    div{ width:100px;height:100px;background-color:red }
    </style>
```
1. 内部样式
  style标签
  区别：
  内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理。
```
<div style="width:100px;height:100px;background-color:red">这是一个块</div>
```
  1. 外部样式
    引入一个单独的CSS文件，name.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )

12.CSS中的颜色表示法？

单词表示法 : red blue green yellow …
十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法：rgb(255,255,255);
取值范围 0 ~ 255

二：

13.样式

CSS背景样式

background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )

background-attachment : fixed;//背景图随滚动条移动的方式

CSS边框样式

border-style : solid : 实线 dashed : 虚线 dotted : 点线
border-width : 边框大小 px …
border-color : 边框颜色 red #f00 …

边框也可以针对某一边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色：透明颜色 transparent

CSS文字样式

font-family : 字体类型
font-size : 字体大小
font-weight : 字体粗细
font-style : 字体样式

CSS段落样式

text-decoration：文本装饰
text-transform：文本大小写（针对英文段落）
text-indent : 文本缩进
text-align : 文本对齐方式
letter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题：

CSS复合样式

复合的写法，是通过空格的方式实现的。
复合写法有的是不需要关心顺序，例如background、border；
有的是需要关心顺序，例如font。

background : red url() repeat 0 0;
border : 1px red solid;
font :
注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

14.CSS选择器

1.ID选择器（#elem）

id是唯一值，由字母 _ - 第一个不能是数字

驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton

短线写法：search-small-button

下划线写法：search_small_button

2.class类选择器（.elem）

注：
1. class选择器是可以复用的。
2. 可以添加多个class样式。
3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4. 标签+类的写法

3.标签选择器（）

使用的场景：
1. 去掉某些标签的默认样式时
2. 复杂的选择器中，如层次选择器

4.群组选择器(分组选择器)
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器
*{ } -> div,ul,li,p,h1,h2…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：

去掉所有标签的默认样式时

6.层次选择器
后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 当前M下面的所有兄弟N标签
相邻 M + N { } 当前M下面相邻的N标签

7.属性选择器
M[attr] {}
= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[][][] : 组合匹配

8.伪类选择器
M:伪类{}
:link 访问前的样式 ( 只能添加给a标签 )
:visited 访问后的样式 ( 只能添加给a标签 )
:hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)

注：
一般的网站都只设置
a{} ( link visited active )

a:hover{}

:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled 、:focus 都是针对表单元素的

结构性伪类选择器
nth-of-type() nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
first-of-type
last-of-type
only-of-type

nth-of-type()和nth-child()之间的区别
type : 类型
child : 孩子

15.CSS继承？

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

16.优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级
style行间 > id > class > tag > * > 继承
注：style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1
!important
提升样式优先级，非规范方式，不建议使用。( 不能针对继承的属性进行优先级的提升 )
标签+类与单类
标签+类 > 单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
层次优先级
1. 权重比较
  ul li .box p input{} 1 + 1 + 10 + 1 + 1
  .hello span #elem{} 10 + 1 + 100
2. 约分比较
  ul li .box p input{} li p input{}
  .hello span #elem{} #elem{}

16.CSS盒子模型？

组成 : content（内容物） -> padding（内填充） -> border -> margin（外填充）

    物品              填充物              包装盒      盒子与盒子之间的间距

注：

1.背景色填充到margin以内的区域（不包括margin区域）

2.文字在content区域添加。

3.padding不能为负数，而margin可以为负数。

margin:外边距；设置对象四边的外延边距。

margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
margin：20rpx：如果只提供一个，将用于全部的四边。
margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
margin：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

17.标签分类：

1.按类型
block : div、p、ul、li、h1 …
1. 独占一行
2. 支持所有样式
3. 不写宽的时候，跟父元素的宽相同
4. 所占区域是一个矩形
inline : span 、a、em、strong、img …
1. 挨在一起的
2. 有些样式不支持，例如：width、height、margin、padding
3. 不写宽的时候，宽度由内容决定
4. 所占的区域不一定是矩形
5. 内联标签之间会有空隙，原因：换行产生的

inline-block : input、select …
1. 挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签

2.按内容
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
（详情：https://www.w3.org/TR/html5/dom.html）
按显示
替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input …
非替换元素 : 将内容直接告诉浏览器，将其显示出来。
div、h1、p …

18.标签嵌套规范

块能嵌套内联，但是内联不能嵌套块

19.溢出隐藏？

overflow :
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

20.透明度与手势？

opacity : 0(透明) ~ 1(不透明)
0.5(半透明)

注：占空间、所有的子内容也会透明

rgba() : 0 ~ 1

注：可以让指定的样式透明，而不影响其他样式

cursor : 手势
default : 默认箭头
要实现自定义手势：
准备图片： .cur 、 .ico
cursor : url(./img/cursor.ico),auto;

21.最大、最小宽高？

min-width、min-height
max-width、max-height
%单位：换算 -> 已父容器的大小进行换算的
一个容器怎么适应屏幕的高 : 容器加height:100%; body:100%; html:100%;
html,body{ height:100%;}
.contrainer{ height:100%;}

22.div和span没有默认样式

三：

1.photoShop使用？

组成：
菜单项
工具栏
辅助面板
下载：
https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码: sc3v
快捷键：
ctrl + r : 显示隐藏标尺
在标尺上可以拖拽参考线
可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线
图层中的小眼睛可以对当前图层进行显示隐藏
alt + 滚轮：可以对图片进行放大缩小
png等图片的切图流程：

1. 通过矩形选框工具，选择指定的区域
    微调：alt 减少区域  shift 增加区域   上下左右键进行微调
    利用参考线记录量取的位置，以便以后测量其他的值
    2. ctrl + c : 复制图层
        3. ctrl + n : 新建图层
        4. ctrl + v : 粘贴图层
        5. 存储为web格式

psd图片的切图流程：
1. 启动生成器
2. 图像资源
3. 重命名图层，自动获取切图
4. 可上传到线上，方便数据获取

2.float浮动？

脱离文档流，延迟父容器靠左或靠右进行排列。
left、right、none
float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。

如何清除浮动？
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐 , 会多添加一个标签。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
( clear属性只会操作块标签，对内联标签不起作用 )

3.浮动float注意点

只会影响后面的元素，内容默认提升半层。

默认宽根据内容决定。

换行排列。

主要给块元素添加，但也可以给内联元素添加。

li{$}*4+tab=
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
    
li*4+tab=
<li></li>
<li></li>
<li></li>
<li></li>

4.CSS 定位

position : static（默认）relative absolute fixed sticky
1.relative：{相对定位}
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
2.absolute：（绝对定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
3.fixed：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
4.sticky黏性定位：在指定的位置，进行黏性操作。
z-index定位层级。

5.class添加省略号

<style>
    #content{ width:200px; border:1px black solid;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;
    }
    </style>
</head>
<body>
    <div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div>

6.class雪碧图sprite(利用背景的定位)

 <style>
    #box1{ width:20px; height:21px; background:url(./sprite_icon.png) no-repeat left -596px;}
    #box2{ width: 300px; height:50px; border:1px black solid; line-height: 50px; padding-left: 30px; background:url(./sprite_icon.png) no-repeat right -516px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">产品中心</div>

7.css圆角

<style>
    #box{ width:300px; height:300px; background: red; border-radius: 10px 20px; } //10px 左上角和右下角
    20px 右上角和左下角
   #box{ width:300px; height:300px; background: red; border-radius: 10px 20px 30px 40px; }  左上角开始顺时针
   #box{ width:300px; height:300px; background: red; border-radius: 20px / 40px; }  //和椭圆相切
    #box{ width:300px; height:1500px; background: red; border-radius: 150px 150px 0px 0px; }//半圆
    </style>
</head>
<body>
    <div id="box"></div>
</body>

pc端的布局：

通栏：自适应浏览器的宽度

版心：固定一个宽度，并且让容器居中

container-fluid:自适应屏幕宽度，满屏显示

小叮当仁不让

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS(1)

1.HTML基本结构和属性？HTML ：超文本标记语言超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )标记 : <单词>（标签）创建标签的快捷键：单词 + tab键 -> <单词> 标签是可以上下排列，也可以组合嵌套。语言 : 编程语言2.HTML初始代码？每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。! + tab键 : 快速的创建html的初始代码<!DOCTYPE html>
复制链接

扫一扫