HTML学习笔记一

目录

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>标签是用户定义多行文本输入控件

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

光缆线路网的组网结构是怎样的

光缆线路网的组网结构是怎样的

1 引言 根据GB 51158-2015《通信线路工程设计规范》&#xff0c;通信线路网包括长途线路、本地线路和接入线路&#xff0c;如图1所示。 图1 通信线路网的组成 根据传输媒质的不同&#xff0c;通信线路分为光缆线路和电缆线路。通信线路也经历了从架空明线到电缆线路再到光缆线路…
阅读更多...
WRF模式的移植、运行、后处理及在多领域的应用

WRF模式的移植、运行、后处理及在多领域的应用

1、WRF模式的各个组成部分&#xff1b; 2、自主完成该模式的移植&#xff1b;3、自主完成模式运行&#xff1b; 4、自主完成模式后处理&#xff1b;5、通过多领域案例分析、实践&#xff0c;熟悉在多领域中的应用。 随着生态文明建设和“碳中和”战略的持续推进&#xff0c;我…
阅读更多...
探索深度学习世界：掌握PyTorch，成为AI领域的行家

探索深度学习世界：掌握PyTorch，成为AI领域的行家

探索深度学习世界&#xff1a;掌握PyTorch&#xff0c;成为AI领域的行家 PyTorch的背景介绍PyTorch的基本概念与特点PyTorch的基本应用张量和自动求导神经网络搭建训练和测试模型 模型的保存和加载模型保存&#xff1a;模型加载&#xff1a;模型使用&#xff1a; PyTorch与其他…
阅读更多...
前端开发在本地开发与后台进行联调阶段时，接口自动重定向https、HSTS 与 307 状态码

前端开发在本地开发与后台进行联调阶段时，接口自动重定向https、HSTS 与 307 状态码

开发者在本地开发与后台进行联调阶段时&#xff0c;Chrome 浏览器上出现 307 状态码&#xff0c;并跳转到 https 版 但是 307 代码是什么含义呢&#xff1f;页面又为何会出现 307 状态码呢&#xff1f;我之前都没见过这个状态码&#xff0c;查了才知道原来它也是一种重定向。 …
阅读更多...
C++-FFmpeg-8-（1）基本概念与原理-rtsp-I、P、B 帧-DTS、PTS-

C++-FFmpeg-8-（1）基本概念与原理-rtsp-I、P、B 帧-DTS、PTS-

目录 1.rtsp是什么&#xff1f; 2. I、P、B 帧 3.DTS、PTS 4.rtsp协议抓包分析&#xff1f; 1.rtsp是什么&#xff1f; 流程&#xff1a; 鉴权&#xff1a; 2种 &#xff1a;basice64 Digest 哈希值 哈希值不可逆。nonce 做的单项散列&#xff08;MD5,SHA512&#xff0…
阅读更多...
【AI工具】bing chat 使用--三种模式+撰写功能

【AI工具】bing chat 使用--三种模式+撰写功能

bing chat:三种模式撰写功能 以下为点击复制后粘贴的内容 Bing Chat提供三种对话模式可选择&#xff1a;创造力、平衡和精确。更多创造力&#xff08;Creative&#xff09;&#xff1a;Bing Chat回答的内容将带有更多语气和情绪&#xff0c;更像一个真实的人类与用户对话。更多…
阅读更多...
HTML（三） -- 表单设计

HTML（三） -- 表单设计

目录 1. 基本语法 2. 表单控件 2.1 input控件 input 常用属性&#xff1a; input type的表单项&#xff1a; 2.2 select 控件 2.3 textarea控件 2.4 label 控件 为什么需要表单&#xff1f; 在我们网页中&#xff0c; 无论是提交搜索的信息&#xff0c;还是网上注…
阅读更多...
前端web3入门脚本五：decode input data

前端web3入门脚本五：decode input data

一、前言 作为一个前端&#xff0c;在调用合约调试的时候&#xff0c;在区块浏览器里拿到一串 hex 格式的 input data&#xff0c;我们应该怎么decode呢&#xff1f; 二、举例 解码交易需要拥有 对应合约的 abi 以及 input data 下面举例介绍怎么获得这两个信息&#xff1a; 参…
阅读更多...
python中snap-stanford指导手册（主要用于做图网络）

python中snap-stanford指导手册（主要用于做图网络）

文章目录 RequirementSnap操作手册Basic TypesVector TypesHash Table TypesPair TypesGraph and Networks Types&#xff08;graph和network类型&#xff09;Node and Edge Operation Requirement 需要提前安装用于操作图网络的snap库&#xff0c;这个库中有很多现成的图数据…
阅读更多...
字节后端入门 - Go 语言原理与实践

字节后端入门 - Go 语言原理与实践

1.1什么是Go语言 1.2Go语言入门 环境 1.3基础语法 1.3.1变量 var name"value" 自己推断变量类型&#xff1b; 也可以显式类型 var c int 1 name: type(value) 常量&#xff1a; const name "value" g : a"foo" 字符串拼接 1.3.2 if else {}花括号…
阅读更多...
通过身份个性化网络(IPM)实现真实世界的自动化妆

通过身份个性化网络(IPM)实现真实世界的自动化妆

来源&#xff1a;投稿 作者&#xff1a;小灰灰 编辑&#xff1a;学姐 论文标题&#xff1a; Real-World Automatic Makeup via Identity Preservation Makeup Net 论文链接&#xff1a;https://www.ijcai.org/proceedings/2020/0091.pdf论文代码&#xff1a;https://github.co…
阅读更多...
商城订单模块实战 - 数据库设计、ABA问题处理、读写分离分库分表

商城订单模块实战 - 数据库设计、ABA问题处理、读写分离分库分表

引言 订单系统可以说是整个电商系统中最重要的一个子系统&#xff0c;因此订单数据可以算作电商企业最重要的数据资产。这篇文章我们来看看在我们的商城系统中订单服务是如何实现的&#xff0c;特别是在设计和实现一个订单系统的过程中有哪些问题是需要特别考虑的。 业务分析…
阅读更多...
【笔记】cuda大师班1-4

【笔记】cuda大师班1-4

一.基本概念 进程&#xff08;process&#xff09;一个正在被执行的计算机程序的实例 上下文&#xff08;context&#xff09;&#xff1a;待处理数据的集合&#xff0c;允许处理器暂停&#xff0c;保持处理的执行和恢复处理 并发&#xff1a;上下文切换&#xff0c;主要应用于…
阅读更多...
二叉搜索树中的众数

二叉搜索树中的众数

1题目 给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&…
阅读更多...
用Python分析周杰伦歌曲并进行数据可视化

用Python分析周杰伦歌曲并进行数据可视化

大家好&#xff0c;今天我们用python分析下周杰伦歌曲。为了尽量完整地呈现从原始数据到可视化的过程&#xff0c;接下来我们会先简单讲解数据的预处理过程&#xff0c;即如何将 JSON 数据转化为Excel 格式&#xff0c;以及如何对周杰伦的歌曲进行分词。 本案例中的歌词数据来…
阅读更多...
对顶堆模板！！【DS对顶堆】ABC281 E - Least Elements

对顶堆模板！！【DS对顶堆】ABC281 E - Least Elements

我想的思路和正解是差不多的 就是滑动窗口&#xff0c;每过去一个用DS维护一下前k个元素和sum 本来想的是用优先队列维护前k个 然后想着multiset维护前k个&#xff0c;但是具体不知道怎么操作 这里用的是multiset维护对顶堆 关于对顶堆&#xff0c;我在寒假的时候总结过 …
阅读更多...
从根本上理解Synchronized的加锁过程

从根本上理解Synchronized的加锁过程

作为一个Java开发&#xff0c;对于Synchronized这个关键字并不会陌生&#xff0c;无论是并发编程&#xff0c;还是与面试官对线&#xff0c;Synchronized可以说是必不可少。 在JDK1.6之前&#xff0c;都认为Synchronized是一个非常笨重的锁&#xff0c;就是在之前的《谈谈Java…
阅读更多...
ChatGPT真的有那么牛吗？

ChatGPT真的有那么牛吗？

ChatGPT真的有那么牛吗&#xff1f;ChatGPT真的有那么牛吗&#xff1f; 作为一款大型语言模型&#xff0c;ChatGPT确实具有很高的自然语言处理和生成能力&#xff0c;可以生成流畅、准确和有逻辑性的语言&#xff0c;而且能够理解和回答广泛的问题。 它是目前最先进和最强大的…
阅读更多...
八股+面经

八股+面经

文章目录 项目介绍1.不动产项目数据机器学习算法调研图像提取算法调研数据集-ImageNetXceptionVGGInceptionDensenetMobilenet 2.图书项目技术栈面试问题 Java基础反射接口和抽象类MapHashMap v.s Hashtable(5点)ConcurrentHashMap v.s Hashtable(2点)代理模式1. 静态代理2. 动…
阅读更多...
Rust - 变量与数据的交互方式(clone)

Rust - 变量与数据的交互方式(clone)

在上一篇文章中我们介绍了变量与数据的交互方式-move&#xff0c;通过底层原理我们知道Rust 永远也不会自动创建数据的 “深拷贝”。因此&#xff0c;任何 自动的复制可以被认为对运行时性能影响较小。 但是如果我们 确实需要深度复制 String中堆上的数据&#xff0c;而不仅仅…
阅读更多...
最新文章

Copyright @ 2022~2023