hHTML5,CSS3,学习笔记
html笔记
1.html的基本格式
<!--文档声明,声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签,网页中的所有内容都要写在这里面-->
<html>
<!--网页的头部,不会再网页中出现,帮助浏览器或搜索引擎解析网页-->
<head>
<!--meat标签,用来设置网页的元数据,这里用来设置网页的字符集,避免乱码问题-->
<meta charset="utf-8">
<!--title里的内容显示在浏览器的标题栏上,搜索引擎会根据title中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--表示网页的主体,网页中的所有的可见内容都应该写在body里-->
<body>
<h1>第一个网页</h1>
<h2>马保国</h2>
<h3>松果糖豆闪电鞭</h3>
</body>
</html>
2.标签
常用的标签,例如:
<meta name="keywords" content="马保国,混元形意太极门掌门人,武德">
<!-- keywords表示网站关键字。多个关键字之间使用英文 "," 隔开 -->
<meta name="description" content="这个网站针不戳">
<!-- description用于指定网站的描述 -->
<hgroup>
<h1> 马保国大战英国大力士 </h1>
<h2> 折手指头 </h2>
</hgroup>
<!-- hgroup标签用来为标题分组,可以把一组相关的标题同是放到hgroup里 -->
<p>在p标签中的内容表示一个段落</p>
<br>表示换行
语义化标签
<p>
住在山里<em>针不戳</em>
</p>
<!--
em标签用于语气的加重
在页面中不会独占一行的元素叫做行内元素
-->
<p>
住在山里<strong>针不戳</strong>
</p>
<!-- strong表示强调主要的内容 -->
<blockquote>
你找周树人,关我鲁迅什么事呢?
</blockquote>
<!-- blockquote表示长引用 -->
<header></header>
<!-- header表示网页的头部 -->
<main></main>
<!-- main表示网页的主体
一个网页只有一个main
-->
<footer></footer>
<!-- footer表示网页的底部 -->
<nav></nav>
<!-- nav表示网页中的导航 -->
<aside></aside>
<!-- aside表示和主体相关的其他内容(侧边栏) -->
<article></article>
<!-- 表示一个独立的文章 -->
<section></section>
<!-- 表示一个独立的区块,上面的标签不能使用时用section>
块元素&行内元素
1.块元素:对网页进行布局。
2.行内元素:行内元素主要用来包裹元素。
一般情况会在块元素中放行内元素。而不会在行内元素中放块元素。
<div>
</div>
<!-- div没有语义,就用来表示一个区块,目前来讲div还是主要的布局元素。-->
<span>
</span>
<!-- 没有语义,是行内元素,一般用于网页中选择文字 -->
3.列表
html中的列表一共有三种
1.有序列表
有序列表,使用ul标签来创建无序列表
使用li标签表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
2.无序列表
有序列表,使用ul标签来创建无序列表
使用li标签表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
3.定义列表
使用dl标签来创建定义列表
使用dt来定义内容
使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页哪里是标题,哪里是段落。</dd>
</dl>
4.超链接
超链接可以从一个页面跳转到其他页面。
超链接也是一个行内元素。
在中可以嵌套任何元素,除了它自身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://www.bilibili.com">进入新世界</a>
<br>
<a href="https://www.bilibili.com/video/BV14t411J7bR?from=search&seid=11879629248292825137">马老师松果糖豆闪电鞭在线教学</a>
</body>
</html>
1.相对路径
当需要跳转到一个服务器(项目)内部页面时,一般都会使用相对路径
相对路径都睡使用 . 或 … 开头 ,./,…/可以不写,如果不写,就默认为./。
./ 表示当前文件所在的目录。
…/ 表示当前文件所在目录的上级。
2.超链接的其他用法
打开新的标签
target属性,用来指定链接打开的位置,是可选值。
_self 默认值,在当前页面中打开链接。不写默认为self。
_blank 在一个新的页面中打开超链接。
<a href="https://www.bilbil.com"target="_self">超链接</a>
<!--与不写无区别-->
<a href="https://www.bilbil.com"target="_blank">超链接</a>
1.回到顶部
直接把href的属性值设置为“#”
<a href="#">超链接返回顶部</a>
2.到网页的任意位置
给a标签加特殊的标记(id属性)
每一个标签都可以添加id属性,同一个页面中不能出现相同的id属性。
<a href="#abc">点击这里</a>
<a id="abc"href="#">到这个超链接的位置位置</a>
<a href="#def"></a>
<p id="def">
到这个段落的位置
</p>
5.图片标签
用于网页中引入一个外部图片。使用img标签,
src 属性指定的是外部图片的路径。(路径规则和超链接是一样的)
alt是对图片的描述
widht 图片的宽度
hight 图片的高度
如果只修改一个 ,图片会等比例缩小或放大
<img widht="200"src="002.png" alt="anmi大师的画">
6.内联框架
在一个页面内引用另一个页面
src里是要引用的链接
frameborder=“0”,表示内联框架的边框,0无,1有
<iframe src="hptts://bilibili.com"width="800"hight="600" frameborder="0"></iframe>
7.音视频播放
音视频引入时默认为不可操作
1.加上“controls”,用户可控制播放。
2.autoplay控制在打开页面时是否自动播放。(一般浏览器不会自动播放)
3.loop控制是否循环播放。
audio标签用来在页面中引入外部音频文件。
<audio src=" " controls></audio>
<audio src=" " controls autoplay></audio> <!-- 可控,自动播放-->
video标签
<video controls>
<source scr="">
</video>
css笔记
1.css语法
1.内部表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
内部样式表
所有将样式编写到head中的style标签里,通过css选择器来选中元素并将其改为各种样式,可以同时设置多个标签的样式,
并且修改时只要修改一次就能全部应用
-->
<style>
p{
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<p>aquaSUKI</p>
</body>
</html>
2.外部表样式
可以将css编写到一个外部的css文件,然后通过link标签来引入外部的css文件。
只要想使用这种样式都可以引入,使样式可以在不同页面之间反复使用。
<link real="stylesheet" href="./style.css">
<!-- ./style.css 为外部css样式表的链接。-->
p{
color: aqua;
font-size: 50px;
}
3.css选择器
css的注释格式
p为css选择器 通过选择器可以选定指定元素
通过声明块来指定元素的样式,声明块由一个一个的声明组成
一个样式名对应一个值,名和值之间用冒号连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/* css的注释格式
p为css选择器
通过选择器可以选定指定元素
通过声明块来指定元素的样式,声明块由一个一个 的声明组成
一个样式名对应一个值,名和值之间用冒号连接。
*/
p{
color: aqua;
font-size: 40px;
}
</style>
<p>针不戳</p>
</body>
</html>
2.选择器
1.常用选择器
元素选择器
id选择器
class选择器
通配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将所有的段落设置为红色
元素选择器
作用,根据标签名选中指定元素
语法,标签名()
例子: p{},h1{},div{}
*/
p{
color: aqua;
}
/*
id选择器
根据元素的id选择元素
语法;#id属性值{}
例子; #box{},#red{}
不能重复!!!!
*/
#red{
color: red;
}
/*
将两行改变样式
类选择器
作用,根据class属性值选中一组元素,
语法, .class属性值
class可以重复!!!!
*/
.blue{
color: blue;
}
/*
通配选择器
作用:选中页面中的所有元素
语法 *
例如
*{
color: red;
}
*/
</style>
</head>
<body>
<h1>针不戳</h1>
<p id="red">住在山里针不戳</p>
<p>住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
</body>
</html>
2.复合选择器
1.交集选择器:
注意:交集选择器中如果有元素选择器,必须以元素选择器开头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 将class为aqua的div字体大小设置为40px ,颜色改为aqua*/ /* 交集选择器 作用,选中复合多个条件的元素 语法:选择器1选择器2选择器3{} */ div.aqua{ color: aqua; font-size: 40px; } </style> </head> <body> <div class="aqua"> 我是div </div> <p class="aqua">我是p</p> </body> </html>
2.选择器分组:(并集选择器)
选择器1,选择器2{ }
<style> h1,span{ ........ } </style>
3.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*
子元素选择器
作用,选择指定父元素的指定子元素
语法:父元素>子元素
后代选择器
作用:选中指定元素内的所有后代元素
语法:祖先 后代
div span{
color aqua;
}
选择下一个兄弟 兄的元素:拥有相同父元素的元素是兄弟元素
语法:前一个+后一个
*/
/* 将p中的span元素改为aqua色 */
p>span{
color: aqua;
}
</style>
</head>
<body>
<!--
div中的p和span为兄弟元素
-->
<div>
<p>
<span>
我是p元素中的span
</span>
</p>
<span>我是div中的span</span>
</div>
<span>我是div外的span</span>
</body>
</html>
元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
属性选择器
选中含有指定属性的元素
[属性名]
选中含有指定属性和属性值的元素
[属性名=属性值]
*/
p[title]{
color: aqua;
}
p[title=efg]{
color: brown;
}
</style>
</head>
<body>
<p title="abc">轻音少女</p>
<p title>京阿尼</p>
<p title="efg">mio</p>
<p>yui</p>
</body>
</html>