HTML5

原创 已于 2023-08-22 21:37:08 修改 · 385 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #html #css #前端

于 2021-09-12 11:26:39 首次发布
本文详细介绍了HTML5的基础概念，包括HTML、CSS和JavaScript的关系，以及HTML5中语义化标签、换行空格、列表、图片链接、表格、表单创建等内容，重点讲解了如何利用这些元素实现网页的结构清晰和交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML5

第一章 HTML5介绍

HTML、CSS、JavaScript

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

html和css的关系

  1. css是用来修饰html样式的

  2. html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css

  3. html+css构成了我们网页的基本页面结构和样式

标签语法

  1. 标签由英文尖括号<和>括起来，如就是一个标签。

  2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

HTML文档结构

  1. !DOCTYPE html:文档类型声明，表示该文件为 HTML5文件。
    !DOCTYPE 声明必须是 HTML 文档的第一行，位于html标签之前

  2. html标签对：html标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

  3. head标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如tittle，link /meta /，style，script等，但是浏览器除了会在标题栏显示title元素的内容外，不会向用户显示head元素内的其他任何内容。

  4. body标签对：它是HTML文档的主体部分，在此标签中可以包含p,h1,br等众多标签，boby标签出现在head标签之后，且必须在闭标签html之前闭合。
    在这里插入图片描述

认识head标签

可用在 < head> 标签里面的标签

<head>  <!-- 网页头部 -->
    <meta charset="UTF-8"> <!-- 定义关于 HTML 文档的元数据 -->
    <base> <!-- 定义页面上所有链接的默认地址或默认目标 -->
    <link> <!-- 定义文档与外部资源之间的关系 -->
    <title> 制作我的第一个网页 </title> <!-- 网页标题 -->
    <style> </style> <!-- 样式 -->
    <script></script> <!--用于定义客户端脚本-->
</head>

认识body标签

在网页上要展示出来的页面内容一定要放在body标签中。

<h1><h1/>,<h2><h2/>,<h3><h3/>.......<h6><h6/>：标题标签大小
<p><p/>段落标签
<span>some text</span> 用来对文本中某个或某些字添加特别效果

第二章 语义化标签

段落标签p

<p>段落文本</p>
<!-- 如在一篇新闻文章中有3段文字，
就要把这3个段落分别放到3个p标签中-->

自定义文字样式span

<style><!--放在<head>中-->
   span{ 特殊样式的内容  }
</style>   
<span>文本</span>   <!--作用：设置单独的样式用-->

增加标题hx

在这里插入图片描述

自定义块div（header、footer、section、aside）

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。

定义头部区域header、底部区域footer,定义区段section，定义侧边栏区域

<body>
    <header>我是头部标签</header>
    <!--footer标签代表底部,单作用等同于div,只是具备语义化-->
    <footer>我是底部标签</foorer>
    <section>我是一个区域</section>
    <aside>我是侧边栏</ aside>
</body>

第三章 效果标签

换行br

xhtml1.0写法：<br />

空格nbsp;

##水平线hr
在这里插入图片描述

第四章 列表标签

无序列表ul,li

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

在这里插入图片描述

有序列表ol,li

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

在这里插入图片描述

第五章 图片/链接及表格标签

添加图片img

语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src = "myimage.gif" alt = "Can not find!" title = "My Image" >

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

超链接a

语法：
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
例如：
<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。

在新建浏览器窗口中打开链接

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

<a href=".....sina...." target="_self"> 新浪</a> 在当前页面打开链接。

<a href="...qq..." target="_blank">腾讯</a> 在新窗口打开链接

表格table、tr、th、td

1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

thead,tbody,tfoot

表格一般使用table标签，tr表示行，td表示列。th表示头部。表格是按照一行行来的。行里面包裹列。但是如果只有tr td 等，那假如网络不好的时候，需要等表格完全加载出来才会显示。

为了解决这个问题，在table标签里面加入了thead tbody tfoot标签，在这些标签里面嵌套tr标签，tr标签里面再嵌套td标签。通过tbody标签，把表格划分成一块块的部分，这样就可以在加载完该部分时，可以立即显示出来。另，因为加入了thead和tfoot标签，给表格制定了头部和尾部。在长表格打印的时候，头部和尾部会自动出现在每一页。

第六章 表单标签，与浏览者交互

创建表单form

语法：
<form   method="传送方式"   action="服务器文件">
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。

文本输入框、密码输入框type=“text/password”

语法：
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
举例：
<form>
  姓名：<input type="text" name="myName" / > <br/>
  密码：<input type="password" name="pass"/>
</form>

在这里插入图片描述

placeholder属性（输入框提示）
<input type="text" name="myName"  placeholer="请输入你的名字“/ > <br/>

数字输入框type=“number”

<form>
   <input type="number" name="NO"  />
</form>

网址输入框type=“url”

邮箱输入框type=“email”

单选框、复选框type=“radio/checkbox”

<input   type="radio/checkbox"   value="值"   
 name="名称"   checked="checked"/>
 1.value：提交数据到服务器的值（后台程序PHP使用）
 2.name：为控件命名，以备后台程序 ASP、PHP 使用
 3.checked：当设置 checked="checked" 时，该选项被默认选中
 4.同一组的单选按钮，name 取值一定要一致

提交、重置按钮type=“submit/reset”

在这里插入图片描述
在这里插入图片描述

创建文本区域textarea

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

在这里插入图片描述

关联控件label

<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

下拉菜单select、option

在这里插入图片描述

初识html5
ling_xy的博客
11-09 195
文章目录前言1.兼容性处理2.新元素总结 前言 html5是html4的升级，语义化更明确。适用于移动端和PC端 1.兼容性处理 如果浏览器不识别html5，我们使用CSS Hack来做兼容性处理 代码如下（示例）： <!--[IF lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!-- 下面这个是国内的静态资源库 处理方案更
初识 HTML5（一）
dojnzkt549272的博客
06-13 250
　　H5其实就是H4的一个增强版本，我们在利用H5进行网页的构造会更简便，标签语义更简洁明了。首先，我们要理解HTML4，它是HTML的标记+css2+JavaScript的一些基本应用，简言之，就是API+语法；而H5无非就是在原先的基础上面提供了一些新的功能。 1、H5的语义标签 　　1）:html 的定义 ，它的一个文档声明<!DOCTYPE html> 　　...
HTML5——初识html5
wzg31796的博客
04-16 455
一.新增标签 用在页面的头部或者版块的头部用在页面的头部或者版块的头部用来划分区域主体     和主体相关的附属信息 侧边栏 内容区域 时间选项列表。与input元素配合使用，来定义input可能的值 javascript html css 定义文章或页面作者信息需要标记的词或句子   进度条输入型控件 email：电子邮箱文本框 ，当输入的不是
初识HTML5（一）
weixin_46613916的博客
05-11 340
HTML5的基本知识 概述： HTML5是超文本标记语言的第5代版本，目前还处于推广阶段。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大麻烦，因而统一的的互联网显得尤为重要。在HTML5平台上，视频、音频、图像、动画及同电脑的交互都被标准化。 HTML5发展历程 在1993年6月作为互联网工程工作小组（IETF）工作草案发布。【文本标记语言（第一版）】 1995年11月作为RFC 1866年发布，在RFC2854于2000年6月发布之后被宣布过时【HTML2.0】 1
（1）初识HTML5
justforuse的博客
09-15 542
借了本HTML5相关的书《疯狂HTML5\CSS\JavaScript讲义》，由于以前有基础的HTML开发知识，所以看起来不是很困难，然而与我想像不同的是，原本以为是一种“新技术”的HTML5在笔者眼中是一种“妥协式”的规范，还是有点小惊讶，不过这样也使得HTML5的学习轻松了许多（是我想多了吗。。）。既然当下HTML5开发火热，那么必然有他的过人之处，对语言的“妥协”和新功能的添加都将使得前端开发
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
html5+css3+JS代码
05-22
HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术，它们共同构成了Web开发的三驾马车。在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的...
HTML5调用本地摄像头拍照
11-18
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中一项便是能够调用本地摄像头进行拍照。这一功能极大地丰富了网页应用的交互性，让用户无需离开页面就能获取和上传图片，常见于在线聊天、虚拟试衣间、证件...
HTML5初识
YanLingGe的博客
11-02 228
(一)什么是HTML5 1、HTML5是下一代HTML标准。 2、HTML,HTML4.01的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。 3、HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 4、HTML5的设计目的是为了在移动设备上支持多媒体。 5、HTML5简单易学。 (二)HTML5的改进 1、新元素 2、新属性 3、完全支持CSS3 4、Video和Audio 5、2D/3D...
初识HTML5
weixin_67675810的博客
03-14 114
HTML5中的基本标签和使用方法场景
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值