HTML学习笔记一

news2024/12/23 7:01:19

目录

HTML学习笔记

一、HTML标签

1、HTML语法规范

1.1标签的语法概述

1.2标签关系

2、HTML基本结构标签

2.1第一个HTML

2.2基本结构标签总结

3、开发工具

4、HTML常用标签

4.1标签的语义

4.2标题标签

4.3段落和换行标签

4.4文本格式化标签

4.5div和span标签

4.6图像标签和路径

4.7超链接标签

5、HTML中的注释和特殊字符

5.1注释

5.2特殊字符

6、表格标签

6.1、表格的主要作用

6.2、表格的基本语法

6.3表头单元格标签

6.4表格属性（了解即可）

6.5表格结构标签

 6.6合并单元格

7、列表标签

7.1、无序列表（重点）

7.2、有序列表（理解）

7.3、自定义列表（重点）

8、表单标签

8.1、表单的组成

 8.2、表单域

8.3、表单控件（表单元素）

HTML学习笔记

Web标准构成：结构、表现、行为

标准说明
结构结构用于对网页元素进行整理和分类，现阶段学习HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为指网页模型的定义及交互的编写，现阶段主要学的是javascript

一、HTML标签

1、HTML语法规范

1.1标签的语法概述

  1. HTML标签是由尖括号包围的关键词，例如<html>。

  2. HTML标签通常是成对出现的例如 <html> XXXX </html>, 这种是双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。

  3. 有些特殊的标签必须是单个标签（极少情况），例如<br />  我们称为单标签

1.2标签关系

  1. 包含关系

    <head>
 <title> </title>
</head>

  2. 并列关系

    
<head>  </head>
​
<body>  </body>

2、HTML基本结构标签

2.1第一个HTML

每个网页都会有一个基本的结构标签（也称为骨架标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>
标签名定义说明
<html></html>HTML标签页面中最大的标签，根标签
<head></head>文档的头部head标签我们必须要设置的是title标签
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体原始包含文档的所有内容，页面内容基本都是放在body

2.2基本结构标签总结

3、开发工具

推荐：VSCode

新建一个html文件按一下！,选择第一个！即可生成一个默认的基本结构。

类型说明
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来线上网页，这里表示HTML5，他不是标签。
lang语言种类，zh-CN 定义语音为中文
charsetUTF-8称为万国码，建议使用，避免出现乱码

4、HTML常用标签

4.1标签的语义

语义：标签的含义

4.2标题标签

<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>

4.3段落和换行标签

<p>我是一个段落</p>
<br />

换行标签是强制换行，

4.4文本格式化标签

粗体、斜体或下划线等

语义标签说明
加粗<strong></strong>或者<b></b>推荐<strong></strong>
倾斜<em></em>或者<i></i>推荐<em></em>
删除线<del></del>或者<s></s>推荐<del></del>
下划线<ins></ins>或者<u></u>推荐<ins></ins>

4.5div和span标签

div和 span 是没有语义的，他们就是一个盒子用于布局

<div>这是布局的</div>
<span>这个也是</span>
div 标签是用来布局，但是现状一行只能放一个div，他是大盒子

span标签用来布局，一行可以多个span，他是一个小盒子
​

4.6图像标签和路径

  1. 图像标签

    图像标签用于定义HTML页面中的图像。

    <img src="图像URL" />

    src 是img标签的必须属性，它用于指定图像文件的路径和文件名。

    图像标签的其他属性。

    属性属性值说明
    src图片路径必须属性
    alt文本替换文本，图像不能显示时，显示文字
    title文本提示文本，鼠标放到图像上，显示文字
    width像素设置图像宽度
    height像素设置图像高度
    border像素设置图像的边框粗细
    <img src="img.png" alt="我是博爱" title="春天" width="500" weight="100" border="15" />

    • 图像标签可以拥有多个属性，但是必须写在标签名的后面

    • 属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开

    • 属性采取键值对的格式，即key = “value”的格式

  2. 路径

实际开发过程中图片会很多，所有会新建一个images文件夹来存放这些图片，我们查找图像就需要采用路径的方式来指定图像的位置

  • 相对路径

以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）

相对路径分类符号说明
同一级路径图像文件位于HTML同一级目录
下一级路径/图像文件位于HTML下一级目录
上一级路径../图像文件位于HTML上一级目录

  • 绝对路径（不推荐）

    绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

4.7超链接标签

1、链接的语法格式

<a href="跳转目标" target="目标窗口弹出方式_self或_blank">文本或图像</a>html

属性如下：

属性作用
href用于指定链接目标的地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中“下划线+self”为默认值,"下划线+blank"为新窗口打开方式

2、链接的分类

外部链接：http:// 开头

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可

空链接：如果当时没有确定链接目标时，

<a href="#">首页</a>

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

网页元素链接：文本、图像、表格、音频、视频等都支持

锚点链接：点我们点击链接，可以快速定位到页面中某个位置

  • 在链接文本的href属性中，设置属性值为#名字形式，如

<a href="#two">锚点 </a>

  • 找到目标位置标签，里面添加一个id属性=刚才的名字two

<h3 id="two">定位到我</h3>

5、HTML中的注释和特殊字符

5.1注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要线上在页面的文字，需要使用注释标签


<!-- 这里是注释  快捷键 CTRL + /  -->

5.2特殊字符

HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

6、表格标签

表格是实际开发中非常常用的标签：

6.1、表格的主要作用

表格主要用于显示、展示数据，不是用来布局的，他可以让数据显示非常的规整。

6.2、表格的基本语法

<table>
    <tr>
        <td>单元格内的文字1.1</td>
        <td>单元格内的文字1.2</td>
    </tr>
    <tr>
        <td>单元格内的文字2.1</td>
        <td>单元格内的文字2.2</td>
    </tr>
</table>

1、<table></table> 用于定义表格标签

2、<tr></tr> 用于定义表格的行，必须嵌套在<table></table>里面

3、<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中

4、字母td指表格数据，单元格的内容

6.3表头单元格标签

一般表头单元格位于表格第一行或者第一列，表头在单元格文本内容加粗居中显示

<table>
    <tr>
        <th>表头1.1</th>
        <th>表头1.2</th>
    </tr>
    <tr>
        <td>单元格内的文字1.1</td>
        <td>单元格内的文字1.2</td>
    </tr>
    <tr>
        <td>单元格内的文字2.1</td>
        <td>单元格内的文字2.2</td>
    </tr>
</table>

6.4表格属性（了解即可）

表格标签的属性实际开发是通过css来设置，这里主要了解属性基本概念

属性名属性值描述
alignleft、center、right规定表格相对于周围原始的对齐方式
border1或者""规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认1像素
width像素值或者百分比规定表格的宽度
height像素值或者百分比规定表格的高度
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="100">
    <tr>
        <th>表头1.1</th>
        <th>表头1.2</th>
    </tr>
    <tr>
        <td>单元格内的文字1.1</td>
        <td>单元格内的文字1.2</td>
    </tr>
    <tr>
        <td>单元格内的文字2.1</td>
        <td>单元格内的文字2.2</td>
    </tr>
</table>

6.5表格结构标签

表格可分为表格头部区域<thead>和表格的主体区域<tbody>

 6.6合并单元格

将多个单元格合并为一个单元格

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

 跨行：最上侧单元格为目标单元格，写合并代码

 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

1、先确定是跨行还是跨列合并

2、找到目标单元格，写上合并方式=合并的单元格数量。例如 ：<td colspan="2"></td>

3、删除多余单元格

7、列表标签

列表其实就是用来布局的，列表的最大特点就是整齐、整洁、有序，它作为布局会更加自由和方便。表格分为：有序列表、无序列表和自定义列表

 

7.1、无序列表（重点）

<ul>标签表示HTML页面中项目无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签格式。

 1、无序列表，各个列表项之前是没有顺序级别之分，是并列的

 2、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法都是不被允许的

3、<li>与</li>之间相当于一个容器，可以容纳所有元素

4、无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置

7.2、有序列表（理解）

有序列表即为有排列顺序的列表，其各个列表项会安装一定的顺序排列定义。

在HTML标签中,<ol>标签用于定义有序列，列表排序以数字来显示，并且使用<li>标签来定义列表项

 1、<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法都是不被允许的

2、<li>与</li>之间相当于一个容器，可以容纳所有元素

3、有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置

7.3、自定义列表（重点）

自定义列表使用场景：

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

 在HTML标签中,<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

 1、<dl></dl>里面只能包含<dt>和<dd>

2、<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd> 

8、表单标签

表单就是为了收集用户信息

8.1、表单的组成

HTML中，一个完整的表单通常由表单域、表单控件(也称表单元素)和提示信息3个部分构成

 8.2、表单域

表单域是一个包含表单元素的区域 在HTML标签中,

<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把他范围内的表单元素信息提交给服务器

 记住两点： 1、在我们写表单元素之前，应该有个表单域把他们进行包含 2、表单域是<form>标签

8.3、表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

 1、<input>表单元素

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input />标签为单标签

type属性值设置不同的属性值用来指定不同的控件类型

 

 name和value是每个表单元素都有的属性值，主要给后台人员使用

name表单元素的名字，要求单选按钮和复选框要有相同的name值

 cheecked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

 

 <label>标签

<label>标签为input元素定义标注(标签)。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验

 

 核心：<label>标签的for属性应当与相关元素的id属性相同

 2、<select>下拉表单元素

使用场景：页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

 <select>中至少包含一对<option>

在<option>中定义select="selected"时，当前项即为默认选中项

 3、<textarea>文本域表单元素

使用场景：当用户输入内容较多的情况下，使用<textarea>标签

在表单元素中，<textarea>标签是用户定义多行文本输入控件

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

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

相关文章

Linux云服务器的使用，以及运行Python程序、相关Linux指令

Linux云服务器的使用，以及运行Python程序、相关Linux指令

目录 1、使用Linux云服务器的软件 2、Linux系统运行Python程序 3、Linux系统查看包、虚拟环境、安装包等 以下几个深度学习服务器都不错&#xff1a;智星云、AutoDL、恒源云 1、使用Linux云服务器的软件 MobaXterm_Personal 推荐MobaXterm_Personal mobaxterm是一款方便网站…
阅读更多...
基于Flask的留言板的设计与实现

基于Flask的留言板的设计与实现

这是《Flask Web开发实战:入门、进阶与原理解析》这本书中的一个小项目&#xff0c;我在学习后根据书中的教程实现了留言板的功能&#xff0c;并结合我的思路将代码做了一些调整。 下面这是实现后的展示图片 文章目录 设计思路项目代码exts.pymodels.pyforms.pyerrors.pycomma…
阅读更多...
DMDTS:DM迁移到SQL脚本

DMDTS:DM迁移到SQL脚本

DMDTS:DM迁移到SQL脚本 环境介绍1 注册工程2 新建迁移3 迁移工具介绍4 选择迁移方式5 配置数据源6 配置SQL脚本文件7 配置源端获取对象方式和迁移策略8 选择指定对象复制9 选择迁移对象9.1 迁移对象的配置 - - 转换 设置表的映射关系 10 审阅迁移任务11 完成迁移 环境介绍 DM管…
阅读更多...
一文了解使用Moonbeam原生跨链的潜力项目

一文了解使用Moonbeam原生跨链的潜力项目

跨链互连合约是Moonbeam独特的原生跨链解决方案&#xff0c;不仅帮助开发团队在Moonbeam网络即可解锁不同公链的特色功能&#xff0c;而且各类去中心化应用的终端使用者能因此获得更便捷安全的跨链体验。 Moonbeam的原生跨链解决方案包含Polkadot生态、不同异构链和Moonbeam生…
阅读更多...
hitcontraining_uaf

hitcontraining_uaf

1&#xff0c;三连 基本信息&#xff1a;x86-32-el,堆题思路&#xff1b; 保护&#xff1a;Partial RELRO。 堆题多看一个Libc&#xff1a; 2,IDA分析 main功能&#xff1a; add_note()功能&#xff1a; malloc了两次&#xff1a; 8字节填充&#xff08;利用点之一&#xf…
阅读更多...
Markdown快速入门教程

Markdown快速入门教程

Markdown 的目标是实现「易读易写」&#xff0c;并强调它的「可读性」&#xff0c;因此Markdown 的语法全由标点符号所组成&#xff0c;并经过严谨慎选&#xff0c;是为了让它们看起来就像所要表达的意思&#xff1b;以下是Markdown 大部分的语法。 常用语法- 文字样式 文字字…
阅读更多...
Allegro过孔盖油和过孔开窗设置（部分过孔开窗）

Allegro过孔盖油和过孔开窗设置（部分过孔开窗）

Allegro设置一部分过孔盖油&#xff0c;另一部分过孔开窗。 过孔开窗&#xff1a;过孔部分去除阻焊&#xff0c;便于调试和散热&#xff1b; 过孔盖油&#xff1a;过孔盖上阻焊油墨&#xff0c;防止过孔连锡短路。 总结 使用pad designer设计两种via pad&#xff0c;一种不开…
阅读更多...
分布式事务的几种解决方案

分布式事务的几种解决方案

一.基础概念 1. 什么是事务 事务可以看做是一次大的活动&#xff0c;它由不同的小活动组成&#xff0c;这些活动 要么全部成功&#xff0c; 要么全部失败 2.本地事务 在计算机系统中&#xff0c;更多的是通过 关系型数据库来控制事务&#xff0c;这是利用数据库 本身的事务特性…
阅读更多...
基于Qt的教务管理系统的设计与实现

基于Qt的教务管理系统的设计与实现

获取代码&#xff1a; (1) 下载链接: https://download.csdn.net/download/kese7952/87741551 (2) 添加博主微信获取,备注来源: mryang511688 项目描述 技术&#xff1a;C、QT等 摘要&#xff1a; 随着学校规模的不断扩大&#xff0c;学生的流动变迁导致了学校在管理学生信息…
阅读更多...
二叉堆（Binary Heap）

二叉堆（Binary Heap）

二叉堆&#xff08;Binary Heap&#xff09; 二叉堆概述优先级队列 二叉堆&#xff08;Binary Heap&#xff09;其实比较简单&#xff0c;但却非常有用&#xff0c;常见的应用二叉堆排序和优先级队列。本文将介绍二叉堆的基本性质、基本操作和二叉堆在优先级队列上的应用。 二…
阅读更多...
abc 283E 经典dp

abc 283E 经典dp

题意&#xff1a;https://www.luogu.com.cn/problem/AT_abc283_e 思路&#xff1a;非常经典的dp&#xff0c;设为前i行第i行是否反转和第i1行是否反转。 /*keep on going and never give up*/ #include<cstdio> #include<iostream> #include<queue> #inclu…
阅读更多...
【Mysql】基础篇：DDL (data definition language) 总结

【Mysql】基础篇：DDL (data definition language) 总结

博主简介&#xff1a;努力学习的大一在校计算机专业学生&#xff0c;热爱学习和创作。目前在学习和分享&#xff1a;数据结构、Go&#xff0c;Java等相关知识。博主主页&#xff1a; 是瑶瑶子啦所属专栏: Mysql从入门到精通近期目标&#xff1a;写好专栏的每一篇文章 目录 一、…
阅读更多...
pytest自动化框架之allure测试报告的用例描述设置

pytest自动化框架之allure测试报告的用例描述设置

allure测试报告的用例描述相关方法&#xff1b;如下图 allure标记用例级别severity 在做自动化测试的过程中&#xff0c;测试用例越来越多的时候&#xff0c;如果执行一轮测试发现了几个测试不通过&#xff0c;我们也希望能快速统计出缺陷的等级。 pytest结合allure框架可以对…
阅读更多...
Linux基础指令大讲解

Linux基础指令大讲解

文章目录 1.linux的历史2.如何安装linux3.如何创建和删除用户4.目录&#xff0c;文件&#xff0c;文件夹区别5.pwd6.ls6.1基础语法6.2常用选项 7.alias 和 which的配套使用7.1基础格式7.2解释7.3与其关联的一些命令 8.cd8.1相对路径和绝对路径8.2运行可执行程序的方法8.3cd的基…
阅读更多...
Java学习（韩顺平670-675）

Java学习（韩顺平670-675）

目录 在我看来&#xff0c;我们在Java需要不断封包的原因就是为了使用不同类库中自己所需的方法&#xff0c;我们才要进行封装的&#xff0c;你怎么看&#xff1f; 你好&#xff0c;什么叫做关闭外层流 关于字符流要求 服务端/客户端 TCP网络通信编程//●//应用案例4 TCPFil…
阅读更多...
dbForge Edge 4in1 Enterprise Edition Crack

dbForge Edge 4in1 Enterprise Edition Crack

单一解决方案中的四个数据库 IDE dbForge Edge 赋予自己开发和管理 SQL Server、MySQL、Oracle 和 PostgreSQL 数据库的广泛能力 概述 dbForge Edge&#xff1a;您的终极多数据库解决方案 让我们来看看。您需要处理多个数据库管理系统。同时&#xff0c;您希望能够灵活有效地…
阅读更多...
好用的项目管理软件的具体功能有哪些

好用的项目管理软件的具体功能有哪些

随着企业规模不断的扩大&#xff0c;项目管理往往会面临更多的挑战与难题&#xff0c;最常见的会出现以下几个问题&#xff1a;资源消耗失控&#xff0c;而项目部门和相关部门之间沟通越来越困难&#xff1b;团队凝聚力下降、项目进度难以把控&#xff0c;项目成本几乎失控&…
阅读更多...
书接上回，接着研究当今世上缓存第一人

书接上回，接着研究当今世上缓存第一人

书接上回&#xff0c;接着研究当今世上缓存第一人&#xff0c;记得留下的关注&#xff0c;收藏起来以后观看。 五 三大特殊数据类型 1 geospatial&#xff08;地理位置&#xff09; 1.geospatial将指定的地理空间位置&#xff08;纬度、经度、名称&#xff09;添加到指定的ke…
阅读更多...
国民技术N32G430开发笔记（12）- IAP升级 Settings区域数据初始化

国民技术N32G430开发笔记（12）- IAP升级 Settings区域数据初始化

IAP升级 Settings区域数据初始化 1、假如&#xff0c;有两个产品&#xff0c;A产品跟B产品&#xff0c;硬件都一样&#xff0c;要求一个软件里的board_name为N32G430C8L7_STB_A&#xff0c;另一个软件里的board_name为N32G430C8L7_STB_B。 那我们如何在不改boot程序跟App程序的…
阅读更多...
Matlab App Designer制作一个UART的GUI总结

Matlab App Designer制作一个UART的GUI总结

目录 前言 读取串口数据速度慢 Axes响应慢 总结 前言 最近尝试了一下用Matlab App Designer制作一个上位机通信软件&#xff0c;专门用于读取电机控制里面的相电流&#xff0c;角度等高实时性的数据&#xff0c;已经在VOFA里面实现了。STM32 VOFA串口调试助手提升电机控制调试…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023