1.初始html
<!--生成h5文档 ! tab&enter--;注释 ctrl + / >
<!--网页声明，获得标准网页文档-->
<!DOCTYPE html>
<html lang="en">
<!--根标签 一个网页只有一个根标签-->
<head>
<!--元数据 meta-->
<meta charset="UTF-8">
<!--网页兼容性-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--选项卡标签-->
<title>Day01-1</title>
</head>
<!--网页主体-->
<body>
<!-- html语法
1.注释 ctrl + / ;
2.属性 id class stlye title
id 唯一标识一个元素
class 表示一类元素
stlye 给标签设置样式 内联/行内样式
title 标签的提示说明
img width height alt 图片加载失败说明（img特有属性)
3.字符实体
空格  
><号 <-小于号；>-大于号
" 双引号
© 版权
-->
<!-- 单标签 img br hr -->
<!-- <img src=""> <br /> <hr /> -->
<!-- 双标签 -->
<!-- <div></div> -->
<!-- 规范：镜面嵌套，不建议交叉嵌套 -->
<!-- 镜面嵌套 -->
<!-- <div>
<p></p>
<span></span>
<div> -->
<!-- 交叉嵌套 -->
<!--
<div>
<p>
</div>
</p>
-->
<!-- 属性标签 属性名和值之间用=隔开 多对属性之间用空格隔开 -->
<div id="cantainer box"></div>
<div class="box"></div>
<div style="background-color: crimson;">我是块级元素</div>
<div title="我是第四个元素">我是块级元素</div>
<!-- 字符实体 -->
<div>我 是块级元素</div>
<div>我 是块级元素</div>
<div><"我是块级元素®3¥"©></div>
<address>
Writen by <a href="mailto:">wangbin</a><br>
中北大学
</address>
</body>
</html>2.块级元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day01-2</title>
</head>
<body>
<!-- 块级元素 div p section body html h5新增
特点：1.独占一行
2.宽度默认100%
3.可以通过css设置宽高
4.高度由内部元素决定
-->
<div style="width: 100px;height: 100px;background-color: red
;">我是一个块级元素</div>
<p>段落标签</p>
<section></section>
<!-- h5新增标签 -->
<!-- 类似于 div class = 'header footer nav' -->
<header></header>
<footer></footer>
<article></article>导航
<nav></nav>
<aside></aside>
<address></address>
<!-- 有利于seo优化 搜索引擎
1.meta加keywords
2.选项卡标题title
3.使用语义化标签 header footer .....
-->
<!-- 行内元素
特点：1.与其他元素共享一行
2.高度由内部元素决定
3.无法通过css设置宽高
4.不建议行内元素嵌套块级元素
-->
<span style="width: 100px;height: 100px;background-color: red
;">行内元素</span>
<i>斜体</i>
<em>斜体</em>
<cite>斜体</cite>
<b>加粗</b>
<strong>加粗</strong>
<sub>下标</sub>
<sup>上标</sup>
<strike>删除线</strike>
<pre>
<code>
var a = 10;
</code>
</pre>
</body>
</html>3.常见标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day01-3</title>
<!-- 指定所有a标签的跳转方式 -->
<base target="_blank">
</head>
<body>
<!-- a标签 img标签 p段落标签 br hr -->
<!-- 相对路径
./当前目录
../上一级目录
绝对路径 c d ...
-->
<!-- img特有属性 src alt width height -->
<img height="200px" src="../音视频/ad7.jpeg" alt="图片加载失败说明">
<a href="https://www.bilibili.com/video/BV1J24y1A7aG/?spm_id_from=333.934.0.0">
<img height="200px"
src="https://i1.hdslb.com/bfs/archive/80e1f1e52bb31be06c620cc92f2bc9fa4742ce6e.jpg@412w_232h_1c_!web-popular.avif" />
</a>
<hr>
<h1 id="box">一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 超链接标签 进行页面跳转 本地 外部 锚点 指定跳转方式
target _blank打开新标签 _self当前页面打开 可以用base指定打开方式
base写在head头部
-->
<a href="./2-块级元素和行内元素.html" target="_self">打开二页面</a>//打开新页面
<a href="https://www.bilibili.com/video/BV1J24y1A7aG/?spm_id_from=333.934.0.0">打开外部链接</a>//当前页面打开
<!-- 打开电子邮件 -->
<a href="mailto:">打开邮箱</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<span>行内元素</span><span>行内元素</span>
<!-- 3.设置锚点 -->
<!-- 回到顶部 -->
<a href="#" target="_self">回到顶部</a>
<!-- 指定锚点跳转 -->
<a href="#box" target="_self">回到h1标题</a>
<hr>
<div>hr是一个分割线</div>
<p>段落标签</p>
</body>
</html>4.音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音视频</title>
</head>
<source>
<!-- 视频标签 width height也是video特有属性
controls控制条 autoplay自动播放 muted静音播放
loop 循环播放 poster 设置封面
-->
<!-- <video controls loop poster="../音视频/ad7.jpeg" muted width="300px" src="../音视频/1.mp4"></video> -->
<br>
<!-- 音频标签
controls控制条 autoplay自动播放 muted静音播放
loop 循环播放
-->
<audio controls width="200px" src="../音视频/1.mp3"></audio>
<!-- 第二种视频格式 -->
<video controls width="300px" muted autoplay>
<source src="../音视频/1.mp4" type="video/mp4">
</video>
<!-- 第二种音频格式 -->
<audio controls autoplay id="music">
<source src="../音视频/1.mp3" type="audio/mp3">
</audio>
</body>
<script type="text/javascript">
window.onload = function () {
setInterval("toggleSound()", 1);
}
function toggleSound() {
var music = document.getElementById("music");//获取ID
if (music.paused) {
//判读是否播放
music.paused = false;
music.play(); //没有就播放
}
}
</script>
</html>5.h5新增标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- figure -->
<figure>
<figcaption>我是图片</figcaption>
<img src="../音视频/ad7.jpeg">
</figure>
<!-- details -->
<details>
<!-- <summary>一线城市</summary> -->
<div><mark>北京</mark></div>
<div><u>上海</u></div>
<div><del>深圳</del></div>
</details>
<mark>高亮效果</mark>
<u>下划线</u>
</body>
</html>
扫一扫
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
