HTML初识

文章目录

HTML常用的元素介绍
- a元素
- 路径的写法
- 多媒体元素
- 列表元素
- - 有序列表
  - 无序列表
  - 定义列表
- 容器元素

HTML常用的元素介绍

a元素

a元素用于超链接。a元素的常见属性如下：

href属性

全称是hyper reference(引用)，表示跳转地址

跳转地址:由一个页面跳转到另一个页面

跳转到某个锚点：也就是跳转到一个页面的不同位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<!--目录-->
<a href="#chapter1">章节1</a>
<a href="#chapter2">章节2</a>
<a href="#chapter3">章节3</a>
<a href="#chapter4">章节4</a>
<h2 id="chapter1">章节1</h2>
<p>Microsoft Bing (formerly known simply as Bing) is a web search engine owned and operated by Microsoft. The servicehas its origins in Microsoft's previous search engines: MSN Search, Windows Live Search and later Live Search. Bingprovides a variety of search services, including web, video, image and map search products. It is developed usingASP.NET.</p>
<h2 id="chapter2">章节2</h2>
<p>Bing, Microsoft's replacement for Live Search, was unveiled by Microsoft CEO Steve Ballmer on May 28, 2009, at theAll Things Digital conference in San Diego, California, for release on June 3, 2009.[2] Notable new features at thetime included the listing of search suggestions while queries are entered and a list of related searches (called"Explore pane") based on semantic technology from Powerset,[3] which Microsoft had acquired in 2008.[4]In July 2009, Microsoft and Yahoo! announced a deal in which Bing would power Yahoo! Search.[5] Yahoo! finished thetransition in 2012.[6]</p>
<h2 id="chapter3">章节3</h2>
<p>In October 2011, Microsoft stated that they were working on new back-end search infrastructure with the goal ofdelivering faster and slightly more relevant search results for users. Known as "Tiger", the new index-servingtechnology had been incorporated into Bing globally since August that year.[7] In May 2012, Microsoft announcedanother redesign of its search engine that includes "Sidebar", a social feature that searches users' social networksfor information relevant to the search query.[8]</p>
<h2 id="chapter4">章节4</h2>
<p>On March 21, 2007, Microsoft announced that it would separate its search developments from the Windows Live servicesfamily, rebranding the service as Live Search. Live Search was integrated into the Live Search and Ad Platform headedby Satya Nadella, part of Microsoft's Platform and Systems division. As part of this change, Live Search was mergedwith Microsoft adCenter.[15]A series of reorganisations and consolidations of Microsoft's search offerings were made under the Live Searchbranding. On May 23, 2008, Microsoft announced the discontinuation of Live Search Books and Live Search Academic andintegrated all academic and book search results into regular search, and as a result this also included the closure ofLive Search Books Publisher Program. Soon after, Windows Live Expo was discontinued on July 31, 2008. Live SearchMacros, a service for users to create their own custom search engines or use macros created by other users, was alsodiscontinued shortly after. On May 15, 2009, Live Product Upload, a service which allowed merchants to upload productsinformation onto Live Search Products, was discontinued. The final reorganisation came as Live Search QnA which wasrebranded as MSN QnA on February 18, 2009, although it was discontinued on May 21, 2009.[16]</p>
<a href="#">回到顶部</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="test3.html#chapter4">链接test3的第四章</a>
</body>
</html>

功能链接：点击后，出发某些功能（可以出发JS代码）javascript

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="javascript:alert('你好')">弹出你好</a>
</body>
</html>

发送邮件：mailto:,但是要求用户的计算机上安装有邮件发送软件

拨号：tel:要求用户的计算机安装有拨号软件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="javascript:alert('你好')">弹出你好</a>
<a href="mailto:2324144691@qq.com">点击给我发送邮件</a>
<a href="tel:15175351863">点击给我拨打电话</a>
</body>
</html>

target属性

表示跳转窗口的位置。

target的取值：

_self：在当前页面窗口中打开默认值

_blank:在新窗口中打开

title属性

指向链接后出现指示性文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank" title="百度一下">百度</a>
</body>
</html>

id属性

全局属性，表示元素在文档中的唯一编号

路径的写法

站内资源：当前网站的资源

站外资源：非当前网站的资源

路径分为了绝对路径和相对路径，对站外资源使用绝对路径，对站内资源使用相对路径

绝对路径的书写格式：严格来说就是URL地址

协议名://主机名:端口号/路径
schema://host:port/path

协议名有http https file

主机名：域名或者是IP地址

端口号：如果协议是http协议，默认端口号是80 如果协议是https协议，默认的端口号是443

当跳转目标和当前页面的协议相同时，可以省略协议

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="https://space.bilibili.com/">百度</a>
<a href="//renren.com/">人人网</a>
</body>
</html>

相对路径以./开头，表示当前资源所在的目录，可以书写…/返回上一级目录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="./404.html">404页面</a>
</body>
</html>

img元素

img元素是一个图片元素，是image缩写，是一个空元素

src属性：source资源

alt属性：当图片资源失效时，显示一段文字解释这个失效的图片，如果图片没有失效则不显示文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<imgsrc="data:image/jpeg;base64,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">
<img src="/img/github.png" alt="这是一个图片">
</body>
</html>

img元素可以和a元素联用，和map元素

map元素

map代表的是地图，和子元素进行嵌套，可以和area元素进行嵌套

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<imgsrc="data:image/jpeg;base64,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">
<img src="/img/github.png" alt="这是一个图片">
<a target="_blank" href="https://baike.baidu.com/item/太阳系/173281?fr=aladdin"><img src="/img/solar.jpg">
</a>
<map name="solarMap"><area shape="circle" coords="1118,533,65" href="https://baike.baidu.com/item/木星/222105?fr=aladdin" target="_blank">
</map>
</body>
</html>

figure元素

figure元素是指代定义通常把图片和图片标题描述等等包裹起来

它有一个子元素:figcaption

多媒体元素

多媒体元素分别是video元素和audio元素

video元素和audio元素
video中有些属性:
controls:控制控件的显示，取值只可以是controls
在HTML5中某些属性只有两种状态:不写或者是取值为属性名，这种属性叫做是布尔属性。布尔属性在HTML5中可以不写属性值
autoplay：布尔属性，自动播放
muted：布尔属性，静音播放
loop:布尔属性，循环播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video src="open.mkv" autoplay="autoplay" muted loop controls="controls" style="width: 500px;"></video>
<hr>
<audio src="open.mp3" autoplay muted loop controls style="width:500px;"></audio>
</body>
</html>

注意：

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致

因为兼容性的问题，也可以这样编写:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<video controls autoplay muted loop style="width:500px;"><source src="open.mkv"><source src="open.webm"><p>对不起，您的浏览器不支持video元素，请下载最新版的浏览器</p>
</video>
</body>
</html>

列表元素

有序列表

ol:ordered list
li:list item
其中属性有:type 和reversed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
把大象装进冰箱分为几步？
<ol type="a"><li>打开冰箱</li><li>放入大象</li><li>关上冰箱</li>
</ol>
</body>
</html>

无序列表

ul：unordered list
li:list item
无序列表常用于制作菜单或者是新闻列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
择偶条件
<ul><li>有责任心</li><li>会家务</li><li>孝敬老人</li>
</ul>
</body>
</html>

定义列表

通常用于定义一些术语
dl：definition list
dt:definition title
dd:definition description

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
HTML中的术语解释:
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>元素</dt><dd>组成HTML文档的单元</dd>
</dl>
</body>
</html>

容器元素

容器元素代表一个块区域，用于存放其他的元素

div元素
div元素没有语义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><div><img src="" alt=""></div><div><ul><li>tom</li><li>jerry</li><li>w3c</li></ul></div>
</div>
</body>
</html>

header元素：通常用于表示页头也可以用于表示文章的头部
footer元素:通常用于表示页脚，也可以表示文章的尾部
article：通常用于表示整篇文章
section:通常用于表示文章的章节
aside:通常用于表示侧边栏附加信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><header><div><img src="" alt=""></div><div><ul><li>tom</li><li>jerry</li><li>w3c</li></ul></div></header><article><h1>研发之道</h1><section></section></article><footer></footer>
</body>
</html>

在以前，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。但是HTML5更加注重语义化，元素的包含关系是由元素的内容类别决定的。可以在网站上查看元素之间的包含关系

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素由固定的子元素
标题元素和段落元素之间不可以相互嵌套，并且不可以包含容器元素