html css学习笔记

HTML学习：

1.网页.

网站是网页的集合，网页通常是HTML文件组成；

构成网站的基本元素；

2.HTML

超文本标记语言；超越文本限制；

3.Web标准

结构（网页元素，骨架 Html），表现（外观样式 CSS），行为（交互效果 JS）

4.HTML标签

（1）语法规范：

​ HTML标签是由尖括号包围的关键词

​ 关系：包含关系，并列关系

（2）基本结构标签

标签名	定义	说明
	HTML标签	根标签
	文档头部	Title
	文档的标题	让页面拥有属于自己的网页标题
	文档主体	网页主要内容

开发工具：vscode

(3)html5声明标签

（4）lang代表网页类型，有en,zh-CN,fr;

(5)charset:字符集，常用有GBK等

(6)常用标签：根据语义在合适的地方给一个最合适的标签，可以让页面结构更清晰

​

标签	代码
段落标签（文字分段）
标题标签（大小更大，加粗,一行显示）	;h1~6
换行标签
文本格式化：加粗	>或>
文本格式化：倾斜	>或
文本格式化：删除线	或
文本格式化：下划线	或
盒子	(一行可以放多个)
图像标签(单标签)

关于图片标签相关参数：

alt替换文本	alt=" "
title图片名字	title=" "
width设置宽度	width=" "
height设置高度	height=“”
border设置边框	border=" "

属性之间不分先后顺序，以空格分隔，属性采取键值对格式；

​ 超链接标签

​

外部链接语法格式	<a herf=“链接” target="”>文本或图像
herf	用于指定链接目标的url地址
target	用于指定链接页面的打开方式,_self为默认值，_blank为在新窗口的打开方式
内部链接（自身页面的内部链接）	<a herf=“相对路径” target="”>文本或图像
空连接	文本或图像

文字，图片视频均可以添加超链接

<a herf="http://www.qq.com" target="_blank">腾讯</a>

​ 锚点链接

​ 快速定位网页特定位置，类似目录

​ 在链接文本的herf属性中，设置属性值为#名字的形式，如第二集>

​ 找到目标位置标签，里面添加一个id属性=刚才的名字；

​ 注释标签和特殊字符

​ 注释： ,或通过crtl+/添加注释

​ 特殊字符：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PsWBsKou-1639731185130)(HTML/特殊字符2)]

​ 表格

​ 列表

​

列表	代码
无序列表	其中只能包含li标签
有序列表	只能包含li标签
自定义列表	只能包含dt与dl标签

​ 表单标签

​ 用于收集有用户信息；

​ 由表单域，表单控件与提示信息组成

表单域

属性
action
method
name

表单控件：

输入表单元素
其他属性	checked 默认
maxlength	最大长度

5.目录

目录文件夹：html，images（文件夹）

html文件所在目录为根目录

相对路径：以引用文件所在位置为参考基础，建立出的目录路径，加载图像只需要写出相对路径即可。

绝对路径：在电脑中的位置；很少使用

CSS

层叠样式表的简称；美化HTML；

1。语法规范：

属性以键值对形式；关键字小写；

2.代码风格；

紧凑；展开，推荐使用展开式；

3.选择器；

分为基础选择器与复合选择器；

标签选择器；写出标签进行选择来修改样式；

类选择器；创建一个样式对象，通过文本中来进行调用；样式通过“.类名”定义；这里需要自己了解一下常用的命名规则；

id选择器：通过“#类名”定义，结构id调用；只能调用一次；经常与js搭配使用；

通配符选择器：用“*”定义，选取所有文本内容遵循其中的样式内容；

4.文字属性（字体系列，大小，粗细和文本样式）

​ 使用font-family:来设置字体系列；

5.文字大小：

font-size: 16px

6.字体粗细(normal（400） bold(加粗，700) bolder lighter )，无单位：

font-weight: 700

7.文字样式（normal,italic(斜体)）：

font-style: italic

8.字体复合属性,不可调换顺序

font:font-style(可省略) font-weight(可省略) font-size/line-height font family

9.文本属性（外观，颜色，对其，装饰等）

​ color定义颜色；

​ 文本对齐：text-align,设置水平对齐方式

text-align: center/left/right

​ 文本装饰：

text-decoration: none/underline/line-through/overline

​ 文本缩进：

tent-indent: 20px/2em

​ 行间距：

line-height: 26px/1.5em

10.行内样式表：适于修改简单样式；

11.外部样式表：新建一个.css文件定义样式；

​ 引入：

<link rel="文件名" herf="文件路径">

12.Emmet语法

生成多个标签：标签*标签数 +tab键

兄弟标签用：+

排序：.demo$*5

13.快速格式化代码

shift+alt+f

14.复合选择器（后代选择器，子选择器，并集选择器，伪类选择器）

后代选择器：选择父代子元素

元素1 元素2 {样式声明}

子选择器：只选择后面第一代

元素1>元素2 {样式声明}

并集选择器：选择多种标签，通常用于集体声明

元素1，元素2{样式声明}

15.伪类选择器：

用于向某些选择器添加特殊效果

a:link{样式}   //未访问的链接
a:visited{}   //选择访问过的链接
a:hover{}    //选择鼠标经过的链接
a:active{}   //选择鼠标正在按还没放的链接

按照：a-l-v-h-a顺序编写

​ focus伪类选择器

input:focus{样式}

16.CSS元素显示模式；

块元素：,

,

,

• ,

独占一行；可设置高度，宽度，块内能放入行元素

行内元素：,,,,,…

一行内可以写多个行内元素；行内元素不能放入块元素；中可以放块元素；

行内块元素：,,

​ 元素显示模式转换：

a{
            width: 100px;
            height: 200px;
            background-color: rgb(0, 255, 170);
            /* 把行内元素转换为块内元素，块转行用inline ,行内块：inline-block*/
            display: block;
        }

17.snipaste小工具

简单但强大的截图工具；

18.CSS背景

​ 背景颜色：backgroung-color

​ 背景图片：background-image:none|url(url)

​ 背景平铺：backgroung-repeat:repeat| no-repeat| repeat-x| repeat-y

​ 背景位置：background-position: x y; 也可使用方位名词；

​ 背景固定与滚动：background-attachment: scroll | fixed

​ 背景复合写法：background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片设置

​ 半透明设置：background: rgba(0,0,0,(0,1))

19.CSS三大特性（层叠性，优先级，继承性）：

层叠：优先原则；

继承：子承父业

优先级：选择器相同，执行层叠性；

​ 选择器不同：按照不同选择器的优先级进行执行；

20.CSS盒子模型（浮动，定位）

​ 盒子模型

​ （1）边框：border

​ （2）表格细线边框：border-collapse(合并边框)

​ 边框会影响盒子实际大小

​ （3）内边距：padding会影响盒子实际大小；

​ 复合写法：顺序：上 下 左 右

​ （4）外边距：margin