初识HTML

最新推荐文章于 2023-03-05 08:50:21 发布

chenxu6658

最新推荐文章于 2023-03-05 08:50:21 发布

阅读量105

点赞数

分类专栏：学术文章标签：学术

本文链接：https://blog.csdn.net/chenxu6658/article/details/92800469

版权

学术专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML

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

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

1. 了解HTML相关概念

HTML的概念

HTML：[超文本标记语言]

**超文本：**超越了文本、不仅仅是文本。除了文本外还包含图片，甚至音乐、等非文字元素。

**XML：**可扩展的标记语言。

**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等那么严格！

Hello HTML!

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

3. 掌握HTML的常用标签

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

常用的超文本标签

标题标签

h1~h6 标题一(最大的)…标题六(最小的)

  <h1>标题一</h1>
  <h2>标题二</h2>
  <h3>标题三</h3>
  <h4>标题四</h4>
  <h5>标题五</h5>
  <h6>标题六</h6>

段落或换行标签

在HTML中对于空格和换行只会解析为一个空格！表示空格
HBuilder快捷键：移动：Ctrl+上下键

  <!-- p：段落 -->
  <p>

锄禾日当午，汗滴禾下土。
<!-- br换行标签 -->
<br/>
谁知盘中餐，粒粒皆辛苦。


 </p>
  <p>
      生当作人杰，死亦为鬼雄。<br/>
      至今思项羽，不肯过江东。
  </p>

水平线和加粗、倾斜

<strong>夏日绝句</strong>·<em>李清照</em>
<!--水平线  HTML标签也都有大量的属性 但是仅仅记忆几个即可 因为它们并不是我们常用的 -->
<hr width="200px" align="left"/>
<p>
	生当作人杰，死亦为鬼雄。<br/>
	至今思项羽，不肯过江东。
</p>

图片标签

<!-- 图片标签
    src：图片路径(绝对路径/相对路径)
    width：图片宽度 单位：px、em...
    height：图片高度
    alt：设置当图片加载失败时显示出替代的文字(不常用)
 title：每一个标签都有  用来在鼠标悬浮其上 提示
-->
<img src="img/不爱学习，就滚出.png" alt="我是一只食铁兽"  width="200px" height="200px" title="这是一个爱学习的熊猫"/>

超链接标签

超链接、超文本连接。

分类

页面间链接：最常用，链接地址为某个网页

<a href="index1.html" target="_blank" title="点我跳啊">点我跳转</a>
<!-- 图片超链接 -->
<a href="index1.html">
	<img src="../../05-图片标签/img/不爱学习，就滚出去.png"/>
</a>

锚链接：在同一个文档/网页中，进行不同位置的链接跳转。目录就是锚链接，百度百科右侧的侧边栏。

<!--
	锚链接：
		同一个页面：
        1.在要跳转到的位置添加id属性 设置值
        2.在超链接href属性中添加#要跳转到的位置id值
        不同页面的锚链接：只不过是多加一个要跳转的页面地址而已
-->
<a href="#hehe">购物流程</a>
<h2 id="hehe">购物流程</h2>

---
<a href="help.html#register">新用户注册帮助</a>

功能性链接：通过链接可以打开电子邮箱、QQ、拨号盘等…

<a href="mailto:charles7c@126.com">点我联系管理员</a>

视频和音频标签

<!-- 视频标签
			src：视频地址
			controls：视频控件 controls="controls"  H5中对于属性名和属性值相同 或值为boolean值则可以只写属性名
			autoplay 自动播放
			loop：循环播放
-->
<video src="【建筑动画】毕业设计--自然之力与建筑语言.mp4" loop autoplay controls></video>
<!-- 音频标签 -->
<audio src="" autoplay controls loop></audio>

语义化标签

网页设计时常用

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

<！-- 上中下结构还有例如：121结构 131结构封面结构… -->

<div>
	网页头部区域   - 放导航
	<div class="header">
		导航
		<div class="nav-bar"></div>
		个人中心信息
		<div></div>
	</div>
	网页中间内容   - 主体内容
	<div class="content-body">
		侧边栏
		<div></div>
	</div>
	网页尾部内容  - 版权 相关链接等
	<div class="footer"></div>
</div>

其实语义化标签和div作用一致。

头

<header>
	<nav></nav>
</header>
<section>
	<article></article>
	<aside></aside>
</section>
<footer>

</footer>

chenxu6658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

HTML标记语言(Markup Language)使用标签等标记来描述一些事物的一种语言。一般来讲编程语言都拥有选择和循环结构。1. 了解HTML相关概念HTML的概念HTML：[超文本标记语言]**超文本：**超越了文本、不仅仅是文本。除了文本外还包含图片，甚至音乐、等非文字元素。**XML：**可扩展的标记语言。**XML和HTML区别：**我们的XML它是可以随意在文件中定...
复制链接

扫一扫