HTML5 学习笔记day01

最新推荐文章于 2024-05-21 21:06:26 发布

B.T.M

最新推荐文章于 2024-05-21 21:06:26 发布

阅读量249

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/weixin_48605116/article/details/118522464

版权

html学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本概念，包括其作为超文本标记语言的特性，以及Web标准的三个组成部分——结构、表现和行为。重点讲解了HTML常用的标签，如标题标签、段落标签、换行标签、文本格式化标签、图像标签、链接标签以及路径的使用。此外，还提到了注释标签和特殊字符的插入方法，是初学者理解HTML网页构建的全面指南。

摘要由CSDN通过智能技术生成

1.什么是HTML

超文本（可以加入图片，声音，动画多媒体等内容）标记语言，并不是一种编程语言，而是一种标记语言。它还可以从一个文件跳转到另一个文件，即超链接。

2.web标准的构成

主要包括结构（对网页元素的整理和分类，HTML），表现（网页元素的颜色大小等外观），行为（网页模型的定义及交互的编写javascript）三个方面。

3.HTML标签

标签关系：包含关系和并列关系。

HTML页面又称HTML文档，head和body标签并列，html包含所有标签

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，根标签
<head></head>	文档的头部	在head标签中我们必须要设置包含的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面的

<!DOCTYPE html>#当前页面是用的html5，是一个文档声名标签
<html lang="en">#en定义语言为英语，zh-CH定义为语言为中文
<meta charset="UTF-8">#字符集，以便计算机能够识别和存储各种文字，meta则规定用哪种字符编码

HTML常用标签

标题标签：<h1>-<h6> 为了使网页更具有语义化，我们经常会在页面中用到标题标签，html提供了六个等级的网页标题。h1是字号最大最粗的。

段落标签：

<p>我是第一个段落</p>
<p>我是第二个段落</p>

语义：可以把文章分为不同的段落

换行标签 <br />

<p>我是第一个段落<br />换行</p>

两段之间会有一段空行，换行则不会出现空行。

文本格式化标签：

语义	标签	说明
加粗	<strong></strong>
倾斜	<em></em>
删除线	<del></del>
下划线	<ins></ins>

它们没有语义，就是一个盒子

<div>一个div独占一行，一个超大的盒子</div>大盒子

<span>标签用来布局，一行可以放多个<span>小盒子

图像标签

<img src="图像URL" /> src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

将图片与html文件放在一起，图片名为img 。alt替换文本，如果图片显示不出来，可以用文字来显示。title：鼠标一经过图片就有。width，height，border 设置图像的长，宽，边框粗细.长宽只修改一个一般情况。

<img src="img.jpg" alt="pink" title="鼠标pink" width ="500"/>

路径

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面需要的相关素材

相对路径：以引用文件所在位置为参考依据，而建立出的目录路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src="baidu.gif" />
下一级路径	/	图像文件位于HTML文件下一级，如<img src="images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级，如<img src="../baidu.gif" />

绝对路径：通常是盘符开始的路径。

超链接标签：

链接的语法格式：<a href="跳转目标的url地址" target="目标窗口弹出的方式">文本或图像</a>

链接的分类：

1.外部链接：例如<a href="http://www.qq.com" target="_self">腾讯</a>

target="_blank"用一个新的页面打开网址，"_self"用自己的页面打开网址

2.内部链接：网站内部页面之间的相互连接。即不需要加http://，不加http意味着从本地寻找该网址。<a href="oldman.html">圣诞老人</a>

3.空链接：<a href="#">首页</a>

4.下载链接：<a href="img.zip">下载文件</a>

5.网页元素链接，图片，视频，音频等都可以作为链接。

6.锚点链接：点击链接，可以快速定位到页面中的某一位置

在<a href="#live">个人生活</a>