【前端:Html】--1.1.基础语法

目录

1.HTML--简介

2.HTML--编译器

步骤一:启动记事本

步骤二:用记事本来编辑 HTML

步骤三:保存 HTML

步骤四:在浏览器中运行 HTML 

3.HTML--基础

3.1.HTML声明--!DOCTYPE

3.2.HTML 标题--h1

3.3.HTML 段落--p

3.3.1. 水平线--hr

3.3.2.换行符--br

3.3.3.固定格式--pre

3.4.HTML 链接--a

3.5.HTML 图像--img

3.6.如何查看 HTML 源代码?

4.HTML元素

5.HTML 属性

5.1.链接--href 

5.2.src 属性

5.3.width和height属性

5.4.alt 属性

5.4.样式--style

5.4.1.背景色

5.4.2.文本颜色

5.4.3.字体尺寸

5.5.lang 属性

5.6.title 属性

5.7.文本格式

建议: 属性要常用属性值

6.HTML 引文、引用和定义元素

7.HTML注释


1.HTML--简介

HTML 是创建网页的标准标记语言

什么是 HTML?

  • HTML 代表超文本标记语言
  • HTML 是创建网页的标准标记语言
  • HTML 描述网页的结构
  • HTML 由一系列元素组成
  • HTML 元素告诉浏览器如何显示内容
  • HTML 元素标记内容片段,如 "这是一个标题", "this is a paragraph", "this is a link"等。

HTML 实例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p>
</body>
</html>

注释:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。 

HTML 标记标签通常被称为 HTML 标签 (HTML tag),由开始标记、内容和结束标记组成。

<tagname>内容...</tagname>

<h1>我的第一个标题</h1>

<p>我的第一个段落</p>

开始标签元素内容结束标签
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<br>nonenone

注释: 有些HTML元素没有内容(比如元素)。这些元素称为空元素。空元素没有结束标记!!

注释: 只有 <body> 区域 (白色部分) 才会在浏览器中显示。

2.HTML--编译器

使用 Notepad(记事本) 或 TextEdit 来编写 HTML

可以使用专业的 HTML 编辑器来编辑 HTML:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。

通过记事本,依照以下四步来创建您的第一张网页。

步骤一:启动记事本

如何启动记事本:

开始
    所有程序
        附件
            记事本

步骤二:用记事本来编辑 HTML

在记事本中键入 HTML 代码:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

步骤三:保存 HTML

在记事本的文件菜单选择"另存为"。

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。

比如:文件名为 "index.htm" 并将编码设置为 UTF-8(这是 HTML 文件的首选编码)。

步骤四:在浏览器中运行 HTML 

3.HTML--基础

  1. 所有 HTML 文档都必须以文档类型声明开头: <!DOCTYPE html>
  2. HTML 文档以 <html> 开始,以 </html> 结束。
  3. HTML 文档的可见部分位于 <body> 和 </body> 之间。

3.1.HTML声明--!DOCTYPE

<!DOCTYPE> 声明表示文档类型,并帮助浏览器正确显示网页。

它只出现一次,在页面顶部(在任何HTML标记之前)。

<!DOCTYPE> 声明不区分大小写。

<!DOCTYPE> 声明是 HTML5 网页

3.2.HTML 标题--h1

HTML 标题(Heading)是通过 <h1> 到 <h6> 等标签进行定义的。

<h1> 定义最重要的标题。 <h6> 定义不重要的标题:

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>

注释: 浏览器会自动地在标题的前后添加空行。

注释: 默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

 每个HTML标题都有一个默认大小。可以使用 style 的 font-size 属性指定标题文字的大小:

<h1 style="font-size:60px;">标题 1</h1>

3.3.HTML 段落--p

HTML 段落是通过 <p> 标签来定义的。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

3.3.1. 水平线--hr

<hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容(或者定义一个变化):

<h1>这是标题 1</h1>
<p>这是一些文字。</p>
<hr>
<h2>这是标题 2</h2>
<p>这是一些其他的文本。</p>
<hr>

3.3.2.换行符--br

HTML <br> 元素定义换行符。

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:

<p>这是一个<br>段落<br>有换行符。</p>

<br> 标记是空标记,这意味着它没有结束标记。

3.3.3.固定格式--pre

<!DOCTYPE html>
<html>
<body><p>在 HTML 中,空格和新行被忽略:</p><p>白日依山尽,黄河入海流。欲穷千里目,更上一层楼。</p></body>
</html>

解决方案 - HTML <pre> 元素

HTML <pre> 元素定义预先格式化的文本。

<pre> 元素中的文本以固定宽度字体显示(通常为 Courier),并保留空格和换行符:

<!DOCTYPE html>
<html>
<body><p>pre 标签保留空格和换行符:</p><pre>白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</pre></body>
</html>

 

3.4.HTML 链接--a

HTML 链接是通过 <a> 标签来定义的。

<a href="https://www.w3ccoo.com">这是一个链接</a>

在 href 属性中指定链接的地址。

3.5.HTML 图像--img

HTML 图像是通过 <img> 标签进行定义的。

图像的名称和尺寸是以属性的形式提供的: (src), (alt), width, and height

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

3.6.如何查看 HTML 源代码?

查看 HTML 源代码:

在 HTML 页面中单击鼠标右键,然后在其他浏览器中选择"查看页面源"(在 Chrome 中)或"查看源"(在 Edge 中)或类似选项。这将打开一个包含页面的 HTML 源代码的窗口。

检查 HTML 元素:

右键单击一个元素(或空白区域),选择"Inspect"或"Inspect element"查看元素的组成(您将看到 HTML 和 CSS)。您还可以在打开的"元素或样式"面板中动态编辑 HTML 或 CSS。

4.HTML元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

<tagname>内容在这里...</tagname><h1>我的第一个标题</h1><p>我的第一个段落。</p>
开始标签元素内容结束标签
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<br>nonenone

注释: 某些HTML元素没有内容 (如 <br> )。这些元素称为空元素。空元素没有结束标记!

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文档由嵌套的 HTML 元素构成。

下面的示例包含四个HTML元素 (<html><body><h1> , <p>):

<!DOCTYPE html>
<html>
<body><h1>我的第一个标题</h1>
<p>我的第一个段落。</p></body>
</html>

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<html>
<body><p>这是一个段落。
<p>这是一个段落。</body>
</html>

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 标签对大小写不敏感

HTML 标签不区分大小写: <P> 等同 <p>

在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写


5.HTML 属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置 属性
  • 属性可以在元素中添加 附加信息
  • 属性一般描述于 开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

5.1.链接--href 

<a> 标签用于定义HTML 链接。 链接的地址在 href 属性中指定:

<a href="https://www.w3ccoo.com">访问 W3Schools</a>

 最最重要的是 <a> 标签的  href 属性,表示链接的目标。

<!DOCTYPE html>
<html>
<body><h1>HTML 链接</h1><p><a href="https://www.w3schools.cn/">访问 w3schools.cn!</a></p></body>
</html>

 

默认情况下,链接将在所有浏览器中显示如下:

  • 未访问的链接带有下划线和蓝色
  • 访问的链接带有下划线和紫色
  • 活动链接带有下划线和红色
属性/用法描述示例代码备注
​target 属性​指定链接打开方式<a href="url" target="_value">
_self默认值,当前窗口打开<a href="url" target="_self">可省略不写
_blank新窗口/标签页打开<a href="url" target="_blank">最常用
_parent父框架中打开<a href="url" target="_parent">用于框架页
_top整个窗口打开<a href="url" target="_top">用于框架页
​URL类型​
- 绝对URL完整网址<a href="https://www.example.com">包含协议和域名
- 相对URL相对路径<a href="/pages/about.html">基于当前路径
​特殊链接​
图片链接用图片作为链接<a href="url"><img src="image.gif"></a>
邮件链接打开邮件客户端<a href="mailto:email@example.com">自动添加mailto:
按钮链接按钮形式链接<button onclick="location.href='url'">需要JavaScript
​其他属性​
title鼠标悬停提示<a href="url" title="提示文字">提升可访问性
href链接地址<a href="url">必需属性

5.2.src 属性

<img> 标签用于在HTML页面中嵌入图像。 src 属性指定要显示的图像的路径:

<img src="img_girl.jpg">

有两种方法可以在src属性中指定URL:

1. 绝对URL - 链接到另一个网站上的一个图像。 比如: src="https://www.w3ccoo.com/images/img_girl.jpg".

注意: 外部图像可能受版权保护。如果你没有得到使用它的许可,你可能违反了版权法。此外,您无法控制外部图像;它可能会突然被删除或更改。

2. 相对URL - 链接到网站中托管的图像。在这里,URL不包括域名。如果URL开头没有斜杠,它将相对于当前页面。 比如: src="img_girl.jpg". 如果URL以斜杠开头,它将是相对于当前域名的。 Example: src="/images/img_girl.jpg".

注意: 使用相对URL几乎总是最好的。如果您更改域,它们将不会中断。


5.3.width和height属性

<img> 标签还应包含 width 和  height 属性,该属性指定图像的宽度和高度(以像素为单位):

<img src="img_girl.jpg" width="500" height="600">

5.4.alt 属性

如果由于某种原因无法显示图像,则<img> 标签的 alt 属性指定图像的备用文本。 这可能是由于连接速度慢,或者src属性中的错误,或者如果用户浏览器异常。

<img src="img_girl.jpg" alt="穿夹克的女孩">

看看如果试图显示一个不存在的图像会发生什么:

5.4.样式--style

style 属性用于设置样式,如颜色、字体、大小等。

<p style="color:red;">这是一个红色的段落。</p>

尝试一下 »

 简单介绍几种:

5.4.1.背景色

CSS background-color 属性定义HTML元素背景色。

<body style="background-color:powderblue;"><h1>这是一个标题</h1>
<p>这是一个段落。</p></body>

5.4.2.文本颜色

文本颜色 color 属性定义 HTML 元素的文本颜色:

<h1 style="color:blue;">这是一个标题</h1>
<p style="color:red;">这是一个段落。</p>

5.4.3.字体尺寸

CSS font-size 属性定义 HTML 元素的文本字体大小:

<h1 style="font-size:300%;">这是一个标题</h1>
<p style="font-size:160%;">这是一个段落。</p>

 


5.5.lang 属性

<html>标记中包含lang属性,以声明网页的语言。这是为了帮助搜索引擎和浏览器。

以下示例指定国家代码为英语:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

国家代码也可以添加到lang 属性中。前两个字符定义HTML页面的语言,后两个字符定义国家。

以下示例指定英语为语言,国家为美国:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

了解更多有关信息: HTML 语言代码参考

5.6.title 属性

title 属性 定义有关元素的一些额外信息。

当您将鼠标移到元素上时,title属性的值将显示提示:

<p title="我是一个工具提示">这是一个段落。</p>

尝试一下 »

5.7.文本格式

标签描述
<b>定义粗体文本
<em>定义强调的文本
<i>以交替的声音或语气定义文本的一部分
<small>定义较小的文本
<strong>定义重要文本
<sub>定义下标文本
<sup>定义上标文本
<ins>定义插入的文本
<del>定义删除的文本
<mark>定义标记/突出显示的文本

建议: 属性要常用属性值

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

但是,W3C建议在HTML中使用引号,并对XHTML要求更严格的文档类型中使用引号。

正确:

<a href="https://www.w3ccoo.com/html/">访问我们的 HTML 教程</a>

错误:

<a href=https://www.w3ccoo.com/html/>访问我们的 HTML 教程</a>

以下实例必须使用引号。否则无法正确显示"title"属性,因为它包含空格:

6.HTML 引文、引用和定义元素

标签描述
<abbr>定义缩写或首字母缩略语。
<address>定义文档作者或拥有者的联系信息。
<bdo>定义文本方向。
<blockquote>定义从其他来源引用的节。
<cite>定义著作的标题。
<q>定义短的行内引用。
<!DOCTYPE html>
<html>
<body><p>浏览器通常缩进 blockquote 元素。</p><blockquote cite="http://www.worldwildlife.org/who/index.html">
近 60 年来,WWF 一直在保护自然的未来。 WWF 是世界领先的保护组织,在 100 个国家/地区开展工作,并得到美国超过 100 万会员和全球近 500 万会员的支持。
</blockquote></body>
</html>

7.HTML注释

 HTML 注释不会显示在浏览器中,但它们可以帮助记录 HTML 源代码。

您能够通过如下语法向 HTML 源代码添加注释:

<!DOCTYPE html>
<html>
<body><!-- 这是注释 -->
<p>这是一个段落。</p>
<!-- 注释不显示在浏览器中 --></body>
</html>

在开始标签中有一个惊叹号,但是结束标签中没有。

注释: 浏览器不会显示注释,但它们可以帮助记录HTML源代码。

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

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

相关文章

FreeSWITCH 简单图形化界面46 - 收集打包的一些ASR服务

FreeSWITCH 简单图形化界面46 - 收集打包的一些ASR服务 0、一个fs的web配置界面预览1、docker地址2、使用2.1 下载2.2 运行 3、例子3.1 下载3.2 启动3.3 编译mod_audio_fork或者mod_audio_stream模块使用3.4 编写呼叫路由和呼叫脚本呼叫路由呼叫脚本 3.5 esl捕获识别结果3.6 其…

20250805问答课题-实现TextRank + 问题分类

textRank的工具包实现其他可能的实现方法&#xff0c;对比结果查找分类的相关算法 目录 1. 关键词提取TF-IDF TextRank 1.1. TF-IDF算法 1.2. TextRank算法 1.3. 双算法提取关键词 2. 问题分类 2.1. 预处理 2.2. 获取BERT向量 2.3. 一级标签预测 2.4. 二级标签预测 3…

Memcached缓存与Redis缓存的区别、优缺点和适用场景

一、核心差异概述特性MemcachedRedis​数据结构​简单键值存储丰富数据结构&#xff08;String/Hash/List/Set等&#xff09;​持久化​不支持支持RDB和AOF两种方式​线程模型​多线程单线程&#xff08;6.0支持多线程I/O&#xff09;​内存管理​Slab分配LRU淘汰多种淘汰策略&…

Git简易教程

Git教程 VCS Version Control System版本控制系统 配置用户名邮箱 配置用户名和邮箱 git config --global user.name mihu git config --global user.email aaabbb.com初始化仓库 从项目仓库拉 git clone [项目地址]新建文件夹之后 git init提交操作 提交到仓库 git add . #把…

关于Web前端安全之XSS攻击防御增强方法

仅依赖前端验证是无法完全防止 XSS的&#xff0c;还需要增强后端验证&#xff0c;使用DOMPurify净化 HTML 时&#xff0c;还需要平衡安全性与业务需求。一、仅依赖前端验证无法完全防止 XSS 的原因及后端验证的重要性1. 前端验证的局限性前端验证&#xff08;如 JavaScript 输入…

消息系统技术文档

消息系统技术文档 概述 本文档详细说明了如何在现有的LHD通信系统中添加自己的消息类型&#xff0c;包括消息的发送、接收、解析和处理的完整流程。 系统架构 消息流程架构图 #mermaid-svg-My7ThVxSl6aftvWK {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 微博舆情数据可视化分析-热词情感趋势树形图

大家好&#xff0c;我是java1234_小锋老师&#xff0c;最近写了一套【NLP舆情分析】基于python微博舆情分析可视化系统(flaskpandasecharts)视频教程&#xff0c;持续更新中&#xff0c;计划月底更新完&#xff0c;感谢支持。今天讲解微博舆情数据可视化分析-热词情感趋势树形图…

8月4日 强对流天气蓝色预警持续:多地需警惕雷暴大风与短时强降水

中央气象台8月4日10时继续发布强对流天气蓝色预警,提醒广大民众注意防范即将到来的恶劣天气。 预警详情: 时间范围: 8月4日14时至5日14时 影响区域: 雷暴大风或冰雹: 西北地区中东部、华北中北部、华南南部等地,风力可达8级以上。 短时强降水: 西北地区中东部、华北、…

C语言数据结构(4)单链表专题2.单链表的应用

1. 链表经典算法——OJ题目 1.1 单链表相关经典算法OJ题1&#xff1a;移除链表元素 1.2 单链表相关经典算法OJ题2&#xff1a;反转链表 1.3 单链表相关经典算法OJ题3&#xff1a;合并两个有序链表 1.4 单链表相关经典算法OJ题4&#xff1a;链表的中间结点 1.5 循环链表…

Shell 脚本发送信号给 C 应用程序,让 C 应用程序回收线程资源后自行退出。

下面分别给出一个 Shell 脚本和 C 程序的例子&#xff0c;实现通过 Shell 脚本发送信号给 C 应用程序&#xff0c;让 C 应用程序回收线程资源后自行退出。原理在 Linux 系统中&#xff0c;我们可以使用信号机制来实现进程间的通信。Shell 脚本可以使用 kill 命令向指定的进程发…

C++入门自学Day6-- STL简介(初识)

往期内容回顾 C模版 C/C内存管理&#xff08;初识&#xff09; C/C内存管理&#xff08;续&#xff09; STL简介&#xff1a; STL 是 C 标准库的重要组成部分&#xff0c;是一个通用程序设计的模板库&#xff0c;用于数据结构和算法的复用。它极大地提升了代码效率、可靠性…

从零开始搞定类与对象(中)

运算符重载1.当运算符被用于类类型的对象时&#xff0c;C语言允许我们通过运算符重载的形式指定新的含义。C规定类类型对象使用运算符时&#xff0c;必须转换成调用对应运算符重载&#xff0c;若没有对应的运算符重载&#xff0c;则会编译报错。2. 运算符重载是具有特殊名字的函…

SpringMVC实战指南:从环境搭建到功能实现全解析

第一章&#xff1a;SpringMVC环境搭建与基础配置1.1 Maven依赖配置在Maven项目中&#xff0c;SpringMVC的依赖配置是开发的第一步。根据Spring官方推荐&#xff0c;以下是SpringMVC 5.3.x版本的Maven依赖配置&#xff1a;<dependencies><!-- Spring MVC核心依赖 -->…

Repo 与 manifest

Manifest&#xff1a;它本身就是一个 git 仓库&#xff0c;其中存放的都是包含仓库和子仓库信息的XML文件。这些文件全部由开发者或者维护者手动配置并自己上传到 git 仓库。另外&#xff1a;Manifest 中的仓库之间的依赖关系 repo 也并不关心。所以它们可以是同级的也可以是包…

深入浅出 RabbitMQ:简单队列实战指南

大家好&#xff0c;我是工藤学编程 &#x1f989;一个正在努力学习的小博主&#xff0c;期待你的关注实战代码系列最新文章&#x1f609;C实现图书管理系统&#xff08;Qt C GUI界面版&#xff09;SpringBoot实战系列&#x1f437;【SpringBoot实战系列】SpringBoot3.X 整合 Mi…

Ubuntu22-Qt Creator-fcitx-中文输入

fcitx在ubuntu系统中路径 /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminputcontexts/ /usr/lib/x86_64-linux-gnu/qt6/plugins/platforminputcontexts/ fcitx-qt5-1.2.7 编译 下载链接:https://github.com/fcitx/fcitx-qt5/archive/refs/tags/1.2.7.zip Qt版本:Qt C…

【Java基础|第十三篇】面向对象基础(三)——继承(一)继承的理解,实现,特点……

&#xff08;四&#xff09;面向对象&#xff1a; 5、继承&#xff1a; &#xff08;1&#xff09;理解&#xff1a; 概念&#xff1a; 继承是面向对象的三大特征之一 继承是类与类之间关系的一种&#xff08;是父类与子类的关系&#xff09; 使用场景&#xff1a; 一个类与另…

QGIS绿色版吉林一号切片体验版插件(Jilin1Tiles)更新

吉林一号更新2024年图源了但吉林一号切片体验版插件&#xff08;Jilin1Tiles&#xff09;还没有更新&#xff0c;我修改了一下代码&#xff0c;直接集成到QGIS绿色版中。如下&#xff1a;注意&#xff1a;第一次使用的时候需要选中启用一下插件&#xff1a;需要使用的可以直接下…

git操作命令和golang编译脚本

git子模块信息处理命令git init submodule git submodule updategit取消合并 git merge --abort git reset --hard HEAD{1}bat文件生成二进制set GOOSlinux set GOARCHamd64 go env -w GOFLAGS-modvendor go build -ldflags "-w -s" -ohallapiset GOOSlinux set GOAR…

通往L4之路:构建自我进化的智能驾驶决策大脑

摘要&#xff1a; 本文旨在提出一个超越当前主流“感知-预测-规划”分离式架构的下一代自动驾驶决策系统方案。面对自动驾驶领域最核心的“长尾场景”难题&#xff0c;本文借鉴并升华了一套源于复杂策略制定的决策智能框架&#xff0c;通过构建动态驾驶世界模型&#xff08;Dyn…