html简述——part1

news2024/11/26 6:01:48

HTML概述

        HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言,具体指超文本标记语言。它不是一种编程语言,而是一种标记语言,用于描述网页的结构和内容。通过HTML,开发者可以定义网页的标题、段落、链接、图像、列表、表格、表单等各种元素,以及这些元素在网页上的布局和样式。

超文本:页面内可以包含图片,链接,声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何来显示)

浏览器通过看不同的HTML 标签,解析成我们看到的网页

HTML基本语法

HTML写网页的代码的基本结构:

 HTML中的常见标签

标签结构

<开始标签> 标签体 </结束标签>      闭合标签(封闭的区间) 双标签

<标签名 />        自闭和标签,没有修饰的内容,只是完成某个功能 单标签

1. 基础标签

  • <!DOCTYPE html>:定义文档类型和版本,告知浏览器当前文档使用的是HTML5。
  • <html>:HTML文档的根元素。
  • <head>:包含了所有的头部标签元素,如<meta><title><link><style>等,这些元素不会在网页上直接显示,但会影响网页的渲染和显示方式。
  • <title>:定义浏览器工具栏的标题,当网页添加到收藏夹时的标题。
  • <body>:包含了可见的页面内容,如文本、图片、音频、视频等。

2. 标题和段落

  • <h1> 到 <h6>:定义标题或子标题,<h1> 定义最大的标题,<h6> 定义最小的标题。
  • <p>:定义段落。

3. 文本格式化

  • <b> 和 <strong>:加粗文本,<strong> 在语义上表示重要内容。
  • <i> 和 <em>:使文本倾斜,<em> 在语义上表示强调。
  • <del> 和 <s>:为文本添加删除线。
  • <ins> 和 <u>:为文本添加下划线。
  • <sup> 和 <sub>:定义上标和下标文本。

4. 图像和链接

  • <img>:用于插入图像,必须包含src属性来指定图像的来源。
  • <a>:定义超链接,用于从一个页面跳转到另一个页面或页面中的某个部分。必须包含href属性来指定链接的目标地址。

5. 列表

  • <ul>:定义无序列表。
    • <li>:定义列表中的项。
  • <ol>:定义有序列表。
    • <li>:定义列表中的项。
  • <dl>:定义描述列表。
    • <dt>:定义列表中的项。
    • <dd>:描述列表中的项。

6. 表格

  • <table>:定义表格。
    • <caption>:定义表格标题。
    • <thead>:定义表格的头部。
      • <tr>:定义表格中的行。
        • <th>:定义表头单元格。
    • <tbody>:定义表格的主体。
      • <tr>:定义表格中的行。
        • <td>:定义表格中的单元格。
    • <tfoot>:定义表格的尾部。

7. 布局和容器

  • <div>:定义文档中的区块或节,常用于样式布局。
  • <span>:定义文档中的行内区块或节,常用于文本内小块内容的样式设置。

8. 特殊元素

  • <br>:插入简单的换行符。
  • <hr>:插入水平线。
  • <center>(非HTML5推荐):使内容居中,但在HTML5中推荐使用CSS来实现。

9. 表单

  • <form>:定义HTML表单,用于用户输入。
    • <input>:定义输入控件,如文本字段、复选框、单选按钮等。
    • <textarea>:定义多行文本输入控件。
    • <button>:定义点击按钮。
    • <select> 和 <option>:定义下拉选择列表。

HTML中的标签属性

在HTML中,标签通常可以具有属性,这些属性为HTML元素提供附加的信息或指示浏览器如何渲染该元素。属性总是以名称/值对的形式出现,并且始终包含在元素的开始标签中。以下是一些常见的HTML标签属性及其描述:

1. 全局属性

全局属性可以应用于HTML中的所有元素。虽然并非所有元素都需要或支持这些属性,但以下是一些常见的全局属性:

  • class:为元素定义一个或多个类名,通常用于CSS样式和JavaScript操作。
  • id:为元素定义一个唯一的标识符,通常用于CSS样式和JavaScript引用。
  • style:直接为元素定义内联CSS样式。
  • title:为元素提供额外的信息(通常是提示信息),这些信息在用户将鼠标悬停在元素上时显示。

2. 特定元素属性

特定元素属性仅适用于某些HTML元素。以下是一些示例:

<a> 标签
  • href:指定链接的目标地址(URL)。
  • target:指定链接如何打开(例如,在新窗口或新标签页中)。
<img> 标签
  • src:指定图像的来源(URL)。
  • alt:为图像提供替代文本,如果图像无法显示或加载失败,将显示此文本。
  • width 和 height:指定图像的宽度和高度(以像素为单位)。
<input> 标签
  • type:指定输入字段的类型(例如,textpasswordcheckboxradiosubmit 等)。
  • name:定义输入字段的名称,这对于表单提交时数据的收集很重要。
  • value:定义输入字段的初始值。
  • placeholder:提供输入字段的提示信息,当字段为空时显示。
<table><tr><th> 和 <td> 标签
  • colspan<th> 和 <td>):指定单元格应横跨的列数。
  • rowspan<th> 和 <td>):指定单元格应横跨的行数。
<form> 标签
  • action:指定表单数据提交时发送到的URL。
  • method:指定用于发送表单数据的HTTP方法(通常是getpost)。

3. 布尔属性

有些HTML属性是布尔属性,它们的存在就表示值为true,而不需要明确的值。例如,<input type="checkbox" checked>中的checked属性表示复选框默认被选中。

4. 自定义数据属性

HTML5引入了一种新的属性,称为自定义数据属性(也称为“数据-*”属性),允许你为元素添加额外的信息。这些属性以data-前缀开始,后跟任何你想要的名称。例如,<div data-user-id="123">。然后,你可以使用JavaScript来访问和修改这些属性的值。

注意事项

  • 属性名和值之间使用等号(=)连接,值必须始终包含在引号中(单引号或双引号都可以,但最好保持一致)。
  • 某些属性是必需的,而另一些则是可选的,具体取决于所使用的HTML元素和上下文。

- 为了保持代码的可读性和可维护性,建议使用小写字母来编写属性名,并避免在属性名中使用空格或特殊字符。

属性必须写在开始标签中

属性格式 属性名="值"

一个标签中可以写多个属性

特殊符号转义符

        在HTML中,一些字符具有特殊的含义,如小于号 <、大于号 >、双引号 " 和单引号 ' 等。当你想在HTML文本中直接显示这些字符时,而不是作为HTML标签或属性的一部分时,你需要使用特殊符号的转义符(也称为实体字符)来表示它们。

以下是一些常见的HTML特殊符号转义符:

  • &lt; 或 &#60;:小于号 <
  • &gt; 或 &#62;:大于号 >
  • &amp; 或 &#38;:和号 &
  • &quot; 或 &#34;:双引号 "
  • &apos; 或 &#39;:单引号 '
  • &reg; 或 &#174;:注册符号 ®
  • &copy; 或 &#169;:版权符号 ©
  • &trade; 或 &#8482;:商标符号 ™
  • &nbsp; 或 &#160;:非断行空格
  • &cent; 或 &#162;:分(货币符号)
  • &pound; 或 &#163;:英镑符号 £
  • &yen; 或 &#165;:日元符号 ¥

以及许多其他的特殊符号和字符的转义符。你可以在HTML文档中使用这些转义符来插入相应的特殊字符。请注意,虽然你可以使用实体编号(如&#60;&#62;)来表示特殊字符,但在大多数情况下,使用字符名称(如&lt;&gt;)更为常见和易读。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1693895.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【算法】递归、搜索与回溯——简介

简介&#xff1a;递归、搜索与回溯&#xff0c;本节博客主要是简单记录一下关于“递归、搜索与回溯”的相关简单概念&#xff0c;为后续算法做铺垫。 目录 1.递归1.1递归概念2.2递归意义2.3学习递归2.4写递归代码步骤 2.搜索3.回溯与剪枝 递归、搜索、回溯的关系&#xff1a; …

广告圈策划大师课:活动策划到品牌企划的深度解析

对于刚接触营销策划的新人来说&#xff0c;在这个知识密集型行业里生存&#xff0c;要学习非常多各种意思相近的概念&#xff0c;常常让人感到头疼&#xff0c;难以区分。 这里对这些策划概念进行深入解析&#xff0c;帮助您轻松理清各自的含义和区别。 1. 活动策划&#xff…

CCF20230901——坐标变换(其一)

CCF20230901——坐标变换&#xff08;其一&#xff09; #include<bits/stdc.h> using namespace std; int main() {int n,m,x[101],y[101],x1[101],y1[101];cin>>n>>m;for(int i0;i<n;i)cin>>x1[i]>>y1[i];for(int j0;j<m;j)cin>>x[…

PD协议:引领电子设备充电新时代

随着科技的飞速发展&#xff0c;电子设备已成为我们日常生活中不可或缺的一部分。然而&#xff0c;这些设备的充电问题一直困扰着广大用户。传统的充电方式不仅效率低下&#xff0c;而且存在着安全隐患。为了解决这一问题&#xff0c;USB Implementers Forum&#xff08;USB-IF…

IPv6 地址创建 EUI-64 格式接口 ID 的过程

IPv6 接口标识符 IPv6 地址中的接口标识符&#xff08;ID&#xff09;用于识别链路上的唯一接口&#xff0c;有时被称为 IPv6 地址的 “主机部分”。接口 ID 在链路上必须是唯一的&#xff0c;始终为 64 位长&#xff0c;并且可以根据数据链路层地址动态创建。 MAC 地址 中的…

【C++项目】实时聊天的在线匹配五子棋对战游戏

目录 项目介绍 开发环境 核心技术 项目前置知识点介绍 Websocketpp 1. WebSocket基本认识 2. WebSocket协议切换原理解析 3. WebSocket报文格式 4. Websocketpp介绍 5. 搭建一个简单WebSocket服务器 JsonCpp 1. Json格式的基本认识 2. JsonCpp介绍 3. 序列化与反序…

在ubuntu中关于驱动得问题:如何将nouveau驱动程序加入黑名单和安装NVIDIA显卡驱动

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、nouveau驱动程序加入黑名单二、安装NVIDIA显卡驱动 一、nouveau驱动程序加入黑名单 (1) 打开黑名单列表文件 终端输入&#xff1a; sudo gedit /etc/modprobe…

CCF20230501——重复局面

CCF20230501——重复局面 代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;char a[101][64];int i,j;for(i0;i<n;i){for(j0;j<64;j){cin>>a[i][j];}}int temp0,flag1;for(i0;i<n;i){flag1;for(j0;j<…

Linux程序开发(十二):线程与多线程同步互斥实现抢票系统

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

Mongodb分布式id

1、分布式id使用场景 分布式ID是指在分布式系统中用于唯一标识每个元素的数字或字符串。在分布式系统中&#xff0c;各个节点或服务可能独立运行在不同的服务器、数据中心或地理位置&#xff0c;因此需要一种机制来确保每个生成的ID都是全局唯一的&#xff0c;以避免ID冲突。 …

Pytorch线性模型(Linear Model)

基本步骤 ①首先准备好数据集&#xff08;DataSet&#xff09; ②模型的选择或者设计&#xff08;Model&#xff09; ③进行训练&#xff08;Train&#xff09;大部分模型都需要训练&#xff0c;有些不需要。这一步后我们会确定不同特征的权重 ④推理&#xff08;inferring…

就业班 第三阶段(ELK) 2401--5.20 day1 ELK 企业实战 ES+head+kibana+logstash部署(最大集群)

ELKkafkafilebeat企业内部日志分析系统 1、组件介绍 1、Elasticsearch&#xff1a; 是一个基于Lucene的搜索服务器。提供搜集、分析、存储数据三大功能。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java开发的&#xff…

学习单向链表带哨兵demo

一、定义 在计算机科学中&#xff0c;链表是数据元素的线性集合&#xff0c;其每个元素都指向下一个元素&#xff0c;元素存储上并不连续。 1.可以分三类为 单向链表&#xff0c;每个元素只知道其下一个元素是谁 双向链表&#xff0c;每个元素知道其上一个元素和下一个元素 …

mySql从入门到入土

基础篇 在cmd中使用MYSQL的相关指令&#xff1a; net start mysql // 启动mysql服务 net stop mysql // 停止mysql服务 mysql -uroot -p1234//登录MYSQL&#xff08;-u为用户名-p为密码&#xff09; //登录参数 mysql -u用户名 -p密码 -h要连接的mysql服务器的ip地址(默认1…

记一次安卓“Low on memory“崩溃问题

前言 最近再调人脸识别算法相关demo,发现调试期间总是偶发性崩溃&#xff0c;捕获不到异常的那种&#xff0c;看日志发现原因是Low on memory&#xff0c;一开始还疑惑 App内存不够应该是OOM啊,怎么会出现这种问题&#xff0c;百思不得其解&#xff0c;直到我打开了 Android s…

Git 仓库中 -- 代码冲突产生、定位、解决的流程

目录 前置知识1 工具环境2 冲突的产生2.1 仓库中的源代码2.2 人员 A 首先更改代码2.3 人员 B 更改代码&#xff0c;产生冲突2.3.1 第一次错误提示&#xff1a;2.3.2 第二次错误提示&#xff1a; 3 查看冲突4 手动解决冲突4.1 方式一4.2 方式二&#xff08;tortoisegit&#xff…

Vitis HLS 学习笔记--控制驱动任务示例

目录 1. 简介 2. 代码解析 2.1 kernel 代码回顾 2.2 功能分析 2.3 查看综合报告 2.4 查看 Schedule Viewer 2.5 查看 Dataflow Viewer 3. Vitis IDE的关键设置 3.1 加载数据文件 3.2 设置 Flow Target 3.3 配置 fifo 深度 4. 总结 1. 简介 本文对《Vitis HLS 学习…

CSAPP(datalab)解析

howManyBits /* howManyBits - 返回用二进制补码表示x所需的最小位数* 示例: howManyBits(12) 5* howManyBits(298) 10* howManyBits(-5) 4* howManyBits(0) 1* howManyBits(-1) 1* howManyBits(0x80000000) …

【Linux】TCP协议【上】{协议段属性:源端口号/目的端口号/序号/确认序号/窗口大小/紧急指针/标记位}

文章目录 1.引入2.协议段格式4位首部长度16位窗口大小32位序号思考三个问题【demo】标记位URG: 紧急指针是否有效提升某报文被处理优先级【0表示不设置1表示设置】ACK: 确认号是否有效PSH: 提示接收端应用程序立刻从TCP缓冲区把数据读走RST: 对方要求重新建立连接; 我们把携带R…

【C++】详解AVL树——平衡二叉搜索树

个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 祝福语&#xff1a;愿你拥抱自由的风 目录 二叉搜索树 AVL树概述 平衡因子 旋转情况分类 左单旋 右单旋 左右双旋 右左双旋 AVL树节点设计 AVL树设计 详解单旋 左单旋 右单旋 详解双旋 左右双旋 平衡因子情况如…