第三十一篇(初始HTML)

本文介绍了HTML的基础知识,包括其作为标记语言的角色,与编程语言的区别,以及如何使用HTML创建网页的基本结构。文章详细解释了HTML的历史,从W3C到WHATWG的发展过程,展示了HTML文档的典型结构,并列举了多种常用标签,如标题、段落、链接、图片、视频和音频等。

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

初识HTML

它不是编程语言。标记语言(Markup Language) 使用标签等标记来描述一些事物的一种语言。

md markdown 一种文件格式,程序员必会!它支持一些标记语法,甚至支持HTML。

一般来讲编程语言都拥有选择和循环结构。

1. 了解HTML相关概念

  • HTML的概念

HTML:超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。

超文本:超越了文本、不仅仅是文本。除了文本外还包含图片、链接,甚至音乐、程序等非文字元素。

XML:(eXtensive Markup Language)可扩展的标记语言。

XML和HTML区别:我们的XML它是可以随意在文件中定义自己的标记,但是HTML它的标记都是官方定制的语法,无法自定义。XML的宗旨是用来传输数据,HTML是用来在网页中描述信息。

扩展名为.htm和.html

  • HTML的发展史

在这里插入图片描述

  • W3C和WHATWG

    W3C(万维网联盟) 国际性的中立的技术标准组织,它维护了很多技术的标准,HTML、XML、XHTMTL、CSS、JavaScript…等都是由它维护标准的。

    WHATWG(网页超文本应用技术工作小组)主流的浏览器公司:欧朋、Mozilla、苹果、微软…

WHATWG成立的原因是W3C意图放弃HTML,而力图发展XML(可扩展标记记语言下的一个子集)技术。WHATWG邮件列表公布于2004-6-4 , 在Opera–Mozilla宣布加入后的2天 便否决了由万维网联盟(W3C)成员在W3C工作室的Web标准。

2007-7-10 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5,将新的HTML(标准通用标记语言下的一个应用)命名为"HTML5".2007-4-7, 新的HTML工作组采纳了他们的建议。

2019年6月的一份新闻稿中,W3C 和 WHATWG 宣布,他们终于把他们的分歧放在一边,并签署了一份新的谅解备忘录。

根据这份新协议,W3C 正式发布未来的 HTML 和 DOM 标准,并支持 WHATWG,将控制权完全交还给浏览器厂商。

取而代之,W3C 及其数百名成员将起草未来的 Web 标准需要包含什么特性的“建议”。然后,WHATWG 将决定把哪些加入到他们的产品中。当前由 WHATWG 维护的 HTML Living Standard 将成为 HTML 标准的官方版本。DOM Living Standard 也是如此。

2. 掌握HTML的基本结构

HTML是一个弱语法的标记语言。它不像XML和Java等那么严格!

<!-- Document Type 声明 声明格式和HTML标准版本  -->
<!DOCTYPE html>
<!-- 根标签 固定的结构组成 -->
<html>
    <!-- 头标签:一般在头标签中编写大量的网页配置信息 -->
	<head></head>
    <!-- 体标签:一般情况下网页中显示的超文本内容都是在其中定义的 -->
	<body>
		Hello HTML!
	</body>
</html>

Web前端开发常用IDE:Sublime Text3、HBuilder X、HBuilder、WebStorm、VSCode、DreamWeaver…

3. 掌握HTML的常用标签

3.1 head中的常用配置标签
<!--
	元标签:它的不同属性可以配置网页的信息
	charset:字符集/字符编码
    SEO使用:
        Keywords:关键字列表
        Description:网站描述
-->
<meta charset="UTF-8"/>
<meta name="Keywords" content="第一个程序"/>
<meta name="Description" content="这是我们开发的第一个HTML程序。"/>
<!-- 可以通过link标签设置网页图标 -->
<link href="//ask.dcloud.net.cn/static/css/classblack/img/favicon.png?v=20141207" rel="shortcut icon" type="image/x-icon">
<!-- 网页标题 -->
<title>首页</title>
3.2 常用的超文本标签
  • 标题标签

    <!-- h1~h6 标题一(最大的)...标题六(最小的) -->
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    

    显示效果如下:
    在这里插入图片描述

  • 段落或换行标签

    <!-- 在HTML中 对于空格和换行只会解析为一个空格!&nbsp;表示空格 -->
    <!-- HBuilder快捷键:移动:Ctrl+上下键 -->
    <!-- p:段落 -->
    <p>
    	锄禾日当午,汗滴禾下土。
    	<!-- br换行标签 -->
    	<br/>
    	谁知盘中餐,粒粒皆辛苦。
    </p>
    <p>
        生当作人杰,死亦为鬼雄。<br/>
        至今思项羽,不肯过江东。
    </p>
    

显示效果如下:
在这里插入图片描述

  • 水平线和加粗、倾斜

    <!--
    	em/i:倾斜
    	strong/b:加粗
    -->
    <strong>夏日绝句</strong>·<em>李清照</em>
    <!--水平线 -->
    <hr width="200px" align="left"/>
    <p>
    	生当作人杰,死亦为鬼雄。<br/>
    	至今思项羽,不肯过江东。
    </p>
    

    显示效果如下:
    在这里插入图片描述

  • 图片标签

    <!-- 图片标签
        src:图片路径(绝对路径/相对路径)
        width:图片宽度 单位:px、em...
        height:图片高度
        alt:设置当图片加载失败时显示出替代的文字(不常用)
     title:每一个标签都有  用来在鼠标悬浮其上 提示
    -->
    <img src="img/book.jpg" alt="一本书"  width="200px" height="200px" title="这是一本书籍"/>
    

显示效果如下:
在这里插入图片描述

3.3 超链接标签

超链接、超文本连接。

  • 分类

    • 页面间链接:最常用,链接地址为某个网页

      <!-- 超链接标签
      	href:链接到的地址
      	target(目标):目标以什么方式打开
      		_blank 在新的空白窗口打开
      		_self 默认的 表示将链接文档在当前打开
      -->
      <a href="index1.html" target="_blank" title="点我跳转">点我跳转</a>
      <!-- 图片超链接 -->
      <a href="index1.html">
      	<img src="img/book.jpg"/>
      </a>
      
    • 锚链接:在同一个文档/网页中,进行不同位置的链接跳转。目录就是锚链接,百度百科右侧的侧边栏。

      <!--
      	锚链接:
      		同一个页面:
              1.在要跳转到的位置添加id属性 设置值
              2.在超链接href属性中添加#要跳转到的位置id值
              不同页面的锚链接:只不过是多加一个要跳转的页面地址而已
      -->
      <a href="#hehe">购物流程</a>
      <h2 id="hehe">购物流程</h2>
      
      ---
      <a href="help.html#register">新用户注册帮助</a>
      
    • 功能性链接:通过链接可以打开电子邮箱、QQ、拨号盘等…

      // 例如:给某人发电子邮件
      <a href="mailto:邮箱地址">文本内容</a>
      
      // 例如:给指定QQ好友聊天,利用功能性链接快速跳转(2种方法)
      1.
      <a href=
         "mqqwpa://im/chatchat_type=wpa&uin=
          (QQ号)&version=1&src_type=web&web_src=oicqzone.com">文本内容
      </a>
      2.
       <a href=
          "tencent://message/?uin=(QQ号)&amp;Site=有事Q我&amp;Menu=yes">  
          <img style=
               "border:0px;" src=http://wpa.qq.com/pa?p=1:(QQ号):1>
      </a> 
      
3.4 视频标签
<video src="视频路径" controls></video>
  • src —> 指定要播放的视频文件的路径
  • controls —> 提供播放、暂停和音量的控件

在这里插入图片描述

由于浏览器支持的视频格式原因,一般情况下我们都会插入两条不同格式的视频,浏览器本身有自己的算法,它会找到合适的/它本身支持的视频进行显示。

写法如下:

// controls:控件(控制播放器)	autoplay:自动播放
// 也可以设置视频的大小宽高,设置了宽度,高度可以不设置,会默认调整比例
<video controls autoplay>
    <source src="video/video.mp4" type="video/mp4"/>
    <source src="video/video.webm" type="video/webm"/>
</video>
3.5 音频标签

和视频标签的写法基本相似,就是换了一下关键字

<audio src="音频路径" controls></audio>
  • src —> 指定要播放的音频文件的路径
  • controls —> 提供播放、暂停和音量的控件
    在这里插入图片描述

和视频相同,音频的格式,由于浏览器本身支持的原因

写法如下:

// controls:控件(控制播放器)
<audio controls>
    <source src="music/music.mp4" type="audio/mp4"/>
    <source src="music/music.ogg" type="audio/ogg"/>
</audio>
3.6 W3C标准(World Wide Web Consortium,万维网联盟)

规范:

  • 标签名称、属性名称必须小写
  • 标签必须严格嵌套,并且必须闭合,即使空元素标签也必须闭合
  • 属性值必须用引号引起来
语义化标签

网页设计时常用

标签来进行布局设计。但是这种标签数量多了,在维护和阅读时非常混乱!

常用的结构元素

元素名描述
header标题头部区域的内容(用于页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容
// 对网页进行结构划分时,所添加的边框样式
<style>
    header,section,footer{
        height: 200px;
        border: 1px solid red;
    }
</style>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>网易邮箱页面布局</title>
    <!--此段代码只是让大家能更好的看到每块元素的位置,后面在CSS中会具体讲解-->
    <style>
        header,section,footer{
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <header>
        <h2>网页头部</h2>
    </header>
    <section>
        <h2>网页主体部分</h2>
    </section>
    <footer>
        <h2>网页底部</h2>
    </footer>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值