html5基础介绍及使用

最新推荐文章于 2022-04-30 14:37:50 发布
最新推荐文章于 2022-04-30 14:37:50 发布
阅读量302 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48511129/article/details/113513324
版权

html5格式介绍

<!DOCTYPE html>    //文档说明
<html lang="en">   //文档的开始
<head>            //存放文档的基本信息，不可见元素
   <meta charset="UTF-8"> //声明字符编码
   <title>Title</title>   //声明文档标题
</head>
<body>    //存放文档可见内容

</body>
</html>   //文档的结束

html5的注释符号为:
html5的三个常用标签

<h1></h1>   //h标签用来表示标题<h1></h1>到<h6></h6>标题依次变小
<p></p>     //p标签表示一个段落
<hr>   //给文档加水平线，注意没有结束标签
例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
 <h1>静夜思</h1>
<h3>作者:李白</h3><hr>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡</p>
</body>
</html>

html5的两个元素属性
align属性:内容的对齐方式，left/right/center
bgcolor属性：添加一个背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body bgcolor="#00bfff">
 <h1 align="center">静夜思</h1>
<h3 align="center">作者:李白</h3><hr>
<p align="center">床前明月光，疑是地上霜。</p>
<p align="center">举头望明月，低头思故乡。</p>
</body>
</html>

常用文本元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<b>加粗文字</b>  <br>
<i>文字倾斜</i>  <br>
<del>在文字中间画横线</del>   <br>
<strong>加粗文字</strong>   <br>
<u>给文字加下划线</u>  <br>
<q>给文字加双引号</q>   <br>
<mark>给文字加一个黄色背景</mark> <br>
<time>表示时间2015-9-18</time>
</body>
</html>

html5超链接
目录语法
文件在同一个目录：直接写文件名称
文件在下级目录：XX/123.jpg
文件在下下级目录:XX/XX/123.jpg
文件在上级目录：…/123.jpg
文件在上上级目录:…/…/123.jpg
target属性使用
-self:当前位置
-blank:新窗口
id属性：可以理解为元素的身份证
name属性：可以理解为元素的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body bgcolor="#7fffd4">
<a href="http://www.baidu.com" target="_blank">跳转到百度页面</a>  <br>
<a href="2.html">跳转到2.html文件</a>    <br>
<a href="http://www.baidu.com"><img src="../cjm.jpg"></a>  <br>
<a href="mailto:2748268310@qq.com">邮箱</a>  <br>
<a href="../0016_1.zip">下载文件</a>
</body>
</html>

锚点使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<a href="#1">锚点1</a>
<a href="#2">锚点2</a>
<a href="#3">锚点3</a>
<br><br><br><br>
        <a id="1">锚点1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <a id="2">锚点2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <a id="3">锚点3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

img的属性
src:制定图片来源的路径
alt属性:当图片无法显示时的替代文字
width和height属性：指定图片的宽度和高度，单位是像素或百分比
title属性:效果是当鼠标移动到该位置时显示该内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<img src="../cjm.jpg" alt="图片" width="25%" height="500px title="提示鼠标位置" >
</body>
</html>

列表
无序列表的type属性
1.disc(默认值)：实心小圆
2.circle：空心小圆
3.square:实心小方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<ul type="circle">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ul>
<ul type="square">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ul>
</body>
</html>

有序列表
type属性
1-n：默认
A-Z,a-z:type="A"或type=“a”
I-n:type=“I”
start属性：定义列表的开始序号，比如从10开始按顺序排
value属性:定义某个单个列表项的序号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<ol start="10">
    <li>列表1</li>
    <li value="8">列表1</li>
    <li value="12">列表1</li>
</ol>
<ol type="A">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ol>
<ol type="I">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
</ol>
</body>
</html>

自定义列表
dl定义列表
dt定义列表的项目
dd定义列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
<dl>
    <dt>列表项目1</dt>
    <dd>
        列表项目1***********************************************
        ******************************************************
    </dd>
    <dt>列表项目2</dt>
    <dd>
        列表项目1***********************************************
        ******************************************************
    </dd>
    <dt>列表项目3</dt>
    <dd>
        列表项目1***********************************************
        ******************************************************
    </dd>
</dl>
</body>
</html>

表格属性
table:表格的范围，外框。
tr：表格的行
td：表格的单元格
th：为表格添加标题行
colspan:横向合并单元格
rowspan：纵向合并单元格
caption:给表格添加标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
 <table border="1">       <!-- 设置边框-->
            <caption>表格</caption>
            <tr><th>标题</th><th>标题</th><th>标题</th></tr>
            <tr><td colspan="2">单元格</td><td>单元格</td>
            <tr><td>单元格</td><td>单元格</td><td rowspan="2">单元格</td></tr>
            <tr><td>单元格</td><td>单元格</td></tr>
  </table>
</body>
</html>

html5特殊符号的使用
&nbsp（空格）
&lt(小于)
&gt(大于)
&amp(连接符号)
&quot(双引号)
&plusmn(正负值)
&copy(著作权)
div元素的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
   <div style="width:100%;height:708px;">
       <div style="background:green;width:100%;height:10%">标题/头部</div>
       <div style="background:red;height:80%;width:20%;float:left;">导航栏</div>
       <div style="background:blue;width:80%;height:80%;float:left;">框架</div>
       <div style="background:red;height:10%;width:100%;clear:left">尾部</div>
   </div>

</body>
</html>

header元素：用于设置一个页面的标题部分，通常会包含标题，logo,导航等通常会放在文章的头部
footer元素：通常用于设置一个网页的底部区域，会包含友情连接，版权声明，文件建立日期，通常会1放在页面的页脚
article元素：
用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子等。article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容
section标签：用来定义文章的章节（通常应该有标题和段落）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
      <article>
          <header>
              <h3>文章标题</h3>
              <h5>作者：</h5>
          </header>
          <p>正文******************************************</p>
          <footer>文章尾部</footer>
      </article>
      <section>
          <h1>第一章</h1>
          <p>第一章的内容</p>
      </section>
</body>
</html>

aside元素：通常用来设置侧边栏
nav元素：通常用它给超链接分组来定义导航栏，还可以用来给一个文章做一个目录的超链接
time标签：设置时间

<time datetime="2021-1-30">文章发表时间2021年1月30日</time>

hgroup元素：通常用来给标题分组
address元素：通常用来说明作者联系信息
figure元素：媒体组合元素，对其他媒体元素进行组合
figcaption元素：用来给figure定义标题

g1ory.
关注
HTML5简介
weixin_46376309的博客
03-23 1725
八、HTML5简介 1.发展 W3C于1992年12月发布了HTML4.0.1标准 W3C于2014年10月发布了HTML5标准 2.特点 ·取消了过时的标签，如font、center等，它们仅具有展示外观的功能 ·增加了一些更具有语义化的标签，如header、footer、aside等 ·增加了一些新功能标签，如canvas、audio、vide ·增加了一些表单控件，如emall、data、t...
HTML5介绍
m0_62038362的博客
11-14 1724
什么是HTML5 HTML5是对HTML标准的第五次修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML发展历程 HTML1.0 实际上应该没有HTML1，所谓的HTML1是1993年IETF(
HTML5学习笔记简明版（1）：HTML5介绍与语法
weixin_33895657的博客
12-06 120
HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如&lt;nav&gt;网站导航块和&lt;footer&gt;）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的&lt;video&gt;和&lt;audio&gt;，总结而言，有如下几大特点： 取消了一些HTM...
html5基础与简介
java的涟漪
12-15 93
一 什么是HTML51 HTML历史 2 什么是HTML5 官方概念：HTML5草案的前身名为WebApplications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，...
使用 HTML5 开发 WebApp 性能注意点
qjbagu的专栏
03-11 750
PhoneGap HTML5 应用简介 PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。Phon
HTML5详细介绍及使用（续篇）
小仙儿
12-16 1154
跨域 一、跨域的背景及定义 什么是跨域 由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它是一个用于隔离潜在恶意文件的重要安全机制。同源即协议、域名、端口三者一致。不同源即跨域。 同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 同源策略是一种约定，它是浏览器最核心也最基本的安...
HTML5系列 01 基础介绍
weixin_43422005的博客
07-13 109
基础介绍 HTML全称为htyper text markup language，即超文本标记语言。 超文本：即超出了纯文字文本的范畴，它可以包含图片、链接、音乐等非文字元素 标记语言：由标签构成的语言，特点是学习简单上手容易 它最早诞生于1990年，由物理学家蒂姆·伯纳斯-李所创建，在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念，并且在1990年规定出了HTML并在同年写出了浏览器与软件： 版本 年份 HTML 1991 HTML+ 19
Html5基础及部分常用标签介绍
"✧treasure mountain✧"
03-02 9235
一、概念 1、标签 1. 标签由英文状态下的尖括号<和>括起来 如：<html>就是一个标签 2. html中的标签一般都是成对出现的 分为开始标签和结束标签 结束标签比开始标签多了一个/ 如： （1） <p></p> （2） <div></div> （3） <span></span> 3. 标签与标...
html5与css3基础教程第7版配书源码
05-28
在《HTML5与CSS3基础教程（第7版）》这本权威指南中，作者深入浅出地介绍了这两个技术的核心概念和实际应用。源代码包含在提供的压缩包中，这些文件反映了书中各个章节的实例，方便读者实践和学习。 HTML5是超文本...
HTML5+CSS3-人物介绍卡片
SUOLONG1的博客
04-30 3677
人物介绍卡片-预览 效果如下 人物卡片制作 学习资源 模仿海贼王人物卡片制作 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>人物介绍卡片</title> <link rel="style
EmpWqExam:这是用于websquare 5练习+ websquare.xml示例的简单员工管理服务器
05-08
WebSquare EmpManager 开发环境 WebSquare 5 Spring启动RestFulAPI MyBatis MySQL 运行项目时会自动创建数据库，架构和数据，因此您只需要设置MySQL端口和帐户即可。 WebSquare页面文件位于src / main / resources / EmpManager中
html5游戏怎么修改数值,如何使用HTML5自定义数据属性
weixin_39571938的博客
05-31 4025
在本文中，我将向你介绍如何使用HTML5自定义数据属性。我还将向你介绍一些开发人员在工作中经常使用的优秀实例。为什么需要自定义数据属性？很多时候我们需要存储一些与不同DOM元素相关联的信息。这些信息对于读者来说可能是不需要的，但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利。例如，假设你有一份某个餐饮类网站上所有餐馆的名单。在HTML5之前，如果你想存储餐馆提供的食物种类或餐馆与用户...
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript
热门推荐
qq_365392777
09-29 3万+
HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水
HTML5：简介与常用标签
李鴻耀
01-08 1829
HTML 文档结构HTML（Hyper Text Markup Language 超文本标记语言）基本文档结构是指组成一个基本的HTML页面所必须的元素标签。它的根节点是由一个文档声明 “<!doctype html>” 和一个“<html>”标签组成的，而<html>标签下级（又称“子节点”）又包含“<head>”和“<body>”两个主要的标签，具体编写格式如下：<!DOCTYPE html>
html5常见用法,HTML5 笔记之 HTML5 的常见用法介绍
weixin_30239869的博客
06-25 289
阅读目录一、网页标题、文章标题、文章段落代码：这是网页标题这是文章标题这是文章的标题这是一个段落运行结果为：这是文章标题这是文章的标题这是一个段落注意：这里看不到网页标题，网页标题会显示在浏览器的网页标签上文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种二、字体大小、字体颜色、字体类型、字体位置、背景颜色代码：这是网页标题改变字体的大小改变字体的颜色改变字体的类型改变字体的位置...
HTML5介绍第一篇（初学者非常实用！）废寝忘食只为博君一赞！
JZawei的博客
06-25 247
1、网页组成部分： （例：https://www.baidu.com/） ①url——统一资源定位器——在web上进入资源的统一方法和路径 ②http——超文本传输协议 ③html——超文本语言——hypertext markup language “baidu”/“淘宝”——表示“我”是谁 .com/net——域名——花钱证明自己是什么机构/公司/团体 2、html5 ①为什么叫html5？——发展到的第五个版本——普通被接受 ②作用：是一种被浏览器直接识别解释的语言。具体一点：搭建网站内容主题——..
HTML5 基础知识
苦涩
11-10 225
文章目录什么是HTML？HTML5 的新特性 什么是HTML？ HTML 是用来描述网页的一种语言 HTML 指超文本标记语言（Hyper Text Markup Language） HTML 不是编程语言，是一种标记语言 HTML5 的新特性 用于绘画的canvas标签 用于媒介回放的video和audio元素 对本地离线存储的更好支持 新的特殊内容元素 如：calendar、date、time...
HTML5详解
GBEzmz1993的博客
02-27 179
HTML概述： 　　HTML Hyper Text Markup Language（超文本标记语言） 是一种专门用于创建Web超文本文档的标记语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。 HTML5的优势： 　　H5的最显著的优势在于跨平台性，用H5搭...
HTML5基础以及基本用法
geek_like的博客
09-28 1044
HTML5基础以及基本用法 HTML简介 HTML是用来描述网页的一种语言，是一种超文本标记语言。 HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。 现在介绍的是最新版HTML5，HTML5作为最新版本，提供了一些新的元素和一些有趣的新特征，同时也建立了一些新的规则。这些元素，特征和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需...
HTML5入门基础与实战探索
"《HTML5基础入门.pdf》是一本针对HTML5初学者的入门书籍，主要涵盖HTML5的基础知识，适合新手学习。书中提到HTML5的发展历程，从1991年的HTML开始，历经多个阶段，最终在2009年形成HTML5草案。HTML5不仅仅是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

g1ory.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值