HTML所有知识点全面复习

欢迎大家拜访我的:个人博客

什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:

!DOCTYPE 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的,以下方式均可:
. doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML,因此不要求引用 DTD。
2. 对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。

HTML头部head

元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: ,

HTML title元素

标签定义了不同文档的标题。 <title> 在 HTML/XHTML 文档中是必须的。 <title> 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时,显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 一个简单的 HTML 文档:

HTML base 元素

标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML link 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML meta 元素

meta标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为搜索引擎定义关键词:

<meta name="description" content="免费 Web & 编程 教程">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如:name=“value”。

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John “ShotGun” Nelson’

标题

HTML 标题(Heading)是通过<h1 - h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 p来定义的.

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

HTML 链接是通过标签 a> 来定义的.

<a href="https://www.runoob.com">这是一个链接</a>

HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

HTML 图像

<img src="/images/logo.png" width="258" height="39" />

HTML 图像- 图像标签( img)和源属性src

在 HTML 中,图像由 标签定义。

img 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

<img src="boat.gif" alt="Big Boat">

HTML 图像- 设置图像的高度与宽度

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

更多图像标签
在这里插入图片描述

HTML标题

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。

1. 一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合)
2. 标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)

HTML中如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用

在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的 CSS 教程 学习更多的 CSS 知识。

内联样式

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 表格

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>

HTML 表格表头

表格的表头使用 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML 表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 列表

HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用

  • 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于

  1. 标签。每个列表项始于
  2. 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML的块级元素和内联元素

HTML 块级元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例:

,

,

  • ,

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: , , ,

HTML
元素

HTML

元素是块级元素,它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。

HTML 元素

HTML 元素是内联元素,可用作文本的容器

元素也没有特定的含义。

当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
在这里插入图片描述

HTML 表单和输入

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签()。

文本域(Text Fields)

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

在这里插入图片描述

密码字段

密码字段通过标签 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

在这里插入图片描述

单选按钮(Radio Buttons)

标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述

复选框(Checkboxes)

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

在这里插入图片描述

提交按钮(Submit Button)

定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在这里插入图片描述

HTML 框架Iframe

iframe语法

该URL指向不同的网页

<iframe src="URL"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框

HTML 颜色

颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:
在这里插入图片描述
1600万种不同颜色
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果,从0到255的红色,同时设置绿色和蓝色的值为0,随着红色的值变化,不同的值都显示了不同的颜色。

HTML 脚本

javaScript 使 HTML 页面具有更强的动态和交互性。

HTML

定义一个页面或是区域的头部
定义一个区域
定义一个页面或是区域的底部
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bU36HeeY-1615687625596)(C:\Users\47302\AppData\Roaming\Typora\typora-user-images\image-20210314093100367.png)]

下面内容转载自 :https://www.cnblogs.com/progor/p/8945071.html

结构化标签

header

  • 功能:header标签定义页面的页眉信息。【主要用于定义结构,一般来说也可以使用其他方式来创建头部,但使用header就标注出了这个结构是头部,比其他多出了语意】
  • 例子:比如一些网上商城的顶部logo信息
<body>
    <header id="header" class="" style="background-color: orange;">
        <div style="float:left">
            Logo
        </div>
        <div style="float:right">
            <span>登录</span>
            <span>登录</span>
        </div>
        <div style="clear:both"></div>
    </header><!-- /header -->
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RKXCl1s-1615687625598)(C:\Users\47302\AppData\Roaming\Typora\typora-user-images\image-20210314093259599.png)]

nav

  • 定义导航链接。【主要用于定义结构,一般来说也可以使用其他方式来创建导航,但使用nav就标注出了这个结构是导航,比其他多出了语意】
<nav class="">
        <ul>
            <li><a href="#">食品</a></li><!--
         --><li><a href="#">电器</a></li><!--
         --><li><a href="#">电子数码</a></li><!--
         --><li><a href="#">书籍</a></li>
        </ul>
    </nav>

article

  • article比p,比div多了语意,虽然理论上都可以使用div来实现,但多出了语意。【比如一本书可以一章可以有多个段落,但可以有几章,而article的语意就像章节,它的内容是独立的,而不是仅仅的“段落”】
<article>
        <header id="header" class="">
            头部:菜鸡互啄区
        </header><!-- /header -->
        <h2>是道德的沦丧,还是。。。</h2>
        贪玩蓝月,你没玩过的全新版本
        <footer>
            底部:欢迎评论
        </footer>
    </article>

footer

  • 功能:用来定义页尾。【主要用于定义结构,一般来说也可以使用其他方式来创建页脚,但使用footer就标注出了这个结构是页脚,比其他多出了语意】
<footer>
        <div style="float:left;margin-right: 10px;">
            <div style="font-weight: bold;">合作伙伴</div>
            <div>支付宝</div>
            <div>baidu</div>
        </div>
        <div style="float:left">
            <div style="font-weight: bold;">帮助信息</div>
            <div>企业信息</div>
            <div>联系方式</div>
        </div>
    </footer>

section

  • 功能:定义网页的中的“区块”【比p多出语意“区块”,而又比div少出样式之意,div更多的用来定义样式,而session可以用来做结构划分】【如果article是一篇文章的话,那么session可以某块围绕一个论点的文章内容】
<section>
        <h3>小标题:如何学习马克思</h3>
        <p>...巴拉巴拉</p>
    </section>

aside

  • 功能:aside标签定义其所处内容之外的内容。【aside有语意“其他的内容”,比如说一篇文章有一些其他的相关内容,比如谈到贝叶斯模型,但本文不是主要谈论贝叶斯模型而仅仅以贝叶斯作为一个小点,而又想给出“其他的内容”来描述贝叶斯模型的时候,就可以使用aside】
<section>
         <p>xxx可以用到贝叶斯模型、马尔可夫模型xxx</p>
        <aside>
            <h3>贝叶斯模型</h3>
            <p>贝叶斯模型是xxxx</p>
        </aside>
        <aside>
            <h3>马尔可夫模型</h3>
            <p>马尔可夫模型是xxxx</p>
        </aside>
    </section>

媒体标签

audio

  • 功能:可以用来定义音乐。

  • 属性:

    • src:定义要播放的音乐的url地址
    • contorls:定义是否使用播放控件(控件有声音大小、停止播放等按钮)image【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
    • autoplay:定义音乐自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
    • loop:定义循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】
<audio src="一眼万年.mp3" controls autoplay ></audio>

有时候可以使用“兼容模式”,由于有些网页不支持某些格式或无法播放某音乐,所以需要“多个源”

<audio loop controls>
        <source src="bg.mp3"> <!-- 当第一个无法播放时,播放第二个源的音乐 -->
        <source src="一眼万年.mp3">
    </audio>

vedio

  • 功能:定义一个视频

  • 属性:

    • src:指定视频的url
    • controls:定义是否使用播放控件(控件有声音大小、停止播放等按钮)image【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
    • autoplay:定义视频自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
    • loop:定义视频循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】
    • 其他:可以设置标签的width,heigh
<video src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4"  controls></video>

同样的,有时候可以使用“兼容模式”,由于有些网页不支持某些格式或无法播放某视频,所以需要“多个源”

<video autobuffer autoloop loop controls>
        <source src="0.mp4">
        <source src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4">

    </video>

新增的input属性(常用的):

新增的type值:

    • date:

      • 功能:可以选择日期image
      • 示例:

复制代码

<input type="date" />
    • time:

      • 功能:可以选择时间的输入框image
      • 示例:

复制代码

<input type="time" name="selecttime" >
  • month:

    • 功能:可以选择年份月份的输入框image

    • 示例:

      复制代码

      <input type="month" name="selectmonth" >
      
  • week:

    • 功能:可以选择XX年XX周的输入框image

    • 示例:

      复制代码

      <input type="week" name="selectweek" >
      
  • search

    • 功能:比普通的文本框增加了一个可全部删除的按钮image【可以点击右边的x来清除所有内容】

    • 示例:

      复制代码

      <input type="search" >
      
  • range

    • 功能:这是一个可拖动的滑动框image

    • 属性:

      • min:定义滑动块的最小值
      • max:定义滑动块的最大值
      • value:定义默认值
      • step:定义最小滑动距离
    • 示例:

      复制代码

      <input type="range" min="0" max="10" step="1">
      
  • url

    • 功能:这个输入框能校验url的合法性image【当提交的时候才会检测】

    • 示例:

      复制代码

      <form action="" method="post" >
              <input type="url" >
              <input type="submit" >
          </form>
      
  • email

    • 功能:这个输入框能够校验email的合法性image

    • 示例:

      复制代码

      <form action="" method="post" >
              <input type="email" >
              <input type="submit" >
          </form>
      
  • number

    • 功能:这个输入框能校验输入的是否全部是数字image

    • 示例:

      复制代码

      <form action="" method="post" >
              <input type="number" >
              <input type="submit" >
          </form>
      

新增的属性

  • list

    • 功能:与datalist配合使用,用来显示输入框的提示选项(已经在datalist中演示了怎么使用了)
  • placeholder

    • 功能:设置输入框的提示image【图中的用户名会随着输入自动消失,如果没有内容就又会显示出来】

    • 示例:

      复制代码

      <form action="" method="post">
              <input type="text"  placeholder="用户名">
              <input type="submit" >
          </form>
      
  • multiple

    • 功能:设置可以选择多个值

    • 示例:

      复制代码

      <input type="file" multiple="multiple" >
      
  • required

    • 功能:设置输入框为必填框【当提交的时候,如果没有填上就会显示成红色或者给予提示】image

    • 示例:

      复制代码

      <form action="" method="post">
              <input type="text"  placeholder="用户名" required="required">
      
              <input type="submit" >
          </form>
      
  • autocomplete

    • 功能:设置下次是否自动完成【如果设置了,那么下次输入时会有上次输入的提示】image

    • 【注意:输入框需要name属性才能使得autocomplete生效】

    • 也可以把autocomplete放到form中作为属性,代表整个表单都可以autocomplete,(然后也可以在某个输入框中设置autocomplete="off"来特定的不autocomplete)

    • 示例:

      复制代码

      <form action="" method="get" autocomplete="on" >
              <input type="text"  placeholder="用户名" required="required" autocomplete="on" name="username">
              <input type="submit" >
          </form>
      
  • autofocus:

    • 功能:设置是否自动获取焦点

    • 示例:

      复制代码

      <form action="" method="post" >
              <input type="text"  placeholder="用户名" required="required" autofocus="autofocus">
      
              <input type="submit" >
          </form>
      
  • pattern:

    • 功能:可以用来验证输入框的输入是否合法【考虑到行为样式结构相分离,像这样的表单验证应该由javascript完成,所以这里不介绍】
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页