复习第一天
复习有关H5的基本语句，H5的基本结构以及各种元素的属性。
上个学期学的东西都快忘光了，趁着暑假捡起来。XD
什么是HTML
HTML也叫作超文本标记语言(英文名：Hyper Text Markup Language）下面是它的基本格式。
<!DOCTYPE html> // 声明，告诉浏览器以什么样的规范显示页面
<html>
<head>
<meta charset="utf-8"> //国际通用编码
<meta name="description" content="描述的内容">
<meta name="keywords" content="关键词">
<title>网页标题</title>
<link rel="stylesheet" href=""> //目前我会使用这种链接的方式引入css3文件，我认为这是最方便的一种方式。
</head>
<body>
这里用来引入网页中的内容，包括但不限于文字，图片，音频和视频。
</body>
</html>
几种元素的插入方式
这里为了美观我选择使用代码块的方式展示
- 段落
<p></p> //段落
- 超链接
<a href="" target="_self"></a> //超链接
- href：这里用于插入想要跳转的链接地址，可以是网址也可以是本地文件夹的地址
- 还有一种方式是锚点跳转，就是用id给每一个模块起名字，然后用#+名字的方式进行跳转，下面是代码：
<div id="sever1">服务器1</div>
<div id="sever2">服务器2</div>
<a href="#sever1">服务器1</a>
<a href="#sever2">服务器2</a>
<a href="#">回到顶部</a>
-
注：几个常用的href常量
- href="#" //回到顶部
- href=“javascript:;” //禁止跳转
- target：这里是浏览器判断打开一个超链接的方式，它有两种属性：
- _self：这种打开方式是在本页面打开，也就是新的网页会将原本的网页覆盖掉。
- _blank：这种方式会自动创建一个新的网页，用于打开超链接地址。
- 图片
<img src="" alt="" title="">
- src：这里插入图片的地址或者是文件名，插入格式如下：如果你已经把图片放在了和html同一个文件夹下，那么直接写出图片名称即可，但是如果你吧图片放在了别的文件夹下，那你需要用./的方式先跳出此文件夹，然后用…/来进入图片所在的文件夹
- alt：这里用于存放未加载图片时，图片位置所显示的文字。
- title：这里是你将光标放在图片上时所显示的文字。
- 盒子
<div></div>
- 音频
<audio src="" controls autoplay loop></audio>
- 视频
<video src="" controls autoplay loop></video>
- 大盒子 用于划分屏幕的主分区
<div></div>
- 小盒子 用于划分细节分区
<span></span>
- iframe元素
这种元素可以创建一个包含另一个文档的内联框架，下面是代码
<iframe src="http://www.baidu.com" frameborder="0" width="1000" height="1000"></iframe>
-
其中
frameborder是他的属性之一，当
- frameborder="1"时，显示框架边框
- frameborder="0"时，不显示框架边框
- 列表
有三种形式的列表
- 无序列表：ul、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。
<ul>
<li>起床</li>
<li>吃饭</li>
<li>学习</li>
<li>pubg</li>
</ul>
- 有序列表：ol 、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。
<ol>
<li>起床</li>
<li>吃饭</li>
<li>学习</li>
<li>pubg</li>
</ol>
- 自定义列表：dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签
<h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>
CSS的引入方式
css可以很大程度上精简我们的主html文件，将大部分的元素属性创建保存在css文件中。除了前面的外链式引入css文件，还有几种引入方式：
- 行内式:
<div style="color:deeppink;">你们都很棒！</div>
- 内嵌式：在head里面通过style标签来写，如下
<style>
div,p{
width:500px;
height:200px;
background:greenyellow;
color:hotpink;
}
</style>
- 导入式:
<style>
@import "index.css"
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
