前端学习(一）一HTML5

最新推荐文章于 2023-03-30 21:09:09 发布

mango660

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量186

点赞数

分类专栏： Web前端文章标签： html5

本文链接：https://blog.csdn.net/mango660/article/details/105313792

版权

Web前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

为什么学习HIML5?
软硬件环境
介绍HTML5
HIML基础详解
HTML表格
HTML列表
HTML块
HTML表单
HIML框架
HTML背景
HTML实体
- - 实体：
XHTML介绍
HTML5推出理由
语法的改变
HTML5新增的元素和废除的元素
新增的属性和废除的属性
新增的主体结构元素
新增的非主体结构元素
- header元素
- footer元素
- hgroup元素
- address元素
表单新增元素与属性

VUE :模板搭建，简单，能用就行
REACT：大型应用程序，同时适用于WEB端和原生APP的框架，最大生态圈
FIS：前端工具框架
百度：fis，多页面转化
淘宝：
前端图片加载
水池效果：H5

为什么学习HIML5?

跨平台运行
硬件要求低
flash之外的选择

软硬件环境

硬件（双核、2G内存）
软件（windows、Mac OS X、Linux)

介绍HTML5

描述网页的一种语言
超文本标记语言（HYPER TEXT MARKUP LANGUAGE）
用于绘画的CANVAS标签
用于媒介回放的VIDEO和AUDIO元素
对本地离线储存的更好支持
新的特殊内存元素（ARTUCLE、FOOTER\HEADER\NAV\SECTION）
新的表单控件（CALENDAR\DATE\TIME\EMAIL\URL\SEARCH）
浏览器的支持（CHROME\FIREOX等)

HIML基础详解

声明 <!DOCTYPE>

HTML5:
HTML4.01:
XHTML

HTML 基础标签

head：文字显示形式（中zh/英en）、编码格式、标题

 <meta charset="UTF-8">    // 编码格式

body：页面内容

HTML标题

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

HTML段落

<p>     //标签定义段落

HTML链接

<a> 标签定义链接

HTML图像

<img>标签定义图形

HTML元素

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

<br/>  空标签，换行

元素语法

元素的内容是开始标签与结束标签之间的内容
空元素在开始标签中进行关闭
大多数HTML元素可拥有属性

嵌套的HTML元素

HTML属性

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

<h1> :align 对齐方式
<body> : bgcolor背景颜色 // background 背景图片
<a> ： target规定在何处打开链接

通用属性

class	规定元素的类名
id	规定元素唯一ID
style	规定元素的样式
title	规定元素的额外信息

HTML格式化

<b> : 定义粗体文字
<big> : 定义大号字
<em>: 定义着重文字
<i> :定义斜体字
<small> : 定义小号字
<strong> : 定义加重语气
<sub> : 定一下标字
<sup> : 定义上标字
<ins 定义插入字
<del> 定义删除字

HTML样式

标签

<style>: 样式定义
<link>: 资源引用

属性

rel=“stylesheet” : 外部样式表
type=“text/css”：引入文档的类型
margin-left : 边距

三种样式插入方法
- 1：外部样式表

<link rel="stylesheet" type="text/css"href="mystyle.css">

2：内部样式表

<style type="text/css">
body {background-color: res}
p {margin-left: 20px}
</style>

3: 内联样式表

<p style="color:red>

HTML链接

链接数据：

文本链接
图片链接

属性

href 属性：指向另一个文档的链接
name 属性：创建文档内的链接

img标签的属性

alt: 替换文本属性
width ：宽
height : 高

HTML表格

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

没有边框的表格
表格中的表头
空单元格
带有标题的单元格
表格内的标签

            <td>
                <ul>
                    <li>苹果</li>
                    <li>菠萝</li>
                    <li>香蕉</li>
                </ul>
            </td>

单元格边距
单元格间距
表格内的背景颜色和图像
单元格内容排列
跨行和跨列单元格

HTML列表

<ol> : 有序列表
<ul> : 无序列表
<li> : 列表项
<dl> : 列表
<dt> : 列表项
<dd> : 描述

无序列表

使用标签： <ul> <li>
属性：disc、circle、square

有序列表

使用标签： <ol> <li>
属性：A、a、I、i、start

嵌套列表

使用标签:<ul> <ol> <li>

自定义列表

使用标签：<dl> <dt> <dd>

HTML块

HTML块元素
- 块元素在显示时，通常会以新行开始
- 如 < h1 > < p > < ul >
HTML内联元素
- 内联元素通常不会以新行开始
- 如 < b > < a > < img>
HTML< div > 元素
- < div> 元素也被称为块元素,其主要是组合HTML元素的容器
HTML< span > 元素
- < span> 元素是内联元素，可作为文本的容器

# HIML布局

使用< div> 元素布局
使用< table > 元素布局

HTML表单

表单用于获取不同类型的用户输入
常用表单标签

< form>	表单
< input>	输入域
< textarea>	文本域
< label>	控制标签
< fieldsel>	定义域
< legend>	域的标题
< select>	选择列表
< optgroup>	选型组
< option>	下拉列表中的选项
< button>	按钮

复选框
单选按钮
下拉列表
文本域
创建按钮

HIML框架

框架标签（frame)

框架集标签（< frameset>) (过时）

定义如何将窗口分割为框架
每一个frameset定义一系列行或列
rows / cols 的值规定了每行或每列占据屏幕的面积

常用标签

noresize : 固定框架大小
cols : 列
rows：行

内联框架

iframe

HTML背景

HTML背景标签

Background

HTML背景颜色

Bgcolor

颜色

颜色是由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
颜色最小值：0（#00）
颜色最大值：255（#FF）
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF

HTML实体

实体：

HTML中预留字符串必须被替换成字符实体
如：< 、> 、 &
html实体

XHTML介绍

什么是XHTML？

可扩展超文本标记语言
与HTML4.01几乎是相同的
更严格更纯净的HTML版本
是以XML应用的方式定义的HTML

为什么使用XHTML？

为了文档的完整性和良好性

文档声明

DTD：规定了使用通用标记语言的网页语法

三种XHTML文档类型

STRICT (严格类型）
TRANSITIONAL(过渡类型）
FRAMESET(框架类型）

XHTML元素

XHTML元素语法：

XHTML元素必须正确嵌套
XHTML元素必须始终关闭
XHTML元素必须小写
XHTML文档必须有一个根元素

XHIML属性

XHTML属性语法规则：

XHTML属性必须使用小写
XHTML属性值必须用引号包围
XHTML属性最小化也是禁止的

HTML5推出理由

web浏览器之间的兼容性很低
文档结构之间的兼容性很低
web应用程序的功能收到了限制
对HTML5的支持：微软、GOOGLE、苹果、OPERA、MOZILLA

语法的改变

内容类型
DOCTYPE声明
指定字符编码
可以省略标记的元素
具有boolean值的属性
省略引号

HTML5新增的元素和废除的元素

新增的结构元素

section、article、aside、header、hgroup、footer、nav、figure

新增的其他元素

video(视频）、audio（音频）、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas（画布）、command、details、datagrid、keygen、output、source、meau

新增的input元素类型

email、url、number、range（输入框的范围值）、Date Pickers

新增的属性和废除的属性

新增的属性

表单相关的属性
链接相关的属性
其他属性

废除的属性

全局属性

contentEditable属性
（true可编辑、false不可编辑）
designMode属性
（整个页面，js交互）
hidden属性
spellcheck属性
(检查拼写是否正确）
tabindex属性

新增的主体结构元素

article元素（独立性）
- article 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
- 它可以是一篇博客或者报刊中的文章，一片论坛帖子、一端用户评论或独立的插件，或其他任何独立的内容
- article 元素可以嵌套使用
- article元素可以用来表示插件
section元素（分段、分块）
- section用于对网站或应用程序中页面上的内容进行分块
- 一个section元素通常由内容及其标题组成
- section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非srction
nav元素
- 可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分
- 并不是所有的连接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素
- nav元素应用场景
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作
aside元素
- aside元素用来表示当前页面或文章的附属信息部份
- 包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分
time元素与微格式
pubdate元素