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;
}