HTML及CSS基础知识

国服第三切图仔

已于 2022-09-23 11:16:35 修改

阅读量223

点赞数 1

文章标签： html css 前端

于 2022-09-23 11:16:05 首次发布

本文链接：https://blog.csdn.net/m0_73495473/article/details/126607044

版权

参考视频
注：本文仅用于学习交流

html基础知识

html5文档声明:<!doctype html>

标签属性及含义

&nbsp 表示一个空格
&gt 大于号
&lt 小于号
meta标签：name 名字，content 值

eg:<meta name="keyword" context="........" />

<hgroup></hgroup> 标题组标签
<p></p>元素块
<em></em>表示语音语调加重
<strong></strong>表示重要内容强调
<blockquote></blockquote>表示引用
<q><q/>表示短引用
<br></br>表示换行
<header></header> 表示头部
<main></main>表示主体
<footer></footer>表示底部
<article></article>表示文章
<section></section>表示独立区块
<div></div>区块
<ul></ul>无序列表
<ol></ol>有序列表
<dl></dl>定义列表
<dt></dt>定义内容
<dd></dd>对内容解释
<a></a>超链接

<a href="......">超链接</a>
<a target="self"></a>默认当前标签页打开超链接
<a target="blank"></a>新的标签页打开超链接
<a target="#"></a>点击超链接返回本页顶部
如果超链接需要点击去往任意位置需要将‘#id’中的id表示为此位置的id值

<img src="路径" alt="描述“></img>显示图片
图片的格式
在这里插入图片描述

<iframe src="引入的网站" frameborder="边框"></iframe>
<audio src="音频文件” controls autoplay loop></audio>
<video src="视频文件” controls autoplay loop></video>

controls:用户是否可以控制播放
autoplay:是否自动播放
loop：是否循环播放

CSS基础知识

HTML通过link标签引入CSS文件

基本常识

选择器：选中页面中的指定元素
声明块：指定要为元素设置的样式

各种选择器

id选择器 #名{}
class选择器 .名{}
通配选择器 *{}
交集选择器
作用：选择同时符合的多个条件的元素
语法：选择器1 选择器2 选择器3 .。。。。。。选择器n{}
注意：交集选择器中若有元素选择器，则元素选择器开头
并集选择器
作用：同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器3，，，，选择器n{}
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
后代元素选择器
作用：指定元素内的指定后代元素
语法：祖先后代
选择下一个兄弟
语法：前一个+下一个
选择下边所有兄弟
语法：兄~弟
属性选择器
在这里插入图片描述
伪类选择器

超链接的伪类选择器
:link 用来表示没有访问过的链接（正常链接）
:visit 用来表示访问过的链接
由于隐私原因，所以visit伪类只能修改链接的颜色
:hover 用来表示鼠标的移入状态
:active 用来表示鼠标点击的状态
伪元素选择器
在这里插入图片描述

基础知识

样式继承：我们为一个元素设置的样式同样也会展现在他后代元素身上。继承发生在祖先和后代元素之间。利用继承我们可以将一些通用的样式写到共同的祖先上。但并不是所有的样式都可以被继承，如背景相关的和布局相关的都不会被继承。
样式的冲突：
在这里插入图片描述
长度单位：

颜色单位：

布局

文档流

在这里插入图片描述

盒子模型

在这里插入图片描述

边框

盒子的大小：

内边距：
在这里插入图片描述

外边距：

水平方向的布局：

垂直方向的布局：默认情况下父元素的高度被内容撑开

外边距的折叠：

行内元素的盒模型：

浏览器的默认样式

去除项目符号：list-style:none
在这里插入图片描述

轮廓阴影和圆角

在这里插入图片描述

浮动

在这里插入图片描述

高度塌陷问题及解决

在这里插入图片描述
BFC解决

BFC开启方式：
	1.将元素设置为浮动（不推荐）
	2.将元素设置为块内元素（不推荐）
	3.设置元素的overflow：auto或者overflow：hidden

clear解决
在这里插入图片描述

clear原理：
		设置清除浮动以后，浏览器会默认为元素增加一个外边距，以使其不受浮动元素的影响。

after伪类解决
在这里插入图片描述

这里的三个盒子，第一个是边框元素，默认被内容撑开，第二个为浮动元素。如果想要设置第一个元素和第二个元素高度一样，被第二个浮动元素撑开。
①我们可以设置第三个盒子，第三个盒子清除第二个元素浮动影响，那么第三个盒子就可以撑开第一个。（用HTML解决了CSS问题，不推荐）
②设置第一个元素的after，设置为块元素，清除浮动影响，则第一个元素就可以被浮动元素撑开
在这里插入图片描述
clearfix解决

这里可以同时解决高度塌陷和外边距重叠问题

定位

定位：
在这里插入图片描述
偏移量：

相对定位

在这里插入图片描述

绝对定位

在这里插入图片描述
添加绝对定位后，水平方向和竖直方向的等式都要满足，以水平方向举例：

固定定位

在这里插入图片描述

粘滞定位

在这里插入图片描述

元素的层级

在这里插入图片描述

字体族

正常字体

在这里插入图片描述

图标字体

fontawesome

在这里插入图片描述

也可以通过实体来使用图标字体。格式：&#x图标的编号

iconfont

进入阿里图标库：阿里巴巴矢量图标库
点击自己喜欢的图标加入购物车
在这里插入图片描述
在购物车中添加至项目

查看自己的项目并下载至本地并解压

将解压后的项目复制到vscode中

注意：需要删除demo.index和demo。可以自己点击demo.index查看图标介绍，但没必要引入到vscode中

这里介绍两种比较简单的使用
在这里插入图片描述

行高

在这里插入图片描述

注：可以将行高设置为和高度一样的值，使文字水平居中

字体的简写属性

在这里插入图片描述

文本样式

文本的水平对齐和垂直对齐

在这里插入图片描述

文本的其他样式

在这里插入图片描述

背景

背景格式

background-color：设置背景颜色
background-image：设置背景图片

可以同时设置背景颜色和背景图片，这样背景颜色将衬托于背景图片下方
如果背景图片小于元素，则背景图片将会给平铺满整个元素
如果背景图片大于元素，则背景图片将会部分显示与背景元素
如果背景图片和背景元素一样大，则图片正常显示

在这里插入图片描述
background-position：设置图片的方位。
方法一：left,right,center,top,bottom选项，每次需输入两个值，如果输入一个值，则默认第二个值与第一个值相同。
方法二：通过偏移量设置。第一个值为水平方向偏移量，第二个值为垂直方向偏移量。
在这里插入图片描述

解决背景前端加载用户体验度不好的问题

解决：将多个小图片保存到一个大图片中，通过设置background-position偏移量来控制哪个部分在背景中显示即可。这种图片应用十分广泛，被称为CSS-sprite，即雪碧图
在这里插入图片描述

线性渐变

在这里插入图片描述

径向渐变

在这里插入图片描述

表格

在html中，我们使用table属性创建表格

<table>
  <!--td表示有几个行-->
  <td>
   	<!--tr表示有几列-->
  	<tr></tr>
   <tr></tr>
  </td>
  <td>
  	<tr></tr>
  <!--colspan横向合并单元格，rowspan纵向合并单元格-->
   <tr colspan="2"></tr>
  </td>
</table>

长表格：
在这里插入图片描述

注意：三个部分里面都可以放tr，头部里面可以放th表示标题，存放th的元素会出现加粗居中的效果

表格的样式

border-spacing：设置两个单元格之间的间距
border-collapse:设置边框合并，当值为collapse时单元格之间合并
可以设置颜色，通过子元素选择器设置数据可以控制单双行显示此颜色，如2n,2n+1
在这里插入图片描述
默认情况下,td元素中的字体是垂直居中的，可以通过vertical-align设置middle来控制元素上下左右都居中

表单

在这里插入图片描述

<form action="这里填写提交的地址">
  <!--文本框每次都会自动补全以前填写过的内容,通过autocomplete="off"关闭自动补全
     readonly可以将文本框设置为只读 会提交内容
		disabled可以将文本框设置为禁用 不会提交内容
		autofoucs可以自动获取焦点
   -->
  文本框<input type="text" name="这里填写提交的属性"><br>
  密码框<input type="password" name="这里填写提交的属性"><br>
  <!--单选按钮这里两个属性一样才证明是一组单选按钮
		这里还要给每个选择框指定value属性用于用户提交后告诉服务器提交的value值是什么
		checked可以将按钮设置为默认选中
   -->
  单选按钮<input type="radio" name="单选按钮属性" value="a" checked>
  		  <input type="radio" name="单选按钮属性" value="b"><br>
  <!--多选按钮这里还要给每个选择框指定value属性用于用户提交后告诉服务器提交的value值是什么
		checked可以将按钮设置为默认选中
   -->
  多选按钮<input type="checkbox" name="多选按钮属性" value="a" >
  		  <input type="checkbox" name="多选按钮属性" value="b"><br>
  <!--下拉列表,设置selected可以为默认选中 -->
  下拉列表
  <select name="下拉列表属性">
    <option value="1">选项一</option>
    <option selected value="2">选项二</option>
    <option value="3">选项三</option>
  </select><br><br><br><br><br><br>
  <!--这里type指定属性，submit表示提交，reset表示重置，button表示普通按钮，email表示输入的是邮件且浏览器会帮你
		自动检查是否符合规范，tel表示电话号码，-->
  提交按钮<input type="submit" value="这里填写按钮显示什么给用户"><br>
</form>
===================================================<br>
<!--input可以改为button，这样button可以是成对出现的，能增加各种样式-->
  按钮<button type="这里写type">按钮</button>

在这里插入图片描述