HTML 基本语法

ops/2024/12/14 23:42:15/
htmledit_views">

一、HTML 基本语法

在 HTML 中,标签可以分为单标记指令和双标记指令。

一、单标记指令

如<br/>、<hr/>等单标签,不设置属性值时可直接使用。例如<br/>标签是换行标签,相当于操作系统中的\r\n操作符,浏览器渲染后会在当前位置回车操作,换到下一行继续显示内容。同时它也支持空行换行,是常规页面排版很常用的标签之一。也有设置属性值的情况,如<hr width="800"/>。在 HTML5 的版本中、<area>、<base>、<link>这三个单标记是已经报废无效了,而在 HTML4 中是可以继续使用的。使用单标记时不同的 HTML 版本对是否需要带斜杠是有不同的要求的。HTML5:斜杠是可选的。HTML4:斜杠不可选的。但是,它被 W3C 的 HTML 验证器接受了。XHTML:斜线是必需的。单标记指令还有<meta>、<img>、<input>等。<meta>标签是 “有关内容的信息”,它们位于文档的<head>中,用于将页面信息传递给浏览器。有许多不同的<meta>标签,你可以在网页上使用。<img>标签用于将图形图像添加到网页,语法为<img src="图片名称(路径)" witdh="宽度" height="高度">。<input>标签用于从访问者捕获信息的表单元素,有许多有效的输入类型。

二、双标记指令

由<起始标记>内容</结束标记>构成,如<title>…</title>。也可设置属性值,如<body bgcolor="red">…</body>、<font size="7">…</font>。例如标题标签<h1>到<h6>,一级标题最大且只能用一次,所以一般从二级标题开始使用,语法为<h1 align="center">标题文本</h1>,其中align属性有left(设置标题文字左对齐,也作为默认值)、center(居中对齐)、right(右对齐)三个属性值。段落标签<p>,语法为<p align="对齐文本">这就是文本!</p>。还有<div>标签,意为 division,分割,区域是一个容器,用于网页的布局和规划,div中还可以嵌套多层div。表格标签<table>,表格的结构主要分为四个部分:表格标题,头部结构,表格内容,脚注。定义表格为<table>,表格标题为<caption>表格标题</caption>,头部结构为<thead><th>头部结构内容</th></thead>,表格内容为<tbody><tr><td>内容结构,一个 tr 标签代表一行,td 标签代表一个单元格</td></tr></tbody>,脚注为<tfoot><tr><td>脚注内容</td></tr></tfoot>。列表标签主要划分三种类型,即:有序列表,无序列表,自定义列表。有序列表语法为<ol>,其中较为常用的属性有reversed,star,type三个属性。reversed定义列表为降序排列,star取值数值,可定义有序列表的开始值,type取值不同表示类型,即 1 或 a 这种,顺序变成 1234 或者 abcd。无序列表语法为<ul>,常用属性一般只有type属性,该属性取值有三种,即disc(表示实心圆点,为默认值)、circle(表示空心圆点)、square(表示实心方块)。自定义列表语法为<dl>,<dt>标签是指 key:value 中的 key 值,<dd>标签是指 key:value 中的 value 值。表单标签结构主要有三个,分别为form,input,button,表单中的<input>标签也可以实现button按钮标签的功能特点,但仅推荐在特殊情况下使用。超文本和超链接使用<a>标签,其中<a>标签常用的属性有四个,分别为href,target,rel, download。href用于指定链接的目标 URL 地址,可以是绝对或相对地址,实现页面跳转或资源访问。target决定链接如何打开,常见取值有_blank(新窗口打开)、_self(当前窗口打开)、_parent(父级窗口打开)、_top(顶层窗口打开),用于控制链接的打开方式。rel指示链接与当前文档之间的关系,如nofollow(搜索引擎不跟踪链接)、noopener(防止跨窗口引用),有助于 SEO 优化和提升网站安全性。download指定链接目标资源下载,浏览器会将文件下载到客户端而不是在浏览器中打开,实现文件下载功能。框架标签<iframe>的核心作用是在一个页面中嵌入另一个 HTML 页面,属性包括src,指定嵌入的网页地址,可以是相对或绝对路径。

二、HTML 文档结构

(一)整体结构

  1. 文档类型声明:说明文档是 HTML 文档,如 HTML5 的声明为。这一声明是 HTML5 文档的开始标志,告诉浏览器该文档遵循 HTML5 规范。
  1. <html>标签对:是 HTML 文档的根元素,包含整个文档内容。<html>标签是整个 HTML 文档的根节点,它包含了<head>和<body>两个主要部分。属性方面,可通过 lang 属性指定文档的语言,如`<html lang="zh">`表示中文文档。xmlns 属性指定文档的 XML 命名空间,默认值是"http://www.w3.org/1999/xhtml"。
  1. <head>标签对:定义文档的元数据,包含<title><base><link><meta><style><script>等辅助性标签。
    • <title>标签用于定义文档的标题,它会显示在浏览器的标题栏中。例如`<title>我的网页标题</title>`。
    • <base>标签为页面上的所有链接规定默认地址或默认目标。
    • <link>标签定义文档与外部资源的关系,最常见的用途是链接样式表。如`<link rel="stylesheet" type="text/css" href="/html/csstest1.css">`。
    • <meta>标签提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。例如`<meta name="keywords" content="HTML,CSS,JS">`。
    • <style>标签用于定义文档的内部样式表。
    • <script>标签用于引入 JavaScript 脚本。
  1. <body>标签对:定义文档的主体内容,包含众多 HTML 标签。<body>标签包含了文档的主要内容,如文本、图像、链接等。<body>标签有很多属性可设置文档背景颜色、文本颜色等。例如`<body bgcolor="red">`设置背景颜色为红色,`<body text="blue">`设置文本颜色为蓝色。

(二)各部分详解

  1. <head>标签:包含页面标题、字符编码、引用的样式表和脚本等。如<meta charset=&#x22;UTF-8&#x22;>。
    • 页面标题由<title>标签定义,它是<head>标签中的重要元素,用于为文档提供一个简洁明了的标题,方便用户识别和搜索引擎索引。
    • 字符编码通常使用<meta charset="UTF-8">来指定,确保文档中的字符能够正确显示,避免出现乱码问题。
    • 引用样式表可以通过<link rel="stylesheet" href="styles.css">来实现,将外部的 CSS 文件引入到文档中,以实现对页面样式的统一管理和美化。
    • 引用脚本可以使用<script src="script.js"></script>,将 JavaScript 文件引入到文档中,为页面添加交互功能和动态效果。
  1. <body>标签:包含文档的主要内容,如文本、图像、链接等,有很多属性可设置文档背景颜色、文本颜色等。
    • 文本可以通过各种文本标签来呈现,如段落标签<p>、标题标签<h1>到<h6>等。
    • 图像可以使用<img>标签引入,如`<img src="image.jpg" width="300" height="200">`。
    • 链接可以使用<a>标签创建,如`<a href="Example Domain">链接文本</a>`。
    • 通过设置<body>标签的属性,可以改变文档的外观。例如,设置 bgcolor 属性可以改变背景颜色,设置 text 属性可以改变文本颜色。超链接文字的颜色可以通过设置 link、vlink 和 alink 属性来分别定义未访问过的超链接颜色、已访问过的超链接颜色和鼠标点击超链接时的颜色。文档边缘与窗口的距离可以通过设置 topmargin、leftmargin、rightmargin 和 bottommargin 属性来调整。

三、HTML 常用标签

(一)标题标签

  1. “<h1> ” 表示字体加粗,每个标题标签括中的文字都显示占取一行,随着 h 后面的数字增大,标题越来越小。标题标签常用于网页中文章的标题,其特点是加粗加黑显示,与其它行有一定的行间距且单独占用一行。例如:<h1>一级标题</h1>、<h2>二级标题</h2>、<h3>三级标题</h3>等。

(二)段落标签

  1. “<p></p>” 表示标签内部的内容是以段落的形式呈现。段落标签由开始标签<p>和结束标签</p>组成,开始和结束标签之间的内容会被视为一个段落。浏览器内置的样式会在段落的上下自动添加一定的空白区域。例如:<p>这是一个段落。</p>。段落标签中的文本会按照一定的格式显示,多个连续的空格和换行在显示时会被处理成特定的格式,如果想要在段落中换行,需要使用专门的换行标签<br />。

(三)换行标签

  1. “” 表示前后文本强制换行。换行标签属于自闭合标签,不需要对应的结束标签<br>。例如在段落中使用换行标签:<p>这个<br />段落<br />演示了分行的效果</p>。

(四)文本格式化标签

  1. 字体加粗:“<strong></strong>” 或者 “<b></b>”。用于将文本加粗显示,吸引读者的注意。例如:<strong>重要文本</strong>或<b>加粗文本</b>。
  1. 字体倾斜:“<em></em>或者 “<i></i>”。使文本以斜体显示,通常用于强调或表示特殊含义。例如:<em>强调文本</em>或<i>斜体文本</i>。
  1. 字体加删除线:“<del></del>或者 “<s></s>”。为文本添加删除线效果。例如:<del>删除文本</del>或<s>带删除线文本</s>。
  1. 字体加下划线:“<ins></ins>或者 “”。在文本下方添加下划线。例如:<ins>下划线文本</ins>或<u>带下划线文本</u>。

(五)<div>和标签

  1. 都是用来布局的,<div>内的文本内容独占一行,而一行可以有多个。<div>标签常用于网页的布局和规划,是一个大盒子,可作为容器来划分页面区域。例如:<div>这是一个大盒子,用于布局,一行只能放一个。</div>。<span>标签是一个小盒子,用于布局,一行可以有多个。例如:<span>这是一个小盒子,可在一行中放置多个。</span>。

(六)图像标签

  1. <img />是单标签,有很多属性丰富图像内容,如 src、alt、title、width、height、border 等。图像标签用于在网页中插入图像,其中 src 属性是必须的,用于指定图像的路径,可以是本地路径(包括绝对路径、相对路径)或网络路径。alt 属性是图片替代文本,在图片未加载出来时显示提示信息,同时也用于搜索引擎搜索。title 属性是提示文字,鼠标移入图片时会显示。width 和 height 属性用于设置图片的宽度和高度,可以只设置其中一个属性,另一个属性会自动按比例显示。border 属性用于为图像添加边框。例如:<img src="image.jpg" alt="图片描述" title="鼠标悬停提示" width="300" height="200" border="1">。

(七)超链接标签

  1. 格式:“<a href="" target=" "> 文本信息</a>”,href 为必须属性,target 表示网页的跳转方式。超链接标签<a>用于创建链接,href 属性指定链接的目标地址,可以是网页、文件、图片等。target 属性决定链接如何打开,常见取值有_blank(新窗口打开)、_self(当前窗口打开)、_parent(父级窗口打开)、_top(顶层窗口打开)。例如:<a href="Example Domain" target="_blank">链接文本</a>。
  1. 链接分类:外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接。
    • 外部链接:必须以http://开头,如<a href="百度一下,你就知道">百度</a>。
    • 内部链接:直接写网页名称即可,如<a href="first_page.html">首页</a>。
    • 空链接:如果当时没有确定链接目标时,可以用<a href="#">首页</a>。
    • 下载链接:href 里面地址是一个文件或压缩包,点击会下载该文件。
    • 网页元素链接:网页中的各种元素如文本、图像、表格等都可以添加超链接。
    • 锚点链接:点击链接,可以快速定位到页面中的某个位置。先在链接文本的 href 属性中设置属性值为#名字的形式,如<a href="#two">第二集</a>,然后在目标位置标签中添加一个 id 属性等于刚才的名字,如<h3 id="two">第二集介绍</h3>。

(八)表格标签

  1. 大致格式:<table><tr><tb>文本信息 1</tb><tb>文本信息 2</tb></tr></table>。表格标签<table>用于创建表格,<tr>表示表格的行,<tb>表示表格的单元格。但通常使用<td>(表格数据单元格)和<th>(表头单元格)代替<tb>。
  1. 表头单元格标签:用<th>文本内容</th>书写,相当于替换掉 td 标签来加强显示功能。表头单元格中的文本通常加粗居中显示。
  1. 表格结构标签:用<thead>头部文本</thead>和<tbody>身体标签</tbody>划分表格为头部和身体。这样可以使代码的可读性更强,便于管理表格的不同部分。
  1. 合并单元格:跨行合并用rowspan = “合并单元格的个数”,跨列合并用colspan = “合并单元格的个数”。例如:<td rowspan = "2">...</td>表示跨行合并两个单元格。

(九)列表标签

  1. 无序列表:<ul>标签表示 HTML 页面中的无序列表,其中的<li>来存放列表项。无序列表中的各个列表项之间没有顺序之分,<ul>标签中只能嵌套<li>标签,但是<li>标签可以存放其他标签。例如:<ul><li>列表项1</li><li>列表项2</li></ul>。无序列表的项目符号可以通过 CSS 设置去除,如li {list-style: none;}。
  1. 有序列表:<ol>标签表示 HTML 页面中的有序列表,其中的<li>来存放列表项。各个列表项有顺序之分,<ol>标签中只能嵌套<li>标签,但是<li>标签可以存放其他标签。格式与无序列表相同,有序列表会自动标号。
  1. 自定义列表:<dl>标签表示定义列表,<dt>标签定义名字,<dd>标签定义名字解释。<dl>标签中只能包含<dt>和<dd>标签。例如:<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>。

(十)表单标签

  1. 由表单域、表单控件和提示信息三部分组成。
  1. 表单域:用<form>标签来定义表单域,包含 action、method、name 属性。<form>标签会将范围内的表单元素信息提交给服务器。例如:<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>。
  1. 表单控件:有 input 输入表单元素、select 下拉表单元素和 textarea 文本域元素等。
    • <input>标签:用于收集用户信息,常见的有账号、密码输入框。格式为<input type="属性值" />,type 的属性值有很多种,例如当账户输入时取 "text";当密码输入时取 "password";单选按钮取 "radio";多选按钮取 "checkbox";提交按钮取 "submit";重置按钮取 "reset";上传文件按钮取 "file"。单选按钮只有都同时定义相同的 name,才能实现出多选一的效果。
    • <select>标签:用于定义下拉表单元素,可创建选项菜单,菜单内的内容选项标签为<option>,可以由<optgroup>标签将内容选项进行分组,默认是单选,属性multiple为true时,为多选。例如:<select><option>选项1</option><option>选项2</option></select>。

http://www.ppmy.cn/ops/141944.html

相关文章

ChatGPT大模型 创作高质量文案的使用教程和案例

引言 随着人工智能技术的飞速发展,大语言模型如 ChatGPT 在创作文案、生成内容方面展现出了强大的能力。无论是个人用户还是企业用户,都可以利用 ChatGPT 提高工作效率、激发创意、甚至解决实际问题。本文将详细介绍 ChatGPT 如何帮助创作各类高质量文案,并通过具体案例展示…

快速上手Neo4j图关系数据库

参考视频&#xff1a; 【IT老齐589】快速上手Neo4j网状关系图库 1 Neo4j简介 Neo4j是一个图数据库&#xff0c;是知识图谱的基础 在Neo4j中&#xff0c;数据的基本构建块包括&#xff1a; 节点(Nodes)关系(Relationships)属性(Properties)标签(Labels) 1.1 节点(Nodes) 节点…

Oracle最佳实践-优化硬解析

前段时间参加oracle CAB&#xff0c;oracle高级服务部门做了一个数据库最佳实践的报告&#xff0c;其中就有一项就是解决未使用绑定变量但执行次数很多的SQL&#xff1b; 对于一个数据库来说如果不知道该如何优化&#xff0c;那么最简单最有效的优化就是减少硬解析&#xff0c;…

MBox20 5G智能网关

在当今全球工业领域被数字化和智能化浪潮深刻影响的时代背景下&#xff0c;5G工业智能网关作为工业互联网架构中的核心设备&#xff0c;正发挥着至关重要的桥梁与纽带作用&#xff0c;为工业企业的转型升级和创新发展注入源源不断的动力。我们自主研发推出了一款集成交换机功能…

昇腾pytorch 混合精度/半精度训练不生效

现象 在昇腾NPU卡上训练&#xff0c;不管是否在代码中添加with autocast()&#xff0c;显存占用都没变化。 原因分析 原因是&#xff0c;错误地使用了torch.cuda.amp.autocast&#xff0c;这个调用在cuda环境能生效&#xff0c;但在昇腾环境不生效&#xff0c;错误示例如下&…

【速览】设计模式(更新中)

目录 模式的历史设计模式是什么设计原则 SOLID1. 单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09;2. 开闭原则&#xff08;Open/Closed Principle, OCP&#xff09;3. 里氏替换原则&#xff08;Liskov Substitution Principle, LSP&#xff09;4. 接…

QT配置boost库

1. 下载解压 boost官网 boost1.86 2. QT.pro添加路径&#xff1a; CONFIG c17 INCLUDEPATH “D:\boost_1_86_0” QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17DEFINES QT_DEPRECATED_WARNINGS INCLUDEPATH "D:\boost_1_86_0"…

Python面试常见问题及答案1

一、基础语法部分 问题1&#xff1a; Python中的列表&#xff08;List&#xff09;和元组&#xff08;Tuple&#xff09;有什么区别&#xff1f; 答案1&#xff1a; 列表是可变的&#xff08;mutable&#xff09;&#xff0c;可以对其进行增删改操作。例如&#xff1a; my_l…