文章目录

HTML
- 基本框架
- - iframe内联框架
- 基础
- - 1. 标题（h）
  - 2. 段落（p）
  - 3. 链接（a）
  - 4. 图像（img）
  - 5. 注释（）
  - 6. 水平线（hr）
- 属性
- - body属性
  - a 标签的属性
  - - target 属性
    - type 属性
    - hreflang 属性
    - name 与 id 属性
  - head 属性
- 字体（font）
- - 1. 颜色
  - 2. 大小
  - 3. 类型
- 文本格式化
- - 1. 文本格式化标签
- 列表
- 音频（audio）和视频（video）
- - 1. 音频
  - 2. 视频
  - 3. 注意示项
- 注意事项
CSS
- 基本框架
- - 1. 内联（行内）样式
  - 2. 在head中的style定义
  - 3. 外部样式表
- 常用选择器
- - id 与 class
  - 通配选择器
  - 复合（交集）选择器
  - 关系选择器
  - 属性选择器
  - 伪类选择器
  - 超链接的伪类
  - 伪元素
  - 选择器的权重
  - - 1. 样式的冲突
    - 2. 样式的权重
    - 3. 选择器的优先级
- 单位
- 颜色
- - 1. rgb值：
  - 2. rgba值：
  - 3. 十六进制的rgb值：
  - 4. hls值和hlsa值
- 注意事项
- - 1. style

HTML

基本框架

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>无标题文档</title></head><body></body>
</html>

iframe内联框架

 <iframe src="https://www.bilibili.com" frameborder="0" width="1450" height="1000"></iframe>不常用，有缺点

基础

1. 标题（h）

<h1>一级标题</h1>        一般一个网页中只有一个h1标题
<h2>二级标题</h2>

拓展

<!-- hgroup标签用来为标题分组将一组相关的标题放入同一组中--><hgroup><h1>你好</h1><h2>我是</h2></hgroup>

2. 段落（p）

<p>Hello World!</p>                  <!-- 形成一个段落 -->
<br>Hello World!</br>               <!-- 折行，但不形成段落 -->
<blockquote>独占一行的块元素</blockquote>   <!--引用 -->

3. 链接（a）

<a href="https://www.bilibili.com/">这是一个链接</a>

4. 图像（img）

img元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）
- alt 图片的描述，默认情况下不会显示，当图片加载失败的时候会显示
  
  但搜索引擎会根据alt中的内容识别图片，如果不写alt属性则不会被搜索引擎收录
  - title属性可以显示图片或文字的属性

<img title="多多和小小初次购物" src="../图片/图像.jpg" alt="多多and小小" width="200" >
<!--若只设置width（height），不设置height（width）则会等比例缩放 -->

拓展
1. jepg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图
2. gif：支持的颜色较少，支持简单透明，支持动图
3. png：支持的颜色丰富，支持复杂透明，不支持动图
4. webp：谷歌推出的专门用来表示网页中的图片的一种格式，具备前三种的所有优点，内存小
5. base64：希望图片加载速度快的时候使用，将图片转换成编码的形式，随浏览器加载一起出

5. 注释（）

<!--这是一个注释-->

6. 水平线（hr）

<hr>

属性

body属性

值	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

拓展

title 标签的内容会作为浏览器搜索结果的超链接上的文字

a 标签的属性

target 属性

<a target="value">

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

type 属性

<a type="value">

属性	描述
MIME type	规定被链接文档的的 MIME 类型。

hreflang 属性

<a hreflang="value">
<a href="https://www.bilibili.com" hreflang="zh">B站</a>

name 与 id 属性

name（id）可传送至锚处

<a name="top">top</a>                   <!--锚-->
<a href="#top">去top</a>                 <!-- 传送 -->

拓展

可在打开新网页的时候定位到锚处

<a href="http://127.0.0.1:5500/basic.html#foot">访问到foot处</a>

head 属性

标签	描述
head	定义了文档的信息
title	定义了文档的标题
base	定义了页面链接标签的默认链接地址
link	定义了一个文档和外部资源之间的关系
meta	定义了HTML文档中
script	定义了客户端的脚本文件
style	定义了HTML文档的样式文件

<meta charset="UTF-8" name="keywords" content="HTML,学习,小小,多多">
<meta charset="UTF-8" name="description" content="HTML,学习,小小,多多">

字体（font）

1. 颜色

<fontstyle="color: brown;">Hello World!</font>

2. 大小

<fontstyle="font-size: 20px;">Hello World!</font>
<pstyle="font-size: 20px;">Hello World!</p>

3. 类型

<pstyle="font-family:华文彩云;">你好世界！</p>
<fontstyle="font-family:华文彩云;">Hello World!</font>

文本格式化

1. 文本格式化标签

<b>Hello World!</b>                                         <!-- 加粗文本 -->
<em>Hello World!</em>                                       <!-- 定义着重文字 -->
<i>Hello World!</i>                                         <!-- 斜体 -->
<strong>Hello World!</strong>                            <!-- 强化语气 -->
<blockquote>独占一行的块元素</blockquote>

列表

列表之间可以互相嵌套

属性	描述
ul	无序列表（用的最多）
ol	有序列表
dl	定义列表

<dl><dt>HTML</dt>          <!--dt定义名，dd定义的内容--><dd>HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等</dd></dl>

音频（audio）和视频（video）

1. 音频

controls：允许用户控制
- autoplay：自动播放
  - loop：循环播放

<audio src="" controls autoplay loop></audio>

拓展

<!-- 可用来播放音频失败时提示用户升级浏览器 <audio controls>对不起，你的浏览器不支持播放音频，请升级浏览器<source src="./音频/双笙_封茗囧菌-霜雪千年.mp3"> </audio>
--><embed src="./音频/双笙_封茗囧菌-霜雪千年.mp3" type="audio/mp3" width="300">
<!-- embed所有浏览器都支持，但版本很旧-->

2. 视频

方法和audio基本一致

<audio controls>对不起，你的浏览器不支持播放视频，请升级浏览器<source src="./">
</audio><embed src="./" type="audio/mp4" width="300">

// embed所有浏览器都支持，但版本很旧

3. 注意示项

一般不会引入本地视频

注意事项

如果需要书写特殊符号，则需要用Html中的实体（转义字符）

&实体的名字

显示结果	实体名称	描述
	&nbsp	空格
<	&lt	小于号
>	&gt	大于号
&	&amp	和号
"	&quot	引号
`	&apos	撇号
￠	&cent	分（cent）
£	&pound	镑（pound）
¥	&yen	元（yen）
€	&euro	欧元（euro）
§	&sect	小节
©	&copy	版权（copyright）
®	&reg	注册商标
™	&trade	商标
×	&times	乘号
÷	&divide	除号

CSS

基本框架

1. 内联（行内）样式

直接在HTML语句中定义

<pstyle="color: red; font-size: 30px;">命数入织，当为磐石</p>

缺点

样式只能对一个标签生效
对多个元素生效时，需每一个都定义一次
修改样式麻烦，需一个一个修改，不方便

2. 在head中的style定义

在CSS选择器中定义样式

<style>p{color: red;font-size: 30px;}</style>

优点
1. 可同时为多个标签定义样式，修改时只需修改一处即可应用全部
缺点
1. 但只能对当前的一个网页有效，不能跨界面复用

3. 外部样式表

定义一个.css文件
然后用link语法链接

<link rel="stylesheet" href="./样式表.css">

常用选择器

id 与 class

定义：根据元素的id属性值选中一个元素
语法：#red{}
注意：最好不要重复使用，id属于唯一值

<style>#gray{color: gray;}</style>
</head>
<body><h1>静夜思</h1><p>床前明月光</p><p>疑似地上霜</p><p>举头望明月</p><p id="gray">低头思故乡</p>

class

定义：与id相似，但可以重复使用
语法：.blue{}
class可以为元素分组
一个元素可以指定多个class元素,class之间用空格间开

<style>#gray{color: gray;}.blue{color: blue;}.one{font-size: 15px;}</style>
</head>
<body><h1>静夜思</h1>    <p class="blue one">床前明月光</p>   <!--指定多个class元素--><p class="blue">疑似地上霜</p><p class="blue">举头望明月</p><p id="gray">低头思故乡</p>

通配选择器

*{<!-- 作用于整个CSS -->
}

复合（交集）选择器

定义：同时复合多个条件的元素
语法：h1，h2{}

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>复合（交集）选择器</title><style>p.two{font-size: 30px;font-family: "华文彩云";}div,h1{font-size: 40px;font-family:Arial, Helvetica, sans-serif;}</style>
</head>
<body><div class="two">HTML</div><p class="two">CSS</p><P class="two">Java</P><h1>标题</h1>
</body>
</html>

关系选择器

定义
语法
- div>p div.one>p div>p>span p+h4 div~span

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>关系选择器</title><style>div>span{                       /*子元素选择器  语法：父元素>子元素font-size: 40px;font-family:'宋体';color: orange;}div.one>p{                      /*父子选择器结合class标签font-size: 30px;color: chocolate;}div>span>p{                     /*父子选择器*/font-size: 40px;color: teal;}p + h4{font-family: '草书';        /*兄弟选择器   语法：前一个+后一个*/color: violet;  }div ~ span{                     /*兄弟选择器   前一个 + 后面所有的兄弟*/font-size: 20px;color: royalblue;}</style>
</head>
<body><div><span>div内的span<p>div>span>p</p></span>  </div><div class="one"><p>div与class</p><h4>p旁边的h4元素</h4></div><span>div外的span01</span><span>div外的span02</span><span>div外的span03</span><span>div外的span04</span>
</body>
</html>

属性选择器

语法：
- [属性名] 选择含有指定属性名的元素
- [属性名 = 属性值] 选择含有指定属性名和属性值的元素
- [属性名 ^= 属性值] 选择属性值以指定开头的元素
- [属性名 $= 属性值] 选择属性值以指定结尾的元素

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>属性选择器</title><style>p[title]{                   /*[属性名]  选择含有指定属性名的元素*/color: tomato;}p[title = abc]{             /*[属性名 = 属性值]   选择含有指定属性名和属性值的元素*/font-family: '华文彩云';}p[title ^= abc]{            /*[属性名 ^= 属性值]  选择属性值以指定开头的元素*/font-size: 40px;}p[title $= de]{            /*[属性名 $= 属性值]    选择属性值以指定结尾的元素*/font-size: 60px;font-weight: bold;}p[title *= fc]{            /*[属性名 *= 属性值]    选择属性值中含有某值的元素*/font-size: 10px;font-weight: bold;}</style>
</head>
<body><h1>静夜思</h1><p title="abc">床前明月光</p><p title="abcde">疑似地上霜</p><p title="fde">举头望明月</p><p title="acfcbb">低头思故乡</p>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器</title>
<style>/*伪类*/ul>li:first-child{      /*设置ul里的第一个li元素*/color:brown;}ul>li:last-child{       /*设置ul里的最后一个li元素*/color: yellowgreen;}ul>li:nth-child(3){       /*设置ul里的第3个li元素*/color: midnightblue;    /*特殊值：n ，范围是0到+∞*/}                             /*特殊值：2n或even ，表示选中偶数位的元素*//*特殊值：2n+1或odd ，表示选中奇数位的元素*//*以上伪类都是根据所有子元素进行排列，不考虑是否同类型*//*  -of-type只考虑同类型的顺序排列*/ul>li:first-of-type{color: blueviolet;}ul>li:last-of-type{color:bisque;}ul>li:nth-of-type{color:cornflowerblue;}ul>li:not(:nth-child(3)){       /*除了设定的条件不选中，其余的都选中*/color: brown;}</style>
</head>
<body><ul><span>我是span</span>       <!--若此时有一个span在li前面，则上面的ul>li:first-child{}失效--><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li><span>我是span</span>       <!--若此时有一个span在li后面，则上面的ul>li:last-child{}失效--></ul>
</body>
</html>

超链接的伪类

语法：
1. link来表示未访问过的链接
2. visited来表示访问过的链接（由于隐私的原因,visited只支持修改颜色,不支持修改其他元素）
3. hover表示鼠标移到链接之后的状态
4. active表示鼠标点击之后链接的状态
注意：
1. link和visited属于超链接独有属性
2. hover和active所有元素都可以使用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接的伪类</title><style>a:link{         /*link来表示未访问过的链接*/color:red;}a:visited{      /*visited来表示访问过的链接*/font-size: 50px;        /*由于隐私的原因,visited只支持修改颜色,不支持修改其他元素*/color: coral;}a:hover{        /*hover表示鼠标移到链接之后的状态*/color: darkgrey;font-size: 30px;}a:active{       /*active表示鼠标点击之后链接的状态*/color: darkmagenta;}/*注意link和visited属于超链接独有属性hover和active所有元素都可以使用*/</style>
</head>
<body><a href="https://www.baidu.com/">百度</a><a href="https://www.bilibili.com/">B站</a><a href="https://www.4399.com/">4399小游戏</a>
</body>
</html>

伪元素

属性	描述
::first-letter	改变p中第一个元素
::first-line	改变第一行
::selection	选中的内容
::before	元素的开始
::after	元素的最后

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪元素</title><style>p::first-letter{        /*  ::first-letter   改变p中第一个元素*/font-size: 30px;}p::first-line{          /*  ::first-line    改变第一行*/background-color: gray;}        p::selection{           /*  ::selection     选中的内容*/color: darkgreen;}div::before{              /*  ::before        元素的开始*/content: '你好';}div::after{              /*  ::after        元素的最后*/content: '再见';}</style>
</head>
<body><div>hello,i am duoduohuang</div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, asperiores facere eos dolor rem cupiditate illo numquam perferendis nemo labore possimus deserunt praesentium, velit consequatur molestias nesciunt tempora, sint omnis?</p>
</body>
</html>

选择器的权重

1. 样式的冲突

当用不同的选择器选中相同的元素时,且设置的值不相同时,会发生样式冲突

2. 样式的权重

内联样式 1,0,0,0
- id选择器 0,1,0,0
  - 类和伪类选择器 0,0,1,0
    - 元素选择器 0,0,0,1

3. 选择器的优先级

比较优先级时，需要将所有选择器的权重进行相加，然后比较优先级，优先级高的显示

（分组选择器是单独计算的

多多HTMLCSS学习笔记（未完结，持续更新）相关推荐
1. Vue -- 指令【学习笔记】（持续更新）
  Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
2. 个人学习笔记汇总（持续更新）
  白墨的个人学习笔记 HTML JAVA Python MySQL 等待添加说明大家好,这里白墨,话不多说,先放笔记: HTML HTML笔记 JAVA JAVA笔记Myeclipse快捷键占位符的 ...
3. AutoCAD2019+vs2019+C# 二次开发学习笔记day01（持续更新）
  目录一.新建项目 1.应用程序目标框架选择 4.7.2版 2.生成目标平台选择x64 3.调试启动外部程序选择 acad.exe 二.添加autocad类库三.如何运用命名空间 1.[C ...
4. HTML+CSS学习笔记＜每周三持续更新＞
  实训笔记 Day1 一.Typora快捷键二.Git 1.工作原理 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 ...
5. AutoCAD2019+vs2019+C# 二次开发学习笔记day05（持续更新）
  目录一. 给定半径和圆心绘制圆 Circle 1.代码记录 2.封装函数二.给定两点绘制圆 1.代码记录 2.封装函数三.给定三点绘制圆 1.代码记录 2.封装函数四.多段线 Polylin ...
6. 超级详解遗传算法(GA)学习笔记(1.1) 持续更新
  遗传算法入门第一式---------求解函数极值问题(附完整代码和详解) 声明:大佬请指点,小白同学一起聚聚交流~~~~ 联想到球球大作战!!!!! 以这幅图为例,可以将其看成是一个种群,当中的散点就 ...
7. 问道区块链_区块链学习_v1.0.0_持续更新。。。
  本系列内容参考图创建共识网络调用部署挖矿消耗编写超级链组件节点多节点账号智能合约合约账号燃料耗品代币开发者区块尊重原创,转载请注明出处https://blog.csd ...
8. CTF MISC在我眼里各种奇奇怪怪的题学习思路总结（持续更新）
  系列文章目录 MISC:图片隐写简单题学习思路总结(持续更新) CTF Crypto简单题学习思路总结(持续更新) 文章目录系列文章目录前言一.二维码 1.1 QR码 1.2 Maxicode码 ...
9. CTF MISC图片隐写简单题学习思路总结（持续更新）
  系列文章目录第一篇文章: CTF Crypto简单题学习思路总结(持续更新) 文章目录系列文章目录前言一.JPG类隐写 1.1 JPG文件末尾添加字符串 1.2 JPG文件中添加字符串 1.3 ...
最新文章
热门文章

多多HTMLCSS学习笔记（未完结，持续更新）

文章目录

HTML

基本框架

iframe内联框架

基础

1. 标题（h）

2. 段落（p）

3. 链接（a）

4. 图像（img）

5. 注释（）

6. 水平线（hr）

属性

body属性

a 标签的属性

target 属性

type 属性

hreflang 属性

name 与 id 属性

head 属性

字体（font）

1. 颜色

2. 大小

3. 类型

文本格式化

1. 文本格式化标签

列表

音频（audio）和视频（video）

1. 音频

2. 视频

3. 注意示项

注意事项

CSS

基本框架

1. 内联（行内）样式

2. 在head中的style定义

3. 外部样式表

常用选择器

id 与 class

通配选择器

复合（交集）选择器

关系选择器

属性选择器

伪类选择器

超链接的伪类

伪元素

选择器的权重

1. 样式的冲突

2. 样式的权重

3. 选择器的优先级

多多HTMLCSS学习笔记（未完结，持续更新）相关推荐

最新文章

热门文章