HTML入门笔记

概述

HTML(超文本标记语言—HyperText Markup Language)是构成 Web 世界的基础,是一种用来告知浏览器如何组织页面的标记语言。

超文本 Hypertext:指连接单个或多个网站间的网页链接,通过这些链接可以访问互联网中的内容。

标记 Markup:用于注明文本、图片等内容,以便在浏览器中正确显示,例如 <head>、<body> 等。

网页的构成

  • HTML:通常用来定义网页内容的含义和基本结构

  • CSS:通常用来描述网页的表现与展示效果

  • JavaScript:通常用来执行网页的功能与行为

组成

标签

HTML 页面由一系列的元素(elements)组成,而元素是使用标签创建的。

一对标签(tags)可以设置一段文字样式、添加一张图片或创建超链接等。

在 HTML 中,<h1> 标签表示标题,可以使用开始标签和结束标签包围文本内容,以标题形式显示。

<h1>开始学习 Java Web</h1>
<h2>二级标题</h2>

属性

HTML 标签可以拥有属性:

  • 属性:属于标签,用于修饰标签,提供额外的效果。
  • 定义:属性一般定义在起始标签内部。
  • 格式:以 属性=属性值 的形式出现。
  • 引号:属性值通常用 '' 或 "" 括起来,不加引号也是可以的(但不建议)。

例如:

<h1 align="center">开始学习 Java Web</h1>

在这个例子中,align 属性表示水平对齐方式,赋值为 center 表示 居中。

结构

文档结构包含以下几个主要部分:

1、文档声明:<!DOCTYPE html> 声明当前 HTML 版本,指示浏览器以 HTML5 渲染页面。
2、html 根标签:所有内容都需放在 <html> 标签内部。
3、文档头部配置:使用 <head> 标签定义页面的配置信息,包括外部文件引入和元数据。

  • <meta charset="utf-8">:设置文档字符集为 UTF-8。
  • <title>:定义文档标题,在浏览器标签中显示,并用于页面收藏。

4、文档显示内容:<body> 标签内的内容将在浏览器中显示。

HTML语法

注释方式

在 HTML 中,注释的语法是使用 <!-- 注释内容 -->。这段内容在浏览器中不会被显示,主要用于代码说明或记录。

    <!-- <h1>hello world</h1> --><h1>hello world</h1>

基本元素

空元素

一些元素只有一个标签,称为空元素。它们在开始标签中进行关闭。例如:

第一行文档<br/> 
第二行文档<br/>

嵌套元素

将元素放置在其他元素内部的行为被称为嵌套。例如:

<h2><u>二级标题</u></h2>

块元素与行内元素

在 HTML 中,有两种重要的元素类别:块级元素和行内元素。

  • 块级元素:独占一行。块级元素以块的形式展示,会导致换行。常见的块级元素包括 <p>、<hr>、<li>、<div> 等。
  • 行内元素:不会导致换行。行内元素通常出现在块级元素内部,只环绕文档内容的一小部分。常见的行内元素有 <b>、<a>、<i>、<span> 等。

注意:块级元素不能嵌套在行内元素中,但可以嵌套在其他块级元素中。

常用标签

  • <div>:一个通用的块级内容容器,没有特殊语义,通常用于分组和样式化。常用属性包括 id、style 和 class。
  • <span>:一个通用的行内内容容器,也没有特殊语义,常用于对元素进行样式处理。

基本属性

标签属性用于扩展标签,提供额外信息,不会直接出现在内容中,但可以改变标签的行为或提供数据。属性总是以 name="value" 的格式展示。

属性规则
  • 属性名:同一标签中,属性名不得重复。
  • 大小写:属性和属性值对大小写不敏感。建议使用小写。
  • 引号:双引号最常用,但单引号也可以。
常用属性
属性名作用
class定义元素类名,用于选择和访问特定元素
id定义元素唯一标识符,在整个文档中必须唯一
name定义元素名称,可用于提交表单的字段
value定义元素内显示的默认值
style定义CSS样式,覆盖之前设置的样式

特殊字符

在HTML中,某些字符具有特殊含义,因此需要使用字符实体来表示。

原义字符等价字符引用
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
空格&nbsp;

文本标签

文本内容标签用于设置文字的基本样式和结构。

标签名作用
p表示文本的一个段落
h表示文档标题,<h1>–<h6>,呈现六个不同的级别的标题
hr表示段落级元素之间的主题转换,通常显示为水平线
li表示列表里的条目,常用于 ul 和 ol
ul表示无序列表,可包含多个元素,无编号显示
ol表示有序列表,通常渲染为带编号的列表
em表示文本着重,通常用斜体显示
strong表示文本重要性,通常用粗体显示
i表示斜体
b表示加粗文本

使用文本标签的效果示例 

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>文本标签示例</title>
</head>
<body><h1>这是主标题</h1>
<p>这是一个段落,包含 <strong>重要信息</strong> 和 <em>强调文本</em>。</p>
<hr>
<h2>这是副标题</h2>
<p>以下是一个无序列表:</p>
<ul><li>无序列表项 1</li><li>无序列表项 2</li><li>无序列表项 3</li>
</ul>
<p>以下是一个有序列表:</p>
<ol><li>有序列表项 1</li><li>有序列表项 2</li><li>有序列表项 3</li>
</ol><p>这是 <i>斜体文本</i> 和 <b>加粗文本</b> 的示例。</p></body>
</html>

图片标签

<img> 标签用于在网页中显示图片。以下是使用该标签的示例及其属性说明:

<img src="../img/b.jpg" width="400" height="200" alt="描述文本" title="悬停提示文本" />

属性说明

属性名作用
src指定图片的路径。
title鼠标悬停时显示的提示文本。
alt图片无法显示时的替代文本描述。
height指定图片的高度。
width指定图片的宽度。

超链接标签

超链接使用 <a> 标签,主要用于实现页面之间的跳转。以下是基本用法示例: 

<a href="https://www.baidu.com/" target="_blank" title="点击访问示例网站">访问示例网站</a>

属性说明

属性名作用
href指定链接目标的URL。
target指定链接打开的方式(如新窗口或同窗口)。
title鼠标悬停时显示的提示文本。

表单标签

表单概述

<form> 标签是一个用于收集用户输入并提交给 Web 服务器的容器。

<form><!-- 表单元素 -->
</form>

常用属性:

  • action:指定表单提交的 URL。
  • method:提交方式,常见值为 GET 和 POST。
  • autocomplete:自动补全输入内容。

GET 和 POST 的区别

  • GET:数据附加在 URL 中,适合获取数据;不安全且有长度限制。
  • POST:数据在表单体中,适合传输敏感或大量数据;较安全且无大小限制。

表单元素

常用的表单元素标签包括:

标签名作用备注
label表单元素的说明,配合表单元素使用for属性值为相关表单元素id属性值
input表单中输入控件,多种输入类型,用于接受来自用户数据type属性值决定输入类型
button页面中可点击的按钮,可以配合表单进行提交type属性值决定按钮类型
select表单的控件,下拉选项菜单与option配合实用
optgroupoption的分组标签与option配合实用
optionselect的子标签,表示一个选项
textarea表示多行纯文本编辑控件
fieldset用来对表单中的控制元素进行分组(也包括 label 元素)
legend用于表示它的fieldset内容的标题。fieldset 的子元素

按钮控件

<button> 标签通过 type 属性控制行为:

  • button:自定义按钮。
  • submit:提交表单。
  • reset:重置表单。

输入控件 <input>

在HTML表单中,input控件的type属性是最重要的设置之一。不同的type属性值对应不同的输入字段类型,决定了用户如何输入数据以及浏览器如何展示控件。

输入控件基本概念
  • label标签:用于描述表单字段。for属性与input标签的id属性相对应,确保点击标签时焦点跳转到对应的输入框。
  • input标签:定义用户可以输入数据的区域。可通过不同的type属性,设定不同的输入方式。

input标签常见属性

  • type: 指定输入类型,如text、password、email等。
  • id: 该元素的唯一标识符,通常与label的for属性配合使用。
  • name: 该字段在提交时的名称,表单数据以键值对的形式提交,name是键。
  • value: 定义输入字段的初始值。
  • placeholder: 显示提示文本,当输入为空时出现。
  • required: 该字段是否为必填项。
  • readonly: 是否只读,用户无法修改输入框内容。
  • disabled: 禁用输入框,用户无法操作且值不会提交到服务器。
  • autocomplete: 控制是否开启自动补全功能,可设为off关闭。

n-v属性

表单提交时,使用name属性作为键,value属性作为值,多个键值对以&符号分隔,传递到服务器。

常见的type属性值

属性值作用示例或说明
text单行文本输入用于普通文本输入
password密码输入,遮挡输入内容仅显示掩码而非真实字符
email电子邮件输入会进行简单的邮箱格式验证
radio单选按钮在同一组中只能选择一个
checkbox复选框可以多选,提交时数据为数组
date日期选择包含年、月、日
time时间选择仅包含小时和分钟
datetime-local日期时间选择,不含时区包含年、月、日、时间
number数字输入允许输入浮点数
range范围选择可设定最大值、最小值、步长等
tel电话号码输入支持电话号码格式
urlURL输入自动校验URL格式
file文件上传支持文件选择和上传
hidden隐藏字段,用户不可见用于传递隐藏数据

选择控件

<select>标签用于创建下拉列表,允许用户从预定义的选项中选择一个值。每个选项由<option>标签定义。

<select name=""><option value="">显示的内容</option>
</select>

选择控件元素

  • <option>:表示列表中的每个选项。value属性定义选中该选项时提交的值,而option标签内的文本为用户界面上显示的内容。
  • <optgroup>:用于将下拉列表中的选项进行分组,分组名由label属性指定。

 

文本域控件

<textarea>标签用于创建多行文本输入框,允许用户输入大量文本。

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

文本域属性

  • name: 提交时该文本域的名称。
  • rows: 文本域的行数。
  • cols: 文本域的列数,控制宽度。

分组控件

<fieldset>标签用于将表单中的元素分组,通常与<legend>标签一起使用,为组提供一个标题。它可以帮助对表单进行逻辑分割,提高可读性。

分组控件元素

  • <fieldset>: 定义一组表单控件。
  • <legend>: 为控件组提供一个标题。
  • <input>: 使用单选按钮提供“同意”或“不同意”选择。

表格标签

在 HTML 中,表格标签 <table> 用于显示结构化的数据,表格由行(<tr>)和单元格(<td> 或 <th>)组成。

基本属性

  • <table>: 定义表格容器。
  • <tr>: 表示表格中的一行(table row)。
  • <td>: 表格中的单元格(table data)。
  • <th>: 表头单元格(table header),用于标题栏,通常字体加粗且居中显示。

表格结构

表格结构标签可分为表头(<thead>)、表主体(<tbody>)、表尾(<tfoot>),它们有助于逻辑分割表格内容,提升可读性与布局管理。

标签名作用备注
<thead>定义表格的列头的行一个表格中仅有一个
<tbody>定义表格的主体用来封装一组表行(<tr>
<tfoot>定义表格的各列汇总行一个表格中仅有一个
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>示例</title>
</head><body><table><thead><tr><th>产品</th><th>价格</th><th>库存</th></tr></thead><tbody><tr><td>手机</td><td>5000元</td><td>200</td></tr><tr><td>笔记本</td><td>8000元</td><td>100</td></tr></tbody><tfoot><tr><td>合计</td><td colspan="2">库存总量:300</td></tr></tfoot></table></body></html>

跨行跨列

跨行和跨列可以使用以下属性:

  • rowspan:定义跨行的单元格数。
  • colspan:定义跨列的单元格数。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>示例</title>
</head><body><table width="400px" border="1px" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>数学</th><th>语文</th></tr></thead><tbody><tr align="center"><td>张三</td><td rowspan="2">男</td> <!-- 性别跨两行 --><td>23</td><td colspan="2">90</td> <!-- 数学成绩跨两列 --></tr><tr align="center"><td>李四</td><td>24</td><td>95</td><td>98</td></tr></tbody><tfoot><tr><td colspan="4">总分数:</td> <!-- 合并四列 --><td>373</td></tr></tfoot></table></body></html>

样式布局与 div 标签使用

基本格式

在 HTML 中,样式通常放置在 <head> 标签中,使用 <style> 标签包裹样式规则。每个标签的样式可以通过选择器定义不同的样式属性。

<style>标签名 {属性名1: 属性值1;属性名2: 属性值2;属性名3: 属性值3;}
</style>

背景格式

背景颜色 (background-color):用于设置元素的背景颜色。

body {background-color: #567895;
}

背景图片 (background-image):通过 url() 函数指定图片路径,将图片作为背景。

body {background-image: url("path-to-image/bg.png");
}

背景重复 (background-repeat):控制背景图片是否平铺,以及平铺的方向。

body {background-image: url("star.png");background-repeat: repeat-x; /* 水平重复 */
}

可选值:

  • no-repeat:不重复背景
  • repeat-x:水平重复
  • repeat-y:垂直重复
  • repeat:双向重复(默认)

div 布局

简单边框布局:为 div 标签设置边框。

使用 class 属性布局:通过 class 属性为 div 标签添加多个样式属性,如宽度、浮动、背景等。

浮动布局:使用 float 属性让元素沿左边或右边浮动,从而实现流体布局。

float: left; /* 左浮动 */
float: right; /* 右浮动 */

使用 clear 清除浮动,避免浮动对页面其他部分的影响:

clear: both;

div 的基本布局示例

语义化标签

HTML5 中引入了语义化标签,这些标签不仅帮助开发者组织和理解页面结构,还能让搜索引擎和辅助技术更好地解析页面的内容。

标签名称作用备注
header标头元素表示内容的介绍或标题部分块级元素,一个文档中可以定义多个 header 标签
nav导航元素表示页面中的导航链接用于定义导航栏,通常包含菜单或目录,可嵌套在 header
article文章元素表示独立的内容区域独立的可重用内容块,常用于文章、博客、新闻条目等
footer页脚元素表示页面或内容的底部信息定义文档或部分的页脚,可以包含版权声明、相关链接等

语义化标签的作用

  • 增强可读性:通过使用语义化标签,代码结构更清晰,其他开发者能够更容易理解页面结构。
  • SEO 优化:搜索引擎更好地解析语义化标签,从而提升页面的搜索排名。
  • 可访问性增强:语义化标签帮助屏幕阅读器等辅助技术更好地解读页面内容,提升可访问性。

HTML拓展

音频标签

<audio> 标签用于在网页中嵌入音频,是 HTML5 引入的新标签。

常用属性:

属性名取值描述
srcURL音频资源的路径
autoplayautoplay音频准备就绪后自动播放
controlscontrols显示播放控件(播放、暂停等按钮)
looploop音频循环播放
preloadpreload音频在页面加载时预加载;如果使用 "autoplay",则忽略该属性。

示例:

视频标签

<video> 标签用于在网页中嵌入视频,同样是 HTML5 引入的新标签。

常用属性:

属性名取值描述
srcURL要播放的视频的 URL。
width设置视频播放器的宽度。
height设置视频播放器的高度。
autoplayautoplay视频在加载后自动播放。
controlscontrols显示播放控件。
looploop视频循环播放。
preloadpreload视频在页面加载时预加载。<br />如果使用 "autoplay",则忽略该属性。
mutedmuted静音播放。
posterURL视频加载时显示的封面图片。

示例:

回到顶部

在 HTML 中,使用锚点可以实现页面内的跳转,如“回到顶部”的功能。

示例:

 

详情与概要标签 <details> 和 <summary>

<summary> 标签用于描述概要信息,<details> 标签用于显示隐藏的详细信息。默认情况下,详情是折叠的,需要点击查看。

示例:

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

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

相关文章

MATLAB给一段数据加宽频噪声的方法(随机噪声+带通滤波器)

文章目录 引言方法概述完整代码:结果分析结论参考文献引言 在信号处理领域,添加噪声是模拟实际环境中信号传输时常见的操作。宽频噪声可以用于测试系统的鲁棒性和信号处理算法的有效性。本文将介绍如何使用 M A T L A B MATLAB MATLAB给一段数据添加宽频噪声,具体方法是结合…

用JS给官方电子课本扩展个下载功能

为了方便学生、老师和家长&#xff0c;官方提供了几乎所有在用的正版电子课本&#xff0c;由于没有下载功能&#xff0c;只能在线看&#xff0c;有点不方便。 为了更方便使用&#xff0c;用JS外挂了一个下载按钮。 扩展后效果如图&#xff1a; &#xff08;根据2022年版课程…

【NodeRed】MCProtocol 组件中MaxListenersExceededWarning 告警

【NodeRed】MCProtocol 组件的MaxListenersExceededWarning 告警 问题解析解决方案 问题 在NodeRed 中采用MCProtocol &#xff0c;以MC协议进行PLC的信息读写&#xff0c;但在同一个NodeRed 端口下&#xff0c;多窗口设置多个MCProtocol 系列组件&#xff0c;会进行告警&…

软考高级:数据库规范化: 1NF、2NF、3NF和 BCNF AI 解读

数据库的规范化是数据库设计中的一个重要过程&#xff0c;旨在减少数据冗余和提高数据一致性。它通过一系列规则&#xff08;称为范式&#xff09;来优化数据库表的结构。 常见的范式有1NF、2NF、3NF和BCNF。让我们分别来解释这些范式。 生活化例子 想象你在整理一个家庭成…

【Verilog学习日常】—牛客网刷题—Verilog快速入门—VL22

根据状态转移图实现时序电路 描述 某同步时序电路的状态转换图如下&#xff0c;→上表示“C/Y”&#xff0c;圆圈内为现态&#xff0c;→指向次态。 请使用D触发器和必要的逻辑门实现此同步时序电路&#xff0c;用Verilog语言描述。 电路的接口如下图所示&#xff0c;C是单b…

C++第八节课 日期类的补充

在上节课我们提交的代码中&#xff0c;还有着一些不足&#xff1a; 如果我们想要运行下面的函数&#xff1a; void test4() {Date d1(2023, 5, 5);d1 -50;d1.Print();Date d2(2023, 5, 5);d2 - -50;d2.Print(); } 我们发现之前的代码没有考虑day为负数的情况&#xff0c;可以…

Qt窗口——QDockWidget

文章目录 浮动窗口浮动窗口使用示例 浮动窗口 QDockWidget浮动窗口可以认为是子窗口&#xff0c;每一个子窗口都可以停靠在四周&#xff0c;像Qt Creator页面&#xff0c;就很多的子窗口&#xff1a; 浮动窗口使用示例 创建&#xff1a; QDockWidget* dockWidget new QDock…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第五集:再制作更多的敌人

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作敌人另个爬虫Crawler 1.公式化导入制作另个爬虫Crawler素材2.制作另个爬虫Crawler的Crawler.cs状态机3.制作敌人另个爬虫Crawler的playmaker状态机二、…

最清晰 | 自学前端之js

怎么在vscode中运行网页代码 1、在vscode中安装插件“ open PHP/HTML/JS ” 2、在代码区域,右键点击” open PHP/HTML/JS in browser " 一、js概念 1、是什么: (1)运行在客户端(浏览器) (2)一种编程语言(脚本语言) (3)实现人机交互 2、做什么: (1)网页…

智慧公厕:城市公厕管理的新篇章@卓振思众

随着城市化进程的加快&#xff0c;公共卫生设施的建设与管理面临着前所未有的挑战。传统公厕存在诸多问题&#xff0c;如卫生条件差、管理效率低、使用体验不佳等&#xff0c;这些问题不仅影响了市民的日常生活&#xff0c;也成为城市文明的短板。为了解决这些难题&#xff0c;…

【沃虎电子干货】SFP端口是什么?有什么作用?可以接RJ45吗?

苏州沃虎电子科技有限公司 对于网络工程师来说&#xff0c;想必对SFP端口并不陌生&#xff0c;我们经常在交换机、光模块、路由器、媒体转换器等网络设备上看见它的存在&#xff0c;但目前仍有部分用户并没有真正了解SFP端口&#xff0c;且对此提出了一系列问题&#xff0c;如…

【Linux 20】线程控制

文章目录 &#x1f308; 一、创建线程⭐ 1. 线程创建函数⭐ 2. 创建单线程⭐ 3. 给线程传参⭐ 4. 创建多线程⭐ 5. 获取线程 ID &#x1f308; 二、终止线程⭐1. 使用 return 终止线程⭐ 2. 使用 pthread_exit 函数终止线程⭐ 3. 使用 pthread_cancel 函数终止线程 &#x1f30…

【tomcat】tomcat学习笔记

文章目录 1.tomcat乱码问题1.1 linux乱码中文显示乱码问号问题1.2windows乱码1.2.1 方式一1.2.2方式二 1.3 Idea中运行tomcat乱码问题 2. 获取tomcat启动端口号3. idea运行tomcat 的配置问题4.dockerfile构建tomcat镜像问题4.1 替换端口号 5.启动多个tomcat方法6.修改tomcat JA…

Oracle数据库安装与SQL*Plus使用

一、实验过程 1、安装完数据库服务器程序后&#xff0c;查看系统服务启动状况并截图。 2、启动 SOL Plus工具,分别以SYS用户和 SYSTEM用户登录数据库&#xff0c;并解锁scott用户&#xff0c;用scott用户登录。每次登录完成后用show user命令查看当前用户&#xff0c;并截图。…

git reflog 和 git log 的详解和区别

文章目录 1. git log 介绍基本用法&#xff1a;输出内容&#xff1a;常见选项&#xff1a;git log 的局限性&#xff1a; 2. git reflog 介绍基本用法&#xff1a;输出内容&#xff1a;git reflog 输出字段&#xff1a;常见选项&#xff1a;主要用途&#xff1a;示例&#xff1…

想高效开发?从文件系统开始着手。。。

4G-Cat.1模组的文件系统关系着数据传输速度、存储效率&#xff0c;以及数据安全性等等诸多因素&#xff0c;在应用开发中是非常重要的。今天我们继续学习Air201的实用示例——文件系统的使用。 Air201文件系统的使用 合宙Air201资产定位模组——是一个集成超低功耗4G通信、语音…

密集行人数据集 CrowdHumanvoc和yolo两种格式,yolo可以直接使用train val test已经划分好有yolov8训练200轮模型

密集行人数据集 CrowdHuman voc和yolo两种格式&#xff0c;yolo可以直接使用 train val test已经划分好 有yolov8训练200轮模型。 CrowdHuman 密集行人检测数据集 数据集描述 CrowdHuman数据集是一个专为密集行人检测设计的数据集&#xff0c;旨在解决行人密集场景下的检测挑…

英伟达:AI时代的领跑者,引领智能计算的未来@附149页PDF文件下载

在人工智能的浪潮中&#xff0c;英伟达&#xff08;NVIDIA&#xff09;以其卓越的GPU技术&#xff0c;成为了这个时代的领跑者。从游戏显卡的霸主到AI计算的领导者&#xff0c;英伟达的转型之路充满了创新与突破。今天&#xff0c;我们将深入探讨2024年英伟达如何通过其战略布局…

RockTrack:A 3D Robust Multi-Camera-Ken Multi-Object Tracking Framework

RockTrack: A 3D Robust Multi-Camera-Ken Multi-Object Tracking Framework 基础信息 单位&#xff1a;哈尔滨理工大学论文&#xff1a;https://arxiv.org/pdf/2409.11749代码&#xff1a;https://github.com/lixiaoyu2000/Rock-Track (未全部放出)数据集&#xff1a;nuScen…

U-Boot的基本使用

直接参考【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 在上一篇中我们学习了如何进行 I.MX6U 的裸机开发&#xff0c;通过 21 个裸机例程我们掌握了I.MX6U 的常用外设。通过裸机的学习我们掌握了外设的底层原理&#xff0c;这样在以后进行 Linux 驱动开发的时候就只需要将精…