html知识点梳理(2020.9.27)

生成H5文档的快捷键:

①在空html文档中输入 ! ②按下tab键。

meta标签使用实例

meta标签使用实例.png

搜索引擎可以查找到的html元素

title(<title>元素不仅可以显示文本,也可以在左侧显示logo等图片。
<meta> (标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。)
h1-h6
strong
em

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素(
标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

条件注释

您也许会在 HTML 中偶尔发现条件注释:

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
<!-- 这是一个注释 -->

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

     <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <hr />
    <p>This is a pargarph</p>
    <p>This is another pargarph</p>

效果如下图:


hr创建水平线.png

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签:
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

HTML 格式化标签

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而,这些标签的含义是不同的:
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

<b> 和 <strong> 有什么区别?应该用哪个?

b: 定义粗体文本。
em:把文本定义为强调的内容。
strong:把文本定义为语气更强的强调的内容

    <b>定义粗体文字</b><br/>
    <em>把文本定义为强调的内容。</em><br/>
    <strong>把文本定义为语气更强的强调的内容</strong><br/>
b.em.strong视觉效果图.png

块级元素:
p,div,ul,ol,table,form
行级元素:
span,a,li,input,img

img:

<img src="url" />
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img> 标签有两个必需的属性:[src 属性]和 [alt 属性]
title属性是对图片的描述与进一步说明。
总结:
1、含义不同:
img标签alt属性是当图片不存在时或加载失败时的替代文字(进行显示);img标签title属性是对图片的描述与进一步说明。
2、在浏览器中的表现不同:
在FF、chrome和IE8+中,当鼠标经过图片时title属性的值会显示,而alt属性的值不会显示;只有在IE6、IE7中,如果img标签没有写title属性,而写了alt属性的时候,alt属性值会进行显示;如果img写了title属性和alt属性的时候,只会显示title属性值。

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

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

img应用实例

一、图片对齐:

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

align="bottom"
align="middle"
align="top"
(在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。)

二、图片浮动

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性,在HTML 4 中 float 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

三、图片链接

<p>创建图像链接:
  <a href="//www.runoob.com/html/html-tutorial.html">
      <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
  </a>
</p>

<p>无边框的图片链接:
  <a href="//www.runoob.com/html/html-tutorial.html">
    <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
  </a>
</p>

四、图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)


创建图像映射.png

a链接

①图片链接

<a href="//www.runoob.com/html/html-tutorial.html">
    <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>

②当前页面链接到指定位置(书签)

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
a链接创建书签.png

③跳出框架

<a href="//www.runoob.com/" target="_top">点击这里!</a> 

④创建电子邮件链接

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>

单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
eg:

<head>
  <base href="http://www.runoob.com/images/" target="_blank">
</head>

div和span的区别

1、<div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<span> 元素是内联元素,可用作文本的容器。
span没有结构上的意义,只是单纯的应用样式,其他元素不适合时,就可以使用span元素。span可以作为div的子元素,但div不能是span的子元素,如果span中出现div则不符合ws3c页面标准。
2、<div> 元素和<span>元素都没有特定的含义。但由于div属于块级元素,浏览器会在其前后显示折行。
span元素前后不会换行,宽度由被包围的内容宽度决定(不建议给span设置宽度属性width,可以给span设置margin值,设置与父元素之前的距离。)
3、如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的一个常见的用途是文档布局。(它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。)
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
span可以通过css声明(display:block)转换为块元素,想对一行中的文字或图片单独设置样式,不需要换行的条件下又不影响其他行内内容,span可以很好解决这些问题。

网站布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

<script>
  document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>