首页 > Web开发 > 详细

HTML复习总结

时间:2021-01-14 09:54:32      阅读:1      评论:0      收藏:0      [点我收藏+]

网页三要素:

HTML:网页骨架。

CSS:设置html元素样式。

JavaScript:控制页面的行为。

一、什么是HTML

1、HTML是一种超文本标记语言。

2、网页结构

<!-- 标准的网页结构 -->
<!-- 文档声明,用于声明网页的类型 -->
<!DOCTYPE html>
<!-- 网页根节点 -->
<html>
<!-- 网页信息,比如:标题、图标、编码 -->
<head>
<!-- 网页编码, utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1 -->
<!-- 属性 attribute,标签属性用来描述标签特性。格式: 属性名="属性值"多个属性间用 空格 隔开-->
<meta charset="utf-8" />
<!-- 网页标题 -->
<title>标题</title>
<!-- 网页图标 在线制作网址:https://tool.lu/favicon/ -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- 引入外部样式 -->
<link href="#" type="text/css"/>
<!-- 内部样式 -->
<style type="text/css">
</style>
<!-- 引入外部js -->
<script src="#"></script>
<!-- 内部 js -->
<script type="text/javascript"></script>
?
<!-- SEO 搜索排名 -->
<!-- 网页作者 -->
<meta name="author" content="云创动力"/>
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 网页描述 -->
<meta name="description" content="" />
</head>
<!-- 网页中显示的内容 -->
<body>
页面内容

<!--
网页标签:使用<>括起来有特殊意义关键字,通常成对出现的
  成对出现的标签 <span></span>
  有开始标记(标签) <span>
  有结束标记(标签) </span>
 
  自结束/自封闭标签
     <meta /> <hr />
 
注意: 网页的标签不区分大小写,但是通常建议使用小写

元素: 标签以及标签中的内容
  例如: <p>这是一个段落</p>
 
元素间的关系: dom 树
   <html>
 <head>
     <meta charset="utf-8" />
 <title>标题</title>
 </head>
...
</html>  
 
 title 元素是 head元素的 直接子元素
 head 元素是 title 元素的 直接父元素
 
 title 和 meta元素有共同的直接父元素,
 title 和 meta 就是兄弟关系(同级元素)
 
 head 是 html 元素的直接子元素
 那么 title以及 meta 和 html 的关系是什么?
 后代元素, 只要是 当前元素内的标签都是它的 后代元素
-->

</body>
</html>
?

3、元素分类:

(1)内联(行)元素:span a em b br u i s img

(2)块级元素:p div ul ol dl hn form table hr nav aside section

4、a标签:

(1)属性:href:链接地址 target:链接打开方式(blank 新窗口,self 本页面,top最外层页面,parent 父页面)domnload 下载该文件的名称

(2)锚点:使用name或id属性定义名称

同一页面的使用

<a name="top"></a>
<div>
  中间是很长的文字或图片
</div>
<a href="#top">回到顶部</a>

不同页面的使用

<!--页面1-->
<p>
  this is index01
</p>
<a name="bottom"></a>
<!--页面2-->
<p>
  this is index02
</p>
<a href="index02.html#bottom">页面1的底部</a>

5、iframe 内联框架

6、audio 音频:

(1)属性:controls 控制按钮 autoplay 自动播放 muted 静音 preload 加载(auto 自动默认、none不预加载、metadata 预加载) loop 循环播放

7、video 视频:

(1)属性:poster 视频封面 controls 控制按钮 autoplay 自动播放 muted 静音 preload 加载(auto 自动默认、none不预加载、metadata 预加载) loop 循环播放

(2)滚动字幕:marquee

8、js控制音频视频:

<script type="text/javascript">
//获取 音频元素
var audio=document.querySelector("#audio");
//获取 播放按钮
var btn=document.querySelector("#btn");
function play(){
var videoStatus = video.paused;
if(videoStatus){
video.play();
btn.innerText=‘暂停‘;
}else{
video.pause();
btn.innerText=‘播放‘;
}
}

function listen(e){
var code=e.keyCode;
if(code==32||code==13){
play();
}
}
window.addEventListener("keydown",listen,false)
</script>

 

9、img 图片

(1)属性:src 图片源地址

(2)图片格式:jpg/jpeg 它支持极高的压缩率,因此JPEG图像的下载速度大大加快

png 支持背景透明 gif 动图 bmp 位图 几乎不进行压缩 alt 若图片不正常显示,显示其值

(3)方式:本地图片、在线图片、加密图片(Base64)

HTML复习总结

原文:https://www.cnblogs.com/fn69/p/14275348.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号