html5

Posted on 2020-04-14 10:31  金色的省略号  阅读(346)  评论(0编辑  收藏  举报

  html,Hypertext Markup Language超文本,标记,语言

  HTML5标签,属性,事件,视频/音频,画布,有效DTD

  html的基本标签

  HTML 元素指的是从开始标签到结束标签的所有代码属性赋予元素意义和语境

  1、<!DOCTYPE>元素作用的是,该元素用来声明命名空间,该元素用来向搜索引擎声明网站关键字、网站作者;

  2、为了标识一个 HTML 文件,应该使用的标签,<html> </html>;

  3、文档首部标记,head;

  4、<meta>标签,表示网页元数据,是提供给浏览器和搜索引擎的关于网页的描述性数据;

  html源文件保存的时候,选择的保存方式,要与<meta charset="UTF-8" />里的charset属性一致,否则会出现乱码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
//我们常见的Unicode码是utf-8

  5、标题标记,title;

  6、文档内容标记,body;

  7、标题,h1~h6,一个页面建议只用一个h1标签

  8、段落,p;

  9、段内换行,br,是单独出现的标签 <br />;

  10、空格字符&nbsp;,以 & 开始 ; 结束;

  11、预留格式,pre,会保留源格式,包括空格;

  12、段内分组,span,在段落内,把需要特殊表现出来的文字放在<span> </span>标签对之间就可以了;

  13、水平线,hr,是单独出现的<hr />;

  14、注释 <!-- 注释 -->,是可以跨行的,可以另起一行;

  15、超链接,文字超链接,图片超链接,导航栏,a标签,是成对出现的,以<a>开始, </a>结束

<a href="http://www.baidu.com"> 百度 </a>

  a标签的13个属性

Common -- 一般属性
accesskey -- 代表一个链接的快捷键访问方式
charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8
coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
href -- 代表一个链接源(就是链接到什么地方)
hreflang -- 指出了链接到的页面所使用的语言编码
rel -- 代表文档与链内接到的内容(href所指的内容)的关系
rev -- 代表文档与链接到的内容(href所指的内容)的关系
shape -- 使用图像地图的时候可以使用shape指定链接区域
tabindex -- 代表使用"tab"键,遍历链接的顺序
target -- 用来指出哪个窗口或框架应该被此链接打容开
title -- 代表链接的附加提示信息
type -- 代表链接的MIME类型

  16、分区,div标签,division;

  div标签的align属性,可以把内嵌的<table></table>标签居中

<div align="center">
  This is some text!
</div>
<div align="value">

  align属性值

left    左对齐内容。
right    右对齐内容。
center    居中对齐内容。
justify    对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

  17、<table> 标签定义 HTML 表格;

  简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元,td属性,如,colspan="3",rowspan="3",可以合并单元格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

  18、<canvas> 标签,只是个容器,js 绘图

<!DOCTYPE html>
<html>
<body>
<!-- canvas标签 是个容器 自此区域内 js绘图 -->
<canvas id="myCanvas" width="950" height="150" style="border:0px solid black; background: #FFEBCD;"> <!-- 标签属性 -->
Your browser does not support the HTML5 canvas tag.</canvas>
<!-- 导入js -->
<script src="js/myjs.js"></script>

</body>
</html>
html,canvs标签,容器
// id查找标签
var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");//方法返回一个用于在画布上绘图的环境

ctx.shadowBlur=30; //设置或返回用于阴影的模糊级别
ctx.fillStyle="blue";//设置或返回用于填充绘画的颜色、渐变或模式

ctx.shadowColor="black";//设置或返回用于阴影的颜色
ctx.fillRect(45,45,50,50); //绘制“被填充”的矩形

ctx.fillStyle="#6495ED";//设置或返回用于填充绘画的颜色、渐变或模式
ctx.font="60px Verdana";
ctx.shadowColor="#ADFF2F";
ctx.fillText("Hello World!",250,90);//在画布上绘制“被填充的”文本
js,绘图,绘文本

  19、<ul>、<ol>、<dl>、<dt>、<dd>、<li>标签,列表,三种类型,有序列表、无序列表和自定义列表,表现为文字或图片列表等;

   20、<form>、<input>、<textarea>、<slect>、<option>标签,表单,所有表单控件(文本框、文本域、按钮、单选框等)都必须放在<form></form>标签之间,单选框 name属性要一致

<form method="post" action="save.php">
</form>
<input type="submit" name="botton" value="提交" />
<textarea cols="50" rows="10">在这里输入内容...</textarea>
<select name="select">
    <option value="看书" selected="selected">看书</option>
</select> 

  21、<frameset>标签,框架,不能将<body></body>标签与<frameset></frameset>标签同时使用;设置框架尺寸是不可以调整的<frameset src="example_a.html" noresize="noresize" />;若一个有 3 个框架的 Web 页实际上有 4 个独立的HTML文件;

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>

  22、<iframe> 标签,可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器;

<html>
<body>

<iframe src ="/index.html" width="400" height="300" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

  23、<marquee>标签,不是w3c官方定义,但是用途很广,俗称跑马灯,几乎所有元素都可以滚动,文字、图片、画布等;常用属性:loop、direction、scrolldelay、scrollmount、behavior(scroll,slide,alternate)、width、height、bgcolor;

<marquee behavior="alternate" direction="left">滚动文本</marquee>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="50" scrolldelay="1000" behavior="slide" loop="1"></marquee> 

 

  前端url,href,src详细含义https://www.cnblogs.com/Sarah119/p/8637387.html

  url,统一资源定位器,Uniform Resource Locator,网页地址,绝对url,基url(base标记,可以设置),相对url(相对的含义是相对目录)

  href,Hypertext Reference,超文本链接,网络资源位置;

  src,source,资源,外部资源位置;