HTML标签 -- 属性篇

1.keyword  content网页关键字

<meta name="keywords" content="ionic4,ionic4视频教程,Vue,ionic React教程">

   keyword  content网页内容描述

<meta name="description" content="Ionic基于Web Components ,是一款开源的Html5移动App开发框架,是Angular Vue React移动端解决方案,Ionic专注于移动WEB开发技术，可以快速创建一个跨平台的移动应用,使用ionic4只需要开发一次可以在android、ios、微信、移动web页面多平台运行">

2.超链接title可取值_blank(在新窗口打开)、_self（默认在本窗口打开, name是锚点（本窗口快捷定位）

<a href="#gyy">

① <p id="gyy">007<p>
② <a href="https://www.itying.com/goods-1067.html" target="_blank" name="gyy">

 3. pre标签保留空格和换行，sup上标字、sub下标字 ，dl标签/dt项目/dd/dd/dd注释，lable标签属性for值==包裹input的id值     

iframe内联框架：点击left.html中悯农将content.html内容显示到index.html当中

    index.html ： <iframe name=“leftIframe” width,height,src,scrolling="yes no auto",frameboder="0"></iframe>

    left.html：<a href="content.html" target="leftIframe">悯农</a>

    content.html：<pre>锄禾日当午</pre>
table标签：①cellspacing=0（边框一般取0），cellsppading内容位置，

          ②align="center"水平对齐，valign="middle"垂直对齐，colspan=“2”跨列合并--，rowspan跨行合并=

form标签：①method=get（显式提交）/post（隐式提交）  action提交地址 name表单名

         ②提交文件file：method="post";  必加属性enctype="multipart/form-data"

         ③隐藏传参数：<input type="hidden"  value="null"></input>

    get和post的区别：①. get中url数据可以看到，post看不到

                                     ②. get一般提交少量（最多1K）数据，post理论上没有限制

                                     ③. get提交数据在浏览器历史记录中，安全性不好

4. Html5新特性：

  ①新增input类型

①
邮箱：<input type="email"/>
搜索：<input type="search"/>
网站类型：<input type="url"/>
颜色拾取：<input type="color"/>
数字类型：<input type="number" min="0" max="750"/>
字符类型：<input typr="text" minlength="8" maxlength="30"/>
范围：<input type="range" min="0" max="750" value="80" step="10"/>
日期：<input type="date"/>
周：<input type="week"/>
月：<input type="month"/>
②
默认提示：<input typr="text" placeholder="请输入用户名"/>
多个值逗号隔开：<input type="email" mutiple/>
自动聚焦：<input typr="text" autofocus/>
防止为空：<input typr="text" required/>

  ②新增语义化标签：

头部：<header></header>
导航：<nav></nav>
文章标题：<section></section>
侧边栏：<asider></asider>
页脚：<footer></footer>
内容块（论坛帖子，博客文章，用户评论）：<article></article>
图片描述：
     <figure>
       <img src="test.img" alt="未能加载成功" title="足球"/>
       <figcaption>足球天下</figcaption>
     </figure>
文档描述（IE不支持）：
     <details>
       <summary>第十三届第三次会议</summary>
       <p>5月27日,中国人民政治协商会议第十三届全国委员会第三次会议在北京人民大会堂举行闭幕会。</p>
     </details>
标注文本背景颜色：<p>你是<mark>农大</mark>的吗？<p>
定义度量衡：<meter min="0" max="100" value="60" low="20" high="80">度量衡</meter>
定义进度条：<progress max="100" value="80">进度条<progress/>
搜索框选项列表：
    <input id="myCar" list="cars" />
    <datalist id="cars">
        <option vlaue="BMW" />
        <option>Ford</option>
        <option>Volvo</option>
    </datalist>

5. 视频/ 音频/embed标签

<video controls="controls" autoplay="autoplay" loop muted(静音) poster(海报)="img/4.png">
    <source src="video/molang.mp4"/>
    <source src="video/molang.ogg"/>
    <source src="video/molang.webM"/>
</video>
<audio src="audio/007.mp4" controls="controls" autoplay="autoplay" muted="muted" loop>
    <source src="audio/molang.mp3"/>
    <source src="audio/molang.ogg"/>
    您的浏览器不支持这种格式！
</audio>

src类似于插件功能：<embed src="images/1.mp3" />

6.canvas和js结合绘画

<canvas id="myCanvas" width="400px" height="400px">您的浏览器版本太低</canvas>
 <script type="text/javascript">
        let canvas = document.getElementById('myCanvas');
        let obj = canvas.getContext('2d');  //返回一个对象，封装很多的绘图方法和属性

        // var colorobj= obj.createLinearGradient(0,0,100,0);      
        var colorobj=obj.createRadialGradient(50,50,10,50,50,50);  //三个圆的线性渐变
        colorobj.addColorStop(0,"red");    //渐变对象位置中的颜色和停止
        colorobj.addColorStop(0.5,"blue");
        colorobj.addColorStop(1,"green");

        obj.shadowColor="rgb(11,25,9)";    //阴影的颜色
        obj.shadowOffsetX=3;               //阴影的水平距离偏移量
        obj.shadowOffsetY=3;               //阴影的垂直距离偏移量
        obj.shadowBlur=5;                  //阴影的模糊级别

        obj.fillStyle="red";        //填充绘画的颜色
        obj.stokeStyle="green";     //边框的颜色
        //obj.rect(0,0,100,100);    //创建矩阵
        obj.fillRect(0,0,100,100);  //绘制填充矩形
        obj.strokeRect(100,100,100,100);
 </script>