HTML5第一部分

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5第一部分，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5067字，纯文字阅读大概需要8分钟。

内容图文

初识HTML

Hyper Text Markup Language(超文本标记语言)
超文本包括：文字、图片、音频、视频、动画等

HTML基本结构

< body>、< /body>等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签(空元素)，如< hr/>;意为用/来关闭空元素，自闭合标签

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->

<!DOCTYPE html>
<html lang="en">
<!-- head 标签代表网页头部-->
<head>
<!--    meta描述性标签，它用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name = "keywords" content = "Silence的HTML学习之旅">
    <meta name = "description" content = "来这里可以学html">
    <!--Title标签代表网页标题-->
    <title>silence的第一个网页</title>

</head>
<!--body标签代表网页主体-->
<body>
hello world！
</body>
</html>

网页基本标签

标题标签 h1-6
段落标签 p
换行标签 br
水平线标签 hr
字体样式 strong粗体，em斜体
标签注释和特殊符号
&copy版权符号，&gt大于号，&lt小于号

图像标签

常见的图像格式

JPG
GIF
PNG
BMP

HTML5第一部分 - 文章图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--img学习
src：图片地址，分为相对路径和绝对路径
alt:图片名字
title：悬停文字

-->
<img src="../resources/image/1.PNG" alt="实力至上"title = "悬停文字"width = "160" height = "90">


<!--跳转到4.链接标签页面的down位置-->
<a href="4.链接标签.html#down">跳转</a>

</body>
</html>

链接标签

a标签

herf：必填，表示要跳转到那个页面
target:表示窗口在哪里打开
_bank 在新标签中打开
_self 在自己的网页中打开

<a href="MyFirst.html" target = "_self">点击我跳转到页面</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>

图片链接

图片链接就是把文字换成了图片，之前是点击文字跳转，现在是点击图片跳转
alt属性是< img>元素的必选属性，它给出了图像的备选文本，供图像无法显示时采用。
title属性是悬停文字，当你鼠标停留在图片处数秒，该文字会浮现出来
width和height是图片宽度和高度

<a href="MyFirst.html" target = "_blank">
    <img src="../resources/image/1.PNG" alt="实力至上"title = "悬停文字"width = "160"height = "90">
</a>

锚链接

锚链接
1.需要一个锚标记
2.跳转到标记

<!--使用name作为标记-->
<a name="top">顶部</a>

<a href="#top">回到顶部</a>

功能性链接

功能性链接
邮件链接：mailto
qq链接

<a href="mailto:2607840393@qq.com">点击联系我</a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度﹐左右都是行内元素的可以在排在一行
( a 、strong 、 em …)

列表

什么是列表
◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
◆无序列表◆有序列表◆定义列表

有序列表

标签名：ol

<!--有序列表
应用范围：试卷、问答-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>基架</li>
    <li>后端</li>
    <li>前端</li>
    <li>go</li>
</ol>

HTML5第一部分 - 文章图片

无序列表

标签名：ul

<!--无序列表
应用范围：导航，侧边栏-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>基架</li>
    <li>后端</li>
    <li>前端</li>
    <li>go</li>
</ul>

HTML5第一部分 - 文章图片

自定义列表

dl：标签
dt：列表名称
dd：列表内容

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容

-->

<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>

    <dt>学校</dt>
    <dd>华科</dd>
    <dd>武大</dd>
    <dd>复旦</dd>
</dl>

HTML5第一部分 - 文章图片

表格

为什么使用表格?

简单通用结构稳定

基本结构

标签名：table
单元格行列跨行跨列
行：tr
列：td
跨行：colspan
跨列：rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行：tr
列：td
跨行：colspan
跨列：rowspan
-->
<table border="1px">

    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>

    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

</table>

</body>
</html>

预览：
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20210313112830864.png

媒体元素

视频和音频

标签名：video和audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
autoplay：控制条
controls：控制自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>

<!--音频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<audio src="../resources/audio/1.mp3"controls autoplay ></audio>
</body>
</html>

页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏)
nav	导航类辅助内容

<header><h2>网页头部</h2></header>

<section><h2>网页主体</h2></section>


<footer><h2>网页脚部</h2></footer>

iframe内联框架

标签名：iframe
src：地址
w-h：高度宽度
name：框架标志名
frameborder：0为无边框；1为有边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：高度宽度
name：框架标志名
frameborder：0为无边框；1为有边框
-->
<iframe src="https://www.baidu.com" name = "百度" frameborder="0" width = "160px" height = "90"></iframe>



<a href="https://www.baidu.com" target = "hello">点击跳转</a>
<iframe src="" name="hello" frameborder = "0" width = "160px" height=""90px></iframe>

</body>
</html>

代码里展现了内联框架的两种用法：

其一是内联框架指向的链接处的网页，在本页面打开时，就已经打开效果如下图：
第二种是配合链接标签一起使用，在点击”跳转“的时候把指定网址的页面在本页面打开

HTML5第一部分 - 文章图片

内容总结

以上是互联网集市为您收集整理的HTML5第一部分全部内容，希望文章能够帮你解决HTML5第一部分所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1043338.html

来源：【匿名】

【上一篇】5个你不知道的HTML5的接口介绍【下一篇】html5如何获取php数据

更多 ►

【HTML5第一部分】教程文章相关的互联网学习教程文章

HTML是标记语言，HTML由一套标记标签（Markup Tag）组成，在制作网页时，使用标记标签来描述网页网页编辑工具：记事本、Dreamweaver、UltraEdit、HBuilder、WebStorm等。标签都是成对出现的，有一个开头标记就对应地有一个结束标记，以“< >”开始、以“< / >”结束，要求成对出现，标签之间有缩进，体现层次感，方便阅读和修改。 HTML5的基本结构分为两部分：头部（head）和主体（body）。 @ <head> ... </head> 网页...

10几个HTML5经典动画应用回顾让你大饱眼福【图】

1、HTML5 Canvas画板画图工具可定义笔刷和画布HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。在线预览源码下载 2、HTML...

springmvc整合mybatis框架源码 bootstrap html5 mysql oracle maven SSM SSH【图】

获取【下载地址】? ?QQ: 313596790? ?【免费支持更新】A 代码生成器(开发利器);全部是源码??? ?增删改查的处理类，service层，mybatis的xml，SQL( mysql? ?和oracle)脚本,? ?jsp页面都生成? ?就不用写搬砖的代码了,生成的放到项目里，可以直接运行B 阿里巴巴数据库连接池druid;??数据库连接池??阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势C 安全权限框架shiro ;??Shiro 是一个用 Java 语言实现的框...

认识HTML5的WebSocket

原文来自于：http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html 认识HTML5的WebSocket在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Sock...

HTML5 Canvas 画布【代码】【图】

一、Canvas是什么？canvas，是一个画布，canvas元素用于在网页上绘制图形。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二、创建Canvas元素加上基本的属性：类，宽度和高度<canvas class="MyCanvas" width:100px height:100px></canvas>三、绘制路径使用的是javascript元素来绘制，canvas本省不具备绘图的能力。所有的绘制必须通过javascript来完成。1、JavaScript 使用 id 来寻找 canvas 元素：var c=document...

浅谈：html5和html的区别

什么是html5呢？html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML+CSS 3+JS+API。hmtl5于html的区别我们现在web前端开发的静态网页，一般都是html4.0。同时是符合W3C的xhtml1.0规范来的。那么他们两者又有什么实质性的区别呢？1.在文档类型声明上html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

HTML5 的from如何关闭自动完成功能？

一：什么是HTML5的form自动完成功能？首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。如：12345678<formautocomplete="on"> First name:<inputtype="text"name="fname"/><br/> Last name: <inputtype="text"name="lname"/><br/> E-mail: <inputtype="em...

HTML5实战１

第一章１。搭建环境，wamp２。检查浏览器是否支持html５　,是否支持新标签<canvas></canvas>３。简单高效，少用id，多用标签。４.使用css３美化样式。５.html５再ie８中找不到标签的时候，在<head>中自定义element <script type="text/javascript"> 　　document.createElement(‘article‘); 　　document.createElement(‘header‘); </script>原文：http://www.cnblogs.com/firew/p/5109856.html

《HTML5与CSS3基础教程》第4-5章

第四章文本1、<p></p>2、<small></small>表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。3、<strong></strong>表示内容的重要性，以粗体显示，一个strong可以嵌套在另一个strong中；<em></em>表示内容的着重点，以斜体显示，一个em可以嵌套在另一个em中。<b></b>用于如文档摘要里的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等；<i></i>用于如分类名称、技术术语、外语里...

小强的HTML5移动开发之路（33）—— jqMobi基础【图】

一、什么是jqMobijqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架，是个极快速的查询选择库，支持W3C查询。版本jqMobi源码最初在2012年1月份推出，基于MIT/X11许可证，托管在GitHub上，开发者可参与并通过插件不断改进该框架。2012年3月13日，jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0jqMobi的特点速度快适用于智能手机和平板电脑提供了60多个API调用与jQuery相同的语法插件可扩展体积更小英特尔收购英...

HTML5---4.表单新增的其他属性【代码】

placeholder 占位符 autofocus 自动获取焦点 autocomplete 自动获取内容（必须提交 name） required 必填 pattern 正则表达式 (不需要/ / “”) Multiple 文件上传可上传多个 Form<form action="" id="myForm"><!--autocomplete:自动完成：on:打开 off:关闭1.必须成功提交过:提交过才会记录2.当前添加autocomplete的元素必须...

html5plus 从相册选择图片后获取图片的大小【代码】

plus.gallery.pick(function (filePath) {plus.io.resolveLocalFileSystemURL(filePath, function (entry) {console.log(‘resolveLocalFileSystemURL success‘)entry.getMetadata(function (metaData) {console.log(‘getMetadata success‘)console.log(metaData.size)}, function () {console.error(‘getMetadata fail‘);});}, function () {console.error(‘resolveLocalFileSystemURL fail‘)}); });原文：https://www.cnb...

HTML5实现对话气泡动画方法【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5实现对话气泡点击动画</title><style type="text/css">.select-toast{position: absolute; //确定对话的位置top: 3.4rem;right: 0.2rem;width: 1.45rem; //确定宽度，高度由文字撑开padding: 0.18rem; //确定文字距离对话框外部的距离line-height: 0.4rem; //确定文字的行高color: #d06e5a; //文字颜色background-color: rgba(255,255,255,0.85); ...

html5文件上传断点续传【代码】

最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(?д?lll)，没做过啊。没办法，(# ?Д?)，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。感谢以下文章提供的思考方向：http://www.script-tutorials.com/pure-html5-file-upload/http://fex.baidu.com/blog/2014/04/html5-uploade...

让IE支持HTML5的方法【图】

越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个： 1.为网站创建多套模板，通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面，例如：优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包...

HTML5 - 技术教程分类

HTML5 教程 HTML5 浏览器支持 HTML5 新元素 HTML5 Canvas HTML5 内联 SVG HTML5 MathML HTML5 拖放 HTML5 地理定位 HTML5 Video(视频) HTML5 Audio(音频) HTML5 表单元素 HTML5 表单属性 HTML5 语义元素 HTML5 Web 存储 HTML5 Web SQL HTML5 Web Workers HTML5 SSE HTML5 WebSocket html5 全部

HTML5 - 最热教程

html5代码如何实现进度条功能？（示例）HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...HTML5新增属性之拖拽属性（介绍）HTML5input新增type属性color颜色拾取器...Html5百叶窗效果的代码 html5开始播放当前的音频或视频的方法

首页 / HTML5 / HTML5第一部分

HTML5第一部分

内容导读

内容图文

初识HTML

网页基本标签

图像标签

链接标签

图片链接

锚链接

功能性链接

行内元素和块元素

列表

有序列表

无序列表

自定义列表

表格

媒体元素

视频和音频

页面结构分析

iframe内联框架

内容总结

内容备注

内容手机端

【HTML5第一部分】教程文章相关的互联网学习教程文章

HTML5 - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程