HTML5基础

HTML语言是网站开发的基础语言之一 , 也是我们网站搭建的基础要素, 今天我们要详细的学习再在鸿蒙生态系统中 , 搭建网站的基础HTML语言

今日学习目标

1. 基础概念(什么是HTML, 什么是HTML5, 什么是H5)

2. HTML的基本语法

3. HTML5里面的新增内容

1. 基础概念

1) HTML

HTML是Hyper Text Markup Language的简写, 简称超文本标记语言 , 标记也称之为记号 , 也称之为元素 , 也有人称之为标签 ;代表的都是同一个内容

2) HTML5

HTML5是超过文本标记语言的升级, 目前我们所有的标签语法都遵循的是HTML5的相关语法

3) H5

H5是一个技术总称呼 , 里面包含了HTML, CSS , 以及一些高级的函数, 和一些js的相关知识点 ; 但是有些人会吧HTML5认为是H5 , 但是本质上是不一样的; HTML5是开发标准, H5是技术总成;

4) 网站和网页

鸿蒙生态网站和APP的开发都离不开我们H5的相关技术发展, 现在HTML5的相关技术越来越成熟, 搭建完成和APP也是到了炉火纯青的地步, 网页是一个网站的基础, 多个网页组成了一个app或者是网站, 通过不同的链接形式实现不同页面之间的相互跳转

3) HTML5的兼容

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

4) 快速站点结构

站点 : 站点 , 可以理解成文件夹 , 即为文件存储的位置, 网站的整体内容均存放于当前站电子红

• 站点创建 :

  • 一个大的文件及里面包含四个小的文件夹和一个index.html页面文件

  • 四个小的文件夹分别是

    • img文件夹 : 用来存储图片文件

    • html文件夹 : 用来存储页面文件

    • css文件夹 : 用来存储样式修饰文件

    • js文件夹 : 用来存储交互文件

  • 页面文件

    • index.html ; 其实就是一个txt文本文档更改后缀名所得到的文件

    • 作用是 : 入口文件

• 如何修改后缀名显示后缀名 ( 在任何一个文件夹上面---点击查看---文件扩展名勾选即可 )

• 站点命名规范

  • 做到见名知意

  • 尽量不使用中文 ( 因为中文编译会出现乱码 )

5) 快速创建页面标签结构

方法1 : shift+!

方法2 : html:5

2. HTML基本语法

1) 单标签

单标签也称之为单标记, 单元素, 空标签, 只有开始没有结束

基本语法 : <标签名字 属性="属性值" 属性="属性值">

2) 双标签

双标签也诚挚为双标记, 有开始, 有结束

基本语法 : <标签名字 属性="属性值" 属性="属性值"></标签名字>

3) 什么是属性和属性值

属性 : 对于一个事物的描述 , 比如 : 身高 , 体重 , 发量 , 性别

属性值 : 对于这个事物描述的取值 , 身高:150cm 体重:80kg; 发量 : 多; 性别: 男 ; 其中 150cm, 80kg, 多, 男均为属性值;

4) HTML语法和HTML5的语法区别?

HTML5仍然沿用了HTML的标签语法, 区别并不是特别大; 其中HTML5仍然遵循下面的特点

• 内容类型（ContentType）

  • HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"

• DOCTYPE声明

  • ​

    不区分大小写

    ​

• 指定字符集编码

• <meta charset="UTF-8">

• 增强内容 : 语义化标签, 增强表单 , 音频和视频

5) 快速创建标签结构

标签名字+tab

标签名字+回车

3. 常见单标签

1) 文本折行

基本语法 :

作用 : 控制文本强制换行, 是break单词的简写

欢迎来到千锋教育<br>鸿蒙生态开发

2) 图片标签

基本语法 :

作用 : 让图片显示在浏览器中,

<!--
    图片标签属性 : 
        1) src="路径属性"
        2) alt="图片描述属性"
        3) title="图片描述属性"
        4) width="宽度属性"
        5) height="高度属性"
    注意事项 : 
        1) 路径分为 : 相对路径和绝对路径
            相对路径 : 通过文件和文件夹之间的关系查找对应的文件, 来进行引入
                例如 : pic/pic.png   ../img/pic/pic.png  ../../img/pic/pic.png
            绝对路径 : 一个完整的地址 
                例如 : http://www.baidu.com/pic.png  c://img/picture/pic.png
        2) 图片alt和title属性之间的区别
            相同点:均属于文本提示的一种, 都能起到提示作用
            不同点:alt提示文本只有图片为破损文件的时候才会提示, 不破损不提示, 提示文本占页面空间
                  title提示文本无论是否为破损文件, 都会提示,只要鼠标放在上面就会有提示文本
            实际开发的时候为了提高搜索引擎优化和方便爬虫爬取, 我们吧对应的alt和title属性添加上去
        3) width, height属性
            当宽度属性和高度属性只添加一个的时候,图片会等比例缩放, 但是我们不推荐使用代码控制图片,容易变形
-->
<img src="pic1.png">

3) input标签

基本语法 : <input type="?">

作用 : 属于表单控件中的其中一种类型 : 通过 input 标签中的 type 属性的不同取值 , 来决定表单控件显示在内容

<!--
    type的取值有哪些?
    HTML4里面的type取值
        1) 单行文本输入框 
            含义:只允许单行文本输入
            type="text"
        2) 单行密码框
            含义:单行文本输入,并且加密显示
            type="password"
        3) 按钮类型
            各种能点击的按钮区域
            a) 提交按钮 type="submit"
                配合form能实现跳转功能
            b) 重置按钮 type="reset"
                配合form能实现清空之前的数据作用
            c) 普通按钮 type="button"
                没有任何功能
            d) 图像按钮 type="image"
                图像提交按钮
        4) 文件上传
            type="file"
        5) 隐藏域
            type="hidden"
        6) 单选按钮
            type="radio"
            弊端 : 默认是共选的, 需要通过给单选框添加name属性将对应单选框进行分组, 分组结束后解决共选
        7) 复选框
            type="checkbox"
    HTML5里面的type的取值
        8) 颜色拾取器
            type="color"
        9) 搜索框 
            type="search"
        10) 数值
            type="number"
            属性 : min="最小值" max="最大值" value="当前值" step="步长值"
        11) 滑块
            type="range"
            属性 : min="最小值" max="最大值" value="当前值" step="步长值"
        12) 日期
            type="date"
        13) 月份
            type="month"
        14) 周期
            type="week"
        15) 时间
            type="time"
        16) 本地时间
            type="datetime-local"
​
        注意事项 :
            1) input标签的value属性和placeholder属性
            2) name属性
​
-->
<form>
    用户名 : <input type="text"> <br>
    密码框 : <input type="password"> <br>
    <input type="submit"> <input type="reset"> <input type="button"> <input type="image" src="图片按钮的路径"> <br>
    文件上传 : <input type="file"> <br>
    隐藏文本 : <input type="hidden" value="需要隐藏的文本"> <br>
    单选框 : <input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>
    复选框 : <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">橄榄球 <br>
    颜色拾取器 : <input type="color"><br>
    搜索框 : <input type="search"><br>
    数值 : <input type="number" min="0" max="100" step="5"><br>
    滑块 : <input type="range"> <br>
    日期 : <input type="date"> <br>
    月份 : <input type="month"> <br>
    周期 : <input type="week"> <br>
    时间 : <input type="time"> <br>
    本地时间 : <input type="datetime-local"> <br>
    模拟本地下来菜单:
    <input type="url"     list="url_list"    name="link" />
    <datalist    id="url_list"> 
        <option label="W3School" value="http://www.W3School.com.cn" /> 
        <option label="Google" value="http://www.google.com" /> 
        <option label="Microsoft" value="http://www.microsoft.com" /> 
    </datalist> <br>
    <input type="submit"><input type="reset"><input type="button" value="普通按钮"><input type="image" src="图片路径">    <br>
    
    
</form>

4. 常见双标签

1) 段落标签

基本语法 : <p>里面放置文本/文本修饰标签,不能嵌套自己和其他的区块标签</p>

作用 : 文本段落划分 ; 小说章节段落划分; 主要用于区块划分;

注意 : 里面只能放置对应的文本, 或者是图片

<p>这里是放置多个文本的地方</p>
<p>这里是放置多个文本的地方</p>
<p>这里是放置多个文本的地方</p>

2) 列表标签

列表分类 : 有序列表无序列表和自定义列表

• 有序列表

  • 含义 : 有顺序的列表清单

  • 基本语法 :

    <ol>
        <li>冰箱门打开</li>
        <li>大象放进去</li>
        <li>冰箱门带上</li>
    </ol>

  • 注意事项

    • ol和li均为双标签,

    • ol里面只能放置对应的li标签; 如果想要放置别的标签内容只能是在li里面进行嵌套

    • ol代表的是 order list ; li代表的是list

• 无序列表

  • 含义 : 没有顺序的列表清单

  • 基本语法 :

    <ul>
        <li>游玩长城</li>
        <li>游玩故宫</li>
        <li>游玩南锣鼓巷</li>
    </ul>

  • 注意事项 :

    • ul和li均为双标签

    • ul里面只能放置对应的li标签; 如果想要放置其他的标签内容只能在li里面进行

    • ul代表的是unorder list ; li代表的是list

• 自定义列表

  • 含义 : 自定定义的列表清单, 主要应用于图文混排和问答列表

  • 基本语法 :

    <dl>
        <dt>问题/图片</dt>
        <dd>回答/图片介绍</dd>
    </dl>

  • 注意事项

    • 一个dl里面可以只放置一组dt和一组dd, 也可以放置多个dt和dd

    • 一个dl里面也可以放置多个dt和多个dd;

3) div标签

基本语法 : <div>文本 / 图片 / 其他标签</div>

作用 : 主要用于区块划分 ; 应用于布局中, 默认是纵向排列的, 如果想要横向显示, 需要使用浮动 / 弹性盒子来完成, 后面我们会为大家讲解

案例:

<div>里面是对应的文本</div>
<div>里面是对应的文本</div>
<div>里面是对应的文本</div>

4) 标题标签

基本语法 : <hn>文本</hn> n在这里代表的是number 数值, 在这里n的取值为1-6 都是双标签

作用 : 文章标题的标签, 副标题和小标题等等;

案例 :

<!--
    标题标签使用的时候:
        h1 应用于 文章的一级标题,
        h2 应用于 文章的副标题
        
-->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

5) 语义化标签

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

• header元素 表示页面中一个内容区块或整个页面的标题

• footer元素 表示页面中一个内容区块或整个页面的脚注

• section元素 表示页面中的一个区块

• main元素 表示页面中的主要的内容(ie不兼容)

• article元素 表示一块与上下文无关的独立的内容

• aside元素 在article之外的，与article内容相关的辅助信息

• nav元素 表示页面中导航链接部分

• figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

• mark元素 行内元素, 是一个标记标签,

• address元素 块级元素 , 具有倾斜效果的地址栏元素,

以上元素都是双标签

6) 多媒体标签

<!--视频标签-->
<video src=""></video> 
<!--音频标签-->
<audio src=""></audio>

• 属性

  • controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。

  • autoplay属性：如果出现该属性，则视频在就绪后马上播放。

  • loop属性：重复播放属性。

  • muted属性：静音属性。

  • poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

  • 注意事项:

    • 用于视频：video/ogg video/mp4 video/webm

    • 用于音频：audio/ogg audio/mpeg

5. 常见的案例