H5

最新推荐文章于 2021-05-10 21:24:08 发布

天山小黎

最新推荐文章于 2021-05-10 21:24:08 发布

阅读量204

点赞数

分类专栏： Vue HTML5

本文链接：https://blog.csdn.net/qq_42732038/article/details/100152918

版权

Vue 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

软硬件环境

1.硬件：
双核、2G内存
2.软件：
windows、Mac OS X、Linux

一、HTML与HTML5差异

1.什么是HTML?
（1）HTML是用来藐视网页的一种语言。
（2）HTML指超文本标记语言。
（3）HTML不是编程语言，是一种标记语言。

2.HTML5的新特性？
（1）用于绘画的canvas标签。
（2）用于媒介回放的video和audio元素
（3）对本地离线存储的更好支持
（4）新的特殊内容元素
如：article、footer、header、nav、section
（5）新的表单控件
如：calendar、date、time、email、url、search
（6）浏览器的支持
Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

3.开发工具：
VS Code、WebStrom、notepad++、Eclipse、text sublime、Dreamweaver、IntelliJ IDEA等。

二、 HTML5基础讲解

1.HTML基础标签
Head、body
2、HTML标题

  <h1>...<h6>等标签进行定义等

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>this is my web</p>
    hello <br/>
    hello world
    
</body>
</html>

3.HTML段落

<p>标签定义段落</p>

4.HTML链接

 <a>标签定义链接</a>

 <a href="2.index.html">打开本地</a>


 <a href="http://www.baidu1.com"  style="color:purple;">点我转到百度</a>

5.HTML图像

 <img>标签定义图像

三、HTML元素

1.元素指的是从开始标签到结束标签的所有代码

  开始标签          元素内容              结束标签
  <p>             this is my web page    </p>
  <br/>

2.HTML元素语法：
（1）元素的内容是开始标签与结束标签之间的内容
（2）空元素在开始标签中进行关闭
（3）大多数HTML元素可拥有属性
3.嵌套得HTML元素

四、HTML属性

1.标签可以拥有属性为元素提供更多的信息
2.属性以键值对的形式出现

 如：href="www.baidu.com"

3.常用标签属性：

<h1>:align 对齐方式

<body>:bgcolor 背景颜色

<a>:target 规定元素的类名

4.通用属性：
class:元素的类名
id:元素的唯一ID
style:元素的样式
title:元素的额外信息

五、HTML格式化

标签                                    描述
<b>                                   粗体文本
<big>                                 大号字
<i>                                   斜体字
<small>                               小号字
<sub>                                 下标字
<sup>                                 上标字
<ins>                                 插入字
<del>                                 删除字

   <b>欢迎来到杭州</b>
   <br/>
   <big>观影</big>
   <br/>
   <em>着重字体</em>
   <br/>
   <i>插入字体</i>
   <br/>
   <small>小号字</small>
   <br/>
   <strong>加重语气</strong>
   <br/>
   大家好<sub>下标字</sub>
   <br/>
   大家好<sup>上标字</sup>
   <br/>
   <ins>插入字体</ins>
   <br/>
   <del>删除字</del>
   <br/>

六、HTML样式、链接和表格

1.HTML样式
（1）外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h1>标题1</h1>

（2）内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式</title>
    <style type="text/css">
      p{
          color:palegreen;
      }
    </style>
</head>
<body>
    <h1>标题1</h1>
    <p>欢迎来到百度：www.baidu.com</p>
</body>
</html>
</body>
</html>

（3）内联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内联样式表</title>
</head>
<body>
    <h1>标题1</h1>
    <p>欢迎来到上海</p>
    <a href="http://www.baidu.com"  style="color:purple;">点我转到百度</a>
</body>
</html>

2.HTML链接
（1）文本链接
（2）图片链接

<a href="http://www.baidu.com">点击我</a>
<a href="http://www.baidu.com">
  <img src="TIM图片20190620181451.png"  width="100px" height="100px" alt="html5logo">
</a>
<br/>
<a name="tips">hello</a>
<br/>
<a href="#tips">跳转到hello</a>

3.属性：
（1）href属性：指向另一个文档的链接
（2） name属性：创建文档内的链接
4.img标签属性：
（1）alt:替换文本属性
（2）width 宽
（3）height 高

<img src="TIM图片20190620181451.png"  width="100px" height="100px" alt="html5logo">

5.HTML表格

   表格                                    描述
     <table>                              表格
     <caption>                            表格标题
     <th>                                 表格的表头
     <tr>                                 表格的行
     <td>                                 表格的单元
     <thead>                              表格的页眉
     <tbody>                              表格的主体
     <tfoot>                              表格的页脚
     <col>                                表格的列表属性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <p>表格</p>
    <table border="3">
        <caption>重要表格</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr border="1" celspcing="10">
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>