初识HTML

最新推荐文章于 2024-11-07 10:38:40 发布

weixin_44793608

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量144

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44793608/article/details/91406210

版权

初识HTML

他不是编程语言,标记语言(MarkupLanguage)使用标签等标记来描述一些事物的一种语言

1.了解HTML相关概念

1.1 HTML的概念

HTML: 超文本标记语言(Hyper Text Markup Language),标准尊通用标记语言下的一个应用.
HTML不是一种编程语言,而是一种标记语言,是制作网页所必备的
超文本: 超越了文本、不仅仅是文本。除了文本外还包括图片、链接、甚至音乐、程序等非文字元素
XML:（eXtensive Markup Language）可扩展的标记语言。
XML和HTML的区别：我们的XML它是可以随意在文件中定义自己的标记，但是HTML他的标记都是官方定制的语法，无法自定义。XML的宗旨是用来传输数据，HTML是用来在网页中描述信息。扩展名为.htm和.html
HTML的发展史

2.掌握HTML的基本结构

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

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

3.掌握HTML的常用标签

head中的常用配置标签

<!--
	元标签：它的不同属性可以配置网页的信息
	charset：字符集/字符编码
    SEO使用：
        Keywords：关键字列表
        Description：网站描述
-->
<mata charset="UTF-8"/>
<mata 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中 对于空格和换行只会解析为一个空格！&nbsp;表示空格 -->
<!-- HBuilder快捷键：移动：Ctrl+上下键 -->
<!-- p：段落 -->
<p>
	锄禾日当午，汗滴禾下土。
	<!-- br换行标签 -->
	<br/>
	谁知盘中餐，粒粒皆辛苦。
</p>
<p>
    生当作人杰，死亦为鬼雄。<br/>
    至今思项羽，不肯过江东。
</p>

图片标签

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

超链接标签

超链接、超文本连接。

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

<!-- 超链接标签
	href：链接到的地址
	target(目标)：目标以什么方式打开
		_blank 在新的空白窗口打开
		_self 默认的 表示将链接文档在当前打开
-->
<a href="index1.html" target="_blank" title="点我跳啊">点我跳转</a>
<!-- 图片超链接 -->
<a href="index1.html">
	<img src="../../05-图片标签/img/不爱学习，就滚出去.png"/>

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

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

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

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

视频和音频标签

<!-- 视频标签
			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>