一、HTML的简单介绍
1.定义:HTML:HyperText Markup language(超文本标记语言),HTML 不是一门编程语言,而是标记语言。
2.作用:web 浏览器用 html 来显示网页
3.当前的标准:当前的 html 遵循 HTML5 标准
二、HTML常用标签介绍
1.<!DOCTYPE>标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML。
HTML5的DOCTUYPE声明
<!DOCTYPE html>
2.<html>标签
此元素可告知浏览器其自身是一个 HTML 文档。
该元素的lang属性规定元素内容语言为English。
<html>标签的用法
<html>
网页内容
</html>
3.<head>标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
一个简单的HTML文档,带有最基本的必需的元素:(<head>用法)
<html>
<head>
<title>文档的标题</title>
</head>
<body>
网页内容
</body>
</html>
4.<body>标签
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
5.<title>标签
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
6.<div>标签
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<div> 的内容自动地开始一个新行。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
<div class="news">
网页内容
</div>
7.<img>标签
img 元素向网页中嵌入一幅图像。
请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性:src 属性和 alt 属性。
src 属性: 规定显示图像的 URL。
alt 属性:规定图像的替代文本。
<img src="url" alt="23333"/>
8.<nav>标签
<nav> 标签定义导航链接的部分。
<nav>
<a href="index.html">2333</a>
</nav>
9.<a>标签
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
-
在所有浏览器中,链接的默认外观是:
1.未被访问的链接带有下划线而且是蓝色的
2.已被访问的链接带有下划线而且是紫色的- 活动链接带有下划线而且是红色的
href属性:规定链接指向的页面的 URL。
<a href="http:\\www.jirengu.com">饥人谷</a>
10.<ul> 、<li>、<ol>标签
- <ul> 标签定义无序列表。
- <li> 标签定义列表项目。
- <ol> 标签定义有序列表。
- <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
<ul>
<li>tea</li>
<li>milk</li>
<li>coffee</li>
</ul>
<ol>
<li>tea</li>
<li>milk</li>
<li>coffee</li>
</ol>
11.<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签
<h1> - <h6> 标签可定义标题。
<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
12.<main>标签
<main> 标签规定文档的主要内容。
<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。
<main>
</main>
11.<section>标签
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中。
<section>
</section>
12.<span>标签
<span> 标签被用来组合文档中的行内元素。
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
<div>
<span></span>
</div>
13.<p>标签
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
<p>This is some text in a very short paragraph</p>
14.
标签
标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
<p>
<hr>
</p>
15.<dl>、<dt>、<dd>标签
<dl> 标签定义了定义列表(definition list)。
<dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd> (描述列表中的项目)。
<dd> 在定义列表中定义条目的定义部分。
<dt> 标签定义了定义列表中的项目(即术语部分)。
<dl>
<dt>年龄</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>杭州</dd>
<dt>邮箱</dt>
<dd>23333331@qq.com</dd>
<dt>手机</dt>
<dd>13512345678</dd>
</dl>