最简单有效的HTML语法大全

小马敲代码
108 阅读10分钟

HTML

什么是网站

2024-02-10-22-44-14-image.png

可以说，网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问

HTML&CSS&JavaScript

2024-02-13-10-02-03-image.png

HTML是什么

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页

html编辑语法

2024-02-10-22-57-12-image.png

2024-02-10-23-01-00-image.png

html语法格式

2024-02-10-22-58-27-image.png

什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：attr="value" atter表示属性名，value表示属性值，属性值必须使用双引号" "或者单引号' '包围

常见通用属性

1. id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：

  • 如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
  • 如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

2. class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值

3. title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值

1.标题

<h1> ---<h6>

2.段落

<p>内容</p>

  • 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个；
  • 如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格。

如果想在段落内换行，需要专门的换行标签<br/>

格式化文本格式化的标签

2024-02-11-22-56-57-image.png

超链接标签

语法格式

<a href="url"  target="opentype">链接文本</a>

herf属性

2024-02-12-09-53-28-image.png

引用路径格式

既可以是相对路径也可以是绝对路径

相对路径：

2024-02-12-10-02-15-image.png

target属性

2024-02-12-10-05-37-image.png

绝大多数情况下，target属性要么不写，保持默认的_self,要么将它的值设为_blank，在新窗口打开页面

跳转到页面顶部、底部、id处

可以给标题添加id属性，然后调用href=”#id属性“跳转

img标签

语法格式

2024-02-12-22-14-09-image.png

  • src是必选属性，是sourse的简称，用来指明图片的地址。可以用相对路径也可以用绝对路径

  • alt是可选属性，用来定义图片的描述信息，当某些原因导致土拍你无法加载时，就会显示alt属性中的信息

img标签上还可以用width和height属性来指定图片的高度和宽度

width = ”“， height = ”“

除此之外还可以用style属性

style = "width: 数字px; height: 数字px;"

建议

2024-02-12-22-21-23-image.png

图片映射

图像映射允许您在一个图片中定义超链接，实现思想就是在图像中划分一些区域，并在这些区域中定义超链接。例如，我们可以按照地图的划分为每个国家或城市所在的区域定义超链接。

2024-02-12-22-47-46-image.png

table标签

用来定义表格

2024-02-12-22-52-51-image.png

HTML还允许使用caption标签来表示表格标题，标题在表格第一行并居中显示

单元格的合并

  • rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
  • colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

具体格式

<td rowspan="n">单元格内容</td>

<td colspan="n">单元格内容</td>

n是一个整数，表示要合并的行数或者列数

提示 ：rowspan和colspan都是标签的属性

2024-02-12-23-17-16-image.png

列表标签<ul>``<ol>``<dl>

  • 有序列表，使用<ol>+<li>

  • 无序列表，使用<ul>+<li>

  • 定义列表，使用<dl>+<dt>+<dd>

  1. 有序列表

2024-02-13-09-46-34-image.png

  1. 无序列表 2024-02-13-09-57-32-image.png

  2. 定义列表

2024-02-13-09-58-37-image.png

表单<form>标签

格式：

<from action = "URL";URL" method = "GET|POST">
表单中其他标签
</from>

属性说明：

  • action属性用来指明将表单提交到哪个界面

  • method属性表示使用哪个方式提交数据

    • GET：用户点击提交按钮，提交信息会显示在页面的地址栏。一般情况下，GET提交方式中不建议包含密码，因为密码被提交到地址栏，不安全

    • POST：如果表单包含密码这种敏感信息，建议使用POST方式进行提交，这样数据会传送到后台，不显示在地址栏，相对安全

表单属性

2024-02-13-21-44-39-image.png

表单控件

2024-02-13-21-45-32-image.png

注释写法

  1. 单行注释

<!-- 内容 -->

  1. 多行注释
<!-- 
内容
-->

缩略语

<abbr> 属性可以与title属性结合当用户鼠标置于缩写词下就会显示完整信息

HTML嵌入CSS样式

2024-02-13-21-59-52-image.png

  1. 行内样式

写在标签的style属性中

缺点：

2024-02-13-22-02-20-image.png

  1. 内嵌形式

通过将CSS写在网页源代码的头部，即在和之间，通过使用标签将其包围，特点是只能在此页中使用

  1. 链接式

链接式通过 HTML 的 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

好处：

2024-02-13-22-09-57-image.png

  1. 导入样式

导入样式使用 @import 命令导入外部样式表。导入样式有 6 种书写方式

- @import daoru.css;
- @import 'daomxss';
- @import "daoru.css";
- @import url(daoru.css);
- @import url('daoru.css');
- @import url("daoru.css");

块级元素和行内元素

块级元素

块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是<div>，此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~<h6>等。

块级元素一般都具有特定的语义，可以使代码的可读性更强。

行内元素

内联元素也可以称为行内元素，行内元素中最常用的是<span>，此外还有<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>等。

内联元素往往带有某种特殊的显示效果，可以代替部分 CSS 样式，非常实用，例如：

  • <b>和<i>标签可以修饰字体；
  • <sub>和<sup>两个标签分别用来定义下标文本和上标文本。

两个重要标签

  1. <div>标签

<div> 是非常重要的块级标记，在网页布局（Layout）方面发挥着重要的作用，使用<div>我们可以定义页面的各个部分，通过与 CSS 相结合可以实现各种各样的效果.<div> 标签及其包围的内容可以看做网页的一个板块，

标签本身并没有什么特殊的显示效果，需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置，从而达到对板块布局的目的。

  1. <span>标签

HTML 中的<span>标签是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。

网页布局

标签适用板块

2024-02-13-22-23-47-image.png 2024-02-13-22-24-35-image.png

HTML<iframe>标签：内联框架

HTMl 标签用来定义一个内联框架，使用它可以将另一个网页嵌入到当前网页中。 标签会在网页中定义一个矩形区域，浏览器可以在这个区域内显示另一个页面的内容。

<iframe> 标签的语法格式如下：

<iframe src="url" width="m" height="n"></iframe>

src 属性用来指定要嵌入的网页的地址；width 和 height 属性用来指定框架的宽度和高度，默认单位是像素，当然您也可以使用百分比。

HTML 标签不利于搜索引擎抓取页面内容，对 SEO 具有负面效果，在现代 Web 设计中不建议使用

2024-02-13-22-31-49-image.png

HTML<head>标签

HTML 中的 标签是所有头部标签的容器，这些头部标签用来定义有关 HTML 文档的元数据（描述数据的数据）以及所需资源的引用（例如 CSS 样式文件、JavaScript 脚本文件），对文档能够在浏览器中正确显示起到了非常重要的作用。根据我们的需求，可以在 HTML 头部定义大量的元数据，也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分，但其中的内容并不会显示在浏览器中。

在 标签中可以使用的头部标签有 、、、、、 和 等

  1. <title>标签
标签用来定义 HTML 文档的标题，只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 <title> 标签，并且 <title> 标签必须放置在 <head> 标签中。 注意，在 标签内部仅允许包含纯文本内容，不能包含其他 HTML 标签。
  1. <base>标签
标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀

注意，HTML 文档中的 标签必须出现在任何引用外部资源的标签之前，而且一个 HTML 文档中仅允许定义一个 标签。

  1. <link>标签
标签经常用于引用外部 CSS 样式表， 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径

HTML标签可以包含任意数量的

  1. <style>标签

使用 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 标签中定义的样式仅对当前 HTML 文档有效。

  1. <meta>标签

标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。 标签定义的数据并不会显示在页面上，但却会被浏览器解析。

  • 定义字符集

<meta charset ="UTF-8">charset属性用来指定HTML文档的字符编码

  • 定义页面描述

<meta name="description" content="内容">

定义页面的描述信息有利于搜索引擎的搜索。

定义文档标题，name=“desciption”定义文档描述，描述的长度通常大于标题
  • 定义关键字

<meta name = "keywords" content = "内容"

关键字用来为搜索引擎提供与页面有关的信息

  • 定义页面作者

<meta name = "author" content = "马旭">

通过某些内容管理系统可以自动提取作者信息

  • 刷新页面

<meta http-equiv = “refresh” content = “30”>

上例中的代码用于向浏览器发送一个指令，使浏览器在经过指定的时间间隔（30 秒）后自动刷新页面。在 content 属性中除了可以指定时间间隔外，还可以再指定一个链接，这时页面将在指定的时间后重定向到链接所指向的页面，

  1. <scipt>标签

script标签用来定义JavaScript脚本

  1. <noscript>标签

当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了

avatar
文章
阅读
粉丝