Hmtl

什么是 HTML？

　　HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。

什么是HTML 标签?

  • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为起始标签和闭合标签
  • 某些 HTML 元素没有结束标签，比如 <br />

　　HTML 标题

　　HTML 标题是通过 ​<h1> - <h6>​ 等标签进行定义的。

　　h1 元素通常用于主标题，而 h2 元素通常用于副标题。

　　还有 h3，h4，h5 和 h6 元素分别表示不同级别的标题。

　   添加换行

　　HTML 中使用​<br>​ 标签换行。

　　<br> 没有结束标签。

　　提示：在写地址信息或者写诗词时 <br> 标签非常有用。

　　注释： 请使用 <br> 标签来输入空行，​而不是分割段落​。

　　定义段落

　　p是“paragraph”的缩写。

　　<p> 标签定义段落。

　　p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间。

　　强调文本

标签描述
​<em>​ 呈现为被强调的文本。<em>强调文本</em>
​<strong>​ 定义重要的文本。<strong>加粗文本</strong>
​<dfn>​ 定义一个定义项目。<dfn>定义项目</dfn>
​<code>​ 定义计算机代码文本。<code>一段电脑代码 print("Hello World")</code>
​<samp>​ 定义样本文本。<samp>计算机样本</samp>
​<kbd>​

定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

<kbd>键盘输入</kbd>
​<var>​ 定义变量。您可以将此标签与 ​<pre>​ 及 ​<code>​ 标签配合使用。 <var>变量</var>

　　定义下标\上标

　　<sub>​ 标签定义下标文本。

　　下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。

　　下标文本能用来表示化学公式，比如 H2O。

　　<sup>​ 标签定义上标文本。

　　上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。

　　上标文本能用来添加脚注，比如 WWW[1]。

　  定义粗体文本

　　注意：

　　根据 HTML 5 的规范，​<b>​ 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。

　　HTML 5 规范声明：标题应该用 ​<h1>-<h6>​ 标签表示，被强调的文本应该 ​<em>​ 标签表示，重要的文本应该用 ​<strong>​ 标签表示，被标记的或者高亮显示的文本应该用 ​<mark>​标签表示。

　　提示：您也可以使用 CSS 的 "font-weight" 属性设置粗体文本。

　  块级元素与行内元素

　　块级元素

　　div、h1~h6、blockquote、dl、dt、dd、form、hr、ol、p、pre、table、ul ...

　　特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省（默认）是它的容器的100%，除非设定一个宽度。

　　功能：主要用来搭建网站架构、页面布局、承载内容。

　　行内元素

　　span、a、b、br、code、em、i、img、input、label、select、textarea ...

　　特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变。

　　功能：用于加强内容显示,控制细节，例如：加粗、斜体等等。

　 元素嵌套

　　在HTML中元素是可以嵌套的。

　　HTML元素嵌套一般遵循以下规定：

  • 块级元素可以包含行内元素或某些块级元素，
  • 行内元素不能包含块级元素，行内元素只能包含其它的行内元素
  • ​h1 - h6​、​p​、​dt​ 这些块级元素，只能包含行内元素

　　以上规定并非强制，不遵循以上规定进行嵌套，代码也是可以被执行的。

　　提示： 
　　行内元素也经常被称为“内联元素”

　　通常被嵌套的块级子元素，需进行换行和缩进，以让代码更加易于阅读。

　　HTML的注释

　　注释是不被程序执行的代码。

　　用于程序员标记代码，方便后期的修改，以及他人的学习时有所帮助。

　　格式: <!-- 在此处写注释 -->

　　你可以使用 <!-- 开始添加注释，并用 --> 结束注释。

　   HTML5 元素介绍

　　HTML5 引入了很多更具描述性的 HTML 元素

　　例如：header、footer、nav、video、article、section等。 

　　这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。

 　　main元素让搜索引擎和开发者瞬间就能找到网页的主要内容

　　添加图片

　　HTML 用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。

　　注意：img是单标签元素, 没有结束标签(闭合标签)。 

　　alt 属性：img元素alt属性中的文本是当图片无法加载时显示的替代文本。

　   给图片添加alt属性

　　img 元素的​alt​ 属性， 是当图片无法显示时的替代显示的文本。

​　　alt ​属性对于盲人或视觉障碍的用户理解图片中的内容非常重要，

　　搜索引擎也会搜索​alt​ 属性来了解图片的内容。

　　总而言之，​alt​ 属性是一个​必需的​属性，为页面上的图片都加上 ​alt ​属性是好习惯。

　　为img元素添加一个 alt 属性 (以下图片路径的图片不存在)：

　  创建外部链接

　　HTML 通过使用 ​<a>​ 标签在 HTML 中创建链接。

posted @ 2022-01-27 09:57  㭌（mou）七  阅读(307)  评论(0)    收藏  举报