多多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. 选择器的优先级
- 单位
- 颜色
- 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)则会等比例缩放 -->
- 拓展
- jepg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图
- gif:支持的颜色较少,支持简单透明,支持动图
- png:支持的颜色丰富,支持复杂透明,不支持动图
- webp:谷歌推出的专门用来表示网页中的图片的一种格式,具备前三种的所有优点,内存小
- 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:循环播放
- autoplay:自动播放
<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中的实体(转义字符)
&实体的名字
显示结果 实体名称 描述   空格 < < 小于号 > > 大于号 & & 和号 " " 引号 ` &apos 撇号 ¢ ¢ 分(cent) £ £ 镑(pound) ¥ ¥ 元(yen) € &euro 欧元(euro) § § 小节 © © 版权(copyright) ® ® 注册商标 ™ &trade 商标 × × 乘号 ÷ ÷ 除号
CSS
基本框架
1. 内联(行内)样式
- 直接在HTML语句中定义
<pstyle="color: red; font-size: 30px;">命数入织,当为磐石</p>
- 缺点
- 样式只能对一个标签生效
- 对多个元素生效时,需每一个都定义一次
- 修改样式麻烦,需一个一个修改,不方便
2. 在head中的style定义
- 在CSS选择器中定义样式
<style>p{color: red;font-size: 30px;}</style>
优点
- 可同时为多个标签定义样式,修改时只需修改一处即可应用全部
缺点
- 但只能对当前的一个网页有效,不能跨界面复用
3. 外部样式表
- 定义一个.css文件
- 然后用link语法链接
<link rel="stylesheet" href="./样式表.css">
常用选择器
id 与 class
- id
- 定义:根据元素的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>
超链接的伪类
语法:
link来表示未访问过的链接
visited来表示访问过的链接(由于隐私的原因,visited只支持修改颜色,不支持修改其他元素)
hover表示鼠标移到链接之后的状态
active表示鼠标点击之后链接的状态
注意:
- link和visited属于超链接独有属性
- 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
- 类和伪类选择器 0,0,1,0
- id选择器 0,1,0,0
3. 选择器的优先级
比较优先级时,需要将所有选择器的权重进行相加,然后比较优先级,优先级高的显示
(分组选择器是单独计算的
多多HTMLCSS学习笔记(未完结,持续更新)相关推荐
- Vue -- 指令【学习笔记】(持续更新)
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
- 个人学习笔记汇总(持续更新)
白墨的个人学习笔记 HTML JAVA Python MySQL 等待添加 说明 大家好,这里白墨,话不多说,先放笔记: HTML HTML笔记 JAVA JAVA笔记Myeclipse快捷键占位符的 ...
- AutoCAD2019+vs2019+C# 二次开发学习笔记day01(持续更新)
目录 一.新建项目 1.应用程序 目标框架 选择 4.7.2版 2.生成 目标平台选择x64 3.调试 启动外部程序 选择 acad.exe 二.添加autocad类库 三.如何运用命名空间 1.[C ...
- HTML+CSS学习笔记<每周三持续更新>
实训笔记 Day1 一.Typora快捷键 二.Git 1.工作原理 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 ...
- AutoCAD2019+vs2019+C# 二次开发学习笔记day05(持续更新)
目录 一. 给定半径和圆心 绘制圆 Circle 1.代码记录 2.封装函数 二.给定两点绘制圆 1.代码记录 2.封装函数 三.给定三点绘制圆 1.代码记录 2.封装函数 四.多段线 Polylin ...
- 超级详解遗传算法(GA)学习笔记(1.1) 持续更新
遗传算法入门第一式---------求解函数极值问题(附完整代码和详解) 声明:大佬请指点,小白同学一起聚聚交流~~~~ 联想到球球大作战!!!!! 以这幅图为例,可以将其看成是一个种群,当中的散点就 ...
- 问道区块链_区块链学习_v1.0.0_持续更新。。。
本系列内容参考图 创建 共识网络 调用 部署 挖矿 消耗 编写 超级链组件 节点 多节点 账号 智能合约 合约账号 燃料耗品代币 开发者 区块 尊重原创,转载请注明出处https://blog.csd ...
- CTF MISC在我眼里各种奇奇怪怪的题学习思路总结(持续更新)
系列文章目录 MISC:图片隐写简单题学习思路总结(持续更新) CTF Crypto简单题学习思路总结(持续更新) 文章目录 系列文章目录 前言 一.二维码 1.1 QR码 1.2 Maxicode码 ...
- CTF MISC图片隐写简单题学习思路总结(持续更新)
系列文章目录 第一篇文章: CTF Crypto简单题学习思路总结(持续更新) 文章目录 系列文章目录 前言 一.JPG类隐写 1.1 JPG文件末尾添加字符串 1.2 JPG文件中添加字符串 1.3 ...
最新文章
- 麦肯锡AI应用报告:深度学习是蓝海还是深坑?
- 优秀程序员写代码的七个优秀习惯
- 看本地网速_安装 ANSYS 本地帮助
- linux 自启动程序 优先级,Linux自启动服务优先级/顺序设置
- EduCoder 机器学习 逻辑回归
- javascript js jquery获取元素位置代码总结
- python中函数参数_Python函数的参数
- js中递归调用返回值为undefined问题
- 拦截器获取请求参数post_spring boot拦截器中获取request post请求中的参数
- Linux学习笔记(七):Shell与Shell Script
- python官网下载pip_python怎么下载pip
- ubuntu进入桌面自动启动脚本_Ubuntu程序开机自动启动设置(服务和自动运行配置文件)的几种方法...
- go项目实战 <微信公众号后台开发>(一、获取token)
- 重装系统后计算机无法联网,小编教你重装win10系统后电脑上不了网怎么办
- 如何在电脑上查看手机网页源代码?
- java与C/C++的比较
- JS数据类型检测的坑和通用数据类型检测方法
- 信息系统项目管理师计算题(进度管理计算)
- SY-REPID 和 SY-CPROG使用详解及其区别
- 【HTCVR】VRTK插件模块功能分析之传送移动(二)
热门文章
- matlab确定灰度阈值T,matlab灰度图像二值化【灰度图像二值化算法研究】
- 巧背单词-单词记忆11条妙方
- TENER: Adapting Transformer Encoder for Named Entity Recogni
- 【服务熔断】服务熔断完整说明
- python由谁创造出来的_编程语言简史:都是谁在什么时候创造出来的呢?
- 计算器(妈妈再也不用担心我的学习)
- 2020-10-18 今天来说说如何爬取猫眼上的电影信息
- webpack 之 LoaderRunner 全方位揭秘
- MXDP 力量的崛起
- iOS测试软件砸壳,ios app 砸壳(示例代码)
- Vue -- 指令【学习笔记】(持续更新)