【HTML】重点知识内容~快速上手

news2024/12/26 0:36:03

推荐前端学习路线如下：

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。

HTML基本结构：

<!-- doc document 文档  type 类型   html hyper text markup language 超文本标记语言 -->

<html></html>      根

<head></head>      头部  放置页面相关信息

<body></body>      身体  放置内容

<title><title>     标题

网页结构展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- meta  元  charest 字符集   utf-8 字符编码 -->
		<title></title>
		
	</head>
	<body>
		【HTML】重点知识内容~快速上手
	</body>
</html>

常用标签：

h1~h6

表示一级到六级标签 文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

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

p

标识一个段落(段落与段落之间有段间距)；

默认情况，在网页上，页面上的内容不会按照我们写的代码进行换行。`回车` 会被渲染成一个 `空格`；

<p>这是一段文字</p>

<p>
  这是一段文字
</p>

img

image的缩写，img是一个单标签，功能是在一个网页上展示一个图片。

属性

  • src
    source的缩写，表示图片的源，在src可以设置图片地址
  • alt
    当图片加载失败时显示对应的alt中的文本内容
  • title
    当鼠标放在图片上时，显示一段提示文字
  • width 宽
  • height 高

src

可以是绝对路径，也可以是相对路径

  • 绝对路径
    可以使用电脑中的文件的路径 E:\H5\02_HTML\代码\xxx.jpg
    也可以使用网络路径 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 未来我们的网页上，最后上线，几乎都是网络地址
  • 相对路径
    一般情况下，我们在做静态页面时，页面中的背景图，图标等不常更改的资源。一般存放在项目中，做相对路径引入。

相对路径记住两个概念 ./ 和 ../，分别表示当前目录和上一级目录。一般我们在正常的项目结构中。

推荐一个使用方法，在src中直接输入 ./ 接下来根据提示选择对应的文件夹及对应的文件

- 项目文件夹
  - css
  - img
  - js
  - 网页1.html
  - 网页2.html

大小设置

我们可以给图片添加width和height两个属性，设置图片的宽高

  • 数字
  • 百分比

注意！！！宽高只要设置一边，就会等比缩放，如果都设置，除非都是等比例缩放，否者会变形

<img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标悬停后显示的内容" width="100" height="100"/>

文字的样式属性（强调属性）

em i

可以让文字倾斜，em表示强调，i表示文字斜体。在项目中，很多人把 i 作为图标展示的标签。

stong b

可以让文字加粗，stong表示强调，b表示文字加粗。

br

可以在网页中实现换行，就像是一个回车。
如果我们在项目开发中，主动频繁使用 br，说明写的有问题

hr

分割线，在网页上实现一条横线，也很少使用

<em>倾斜</em>
<i>倾斜</i>
<strong>加粗</strong>
<b>加粗</b>
<br>
<hr>

特殊标签：

2<sup>3</sup>   上标
0<sub>2</sub>   下标
<del></del>     删除线
<u></u>         下划线
<s><s>          删除线

特殊符号

&nbsp   空格
&gt     大于号
&lt     小于号
&copy   版权

a

超链接，在网页上，存在着很多的超链接。一定要会用

属性

  • href 必填属性
    超链接跳转路径的设置，可以是网址，也可以是相对路径
  • target 设置窗口的打开方式； _blank 页面打开时在新的窗口中打开，如果不设置，则在当前窗口打开； _self 默认值，打开本窗口
  • title
    当鼠标放在超链接上时，显示一段提示文字
<a href="链接">超链接</a>
<a href="链接" target="_blank">超链接</a>

列表

  • 有序列表
  • 无序列表
  • 定义列表

无序列表在网页中应用最多

有序列表

<ol type="" start="">
  <li></li>
  <li></li>
  <li></li>
</ol>

type类型：

type="A/a/I/i/1"

start="4"

定义开始位置，属性值必须是数字。

无序列表

<ul type="">
  <li></li>
  <li></li>
  <li></li>
</ul>

type类型：

type="disc" 实心圆

type="circle" 空心圆

type="square"  方形

type="none"   没有

定义列表

<dl>
  <dt>标题  关键词（可以插图片和文本）</dt>
  <dd>对内容的详细解释</dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
<dl>

表格（table）

这是一个重要的标签，但是前期我们所做的面向用户的网站中，不常用。

插件：表格宽*高=table>tr*n>td*n

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>

  </tfoot>
</table>

在写表格时，thead , tbody , tfoot 可以省略不写。

表格的属性

-width=""            表格的宽度

-height=""           表格的高度

-border=""           表格的边框

-bordercolor=""      表格边框的颜色

-bgcolor=""          背景颜色

-cellspacing=""      单元格之间的间距

-cellpadding=""      内容到边框的间距

-aligen=""  left  center  right     水平对齐方式  

-valign="" top bottom  middle  basline    垂直对齐方式

跨行

如果我们想让某一个单元格，跨多行，给这个td添加 `rowspan` 可以实现跨行操作

-rowspan="所要合并单元格的行数"   合并行

跨列

如果我们想让某一个单元格，跨多列，给这个td添加 `colspan` 可以实现跨列操作

-cowspan="所要合并单元格的列数"   合并列

form表单

表单标签未来不太常用，因为form已经逐渐被ajax替代了。但是我们前期写页面时，还是要使用

我们应该把所有的表单内元素包裹在一个form中（非必须）

<form method="post"></form>

method 方式，方法，定义表单提交的方法。

get是获取

method="get" 从服务器上获取数据，在数据传输的过程中，用可以在地址栏上看到过程，默认传递方式，安全性比较低。

post 是传递数据

method="post" 向服务器传送数据，在数据传递过程，用户在地址栏上看不到，安全性比较高。

<form action=""></form>

action设置数据传递之后给谁？

input(行内块、置换元素)

input有很多种形态，需要通过type属性进行控制

<form>
  <input type="text">
</form>

type

  • text
    文本输入框，最常用，让用户在文本框中输入我们想要获取的内容
  • password
    密码，让文本以密文显示（不安全）
  • radio
    单选（必须加一个name属性,且同组的属性值必须一样），多个选项只选其一时使用，如性别
  • checkbox
    多选，当有多个选项需要选择时，如爱好
  • submit
    提交按钮，自动显示提交两个字，可以通过value修改
  • reset
    重置按钮，自定显示重置两个字，可以通过value修改
  • button
    普通按钮，没有功能，需要通过value配置显示文本
  • file
    文件上传，可以进行本地文件的上传功能
<form>
  <input type="text" name="" value="" placeholder="这是一个提示文本，输入内容后消失">
</form>

value

一般情况下，value用来获取对应用户输入的值,用来帮助系统显示内容。

name

如果我们要使用表单提交，则所有的表单内元素都需要加name属性

<input type="radio" name="sex" id="qita"><label for="qita">不明</label>    点击文字即可选中
<label for=""><input type="radio" name="sex" checked>男</label>       方便修改文本样式

placeholder

设置提示信息

button

普通按钮，如果把button放在表单里，则button自动会有提交功能

<button>按钮</button>
<input type="button">            两种的作用相同

select > option

下拉选择框，需要用select包裹多个option

<select>
  <option value="123">选项2</option>
  <option value="123">选项3</option>
  <option value="123">选项1</option>
  <option value="123">选项4</option>          选项显示在浏览器，123是提交给服务器的数据
</select>

textarea

文本域，用于输入多行文本时使用

<textarea></textarea>

表单内元素的状态

  • blur
    失去焦点
  • focus
    获取焦点
  • checked 给radio和checkbox添加，用于设置对应选项的选中状态，添加则表示选中
  • selected 给option添加，用于设置默认被选中的选项
  • readonly 只读，添加到输入框，无法修改内容，只能查看
  • disabled 添加到元素上，则对应元素禁用，样式变灰

页面划分

<div>用来划分页面区域的</div>
<span>修饰独立小部分内容</span>

两者没有固定的格式表现。对他应用样式（CSS）时，他才会产生视觉上的变化。

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

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

相关文章

QT教程：QSortFilterProxyModel代理实现自定义排序、联合过滤

QT教程：QSortFilterProxyModel代理实现自定义排序、联合过滤

1. QsortFilterProxyModel介绍 QsortFilterProxyModel类用来为model和view之间提供强大的排序和过滤支持。将模型排序或者过滤后在视图上显示,并且无需对模型中的数据进行任何转换&#xff0c;也无需对模型在中数据进行修改。 比如: 对某列筛选带有”xxx”的关键字出来.并支持…
阅读更多...
Maya——1——在maya中，用Arnold（阿诺德）还原Subtance Painter(sp)中的材质效果。

Maya——1——在maya中，用Arnold（阿诺德）还原Subtance Painter(sp)中的材质效果。

1根据上图的导出选项&#xff0c;在sp中设置arnold的导出参数&#xff0c;得到五张贴图&#xff0c;删掉其中的高度图&#xff08;用不上&#xff09;留下这四张 base&#xff08;基础颜色&#xff09; Metallic&#xff08;金属度&#xff09; Normal&#xff08;法线&#x…
阅读更多...
Google Colab训练yolov3自定义数据集

Google Colab训练yolov3自定义数据集

共分7步&#xff1a; 一、进入Google Colab训练环境 二、下载编译Darknet 三、上传数据集 四、修改配置文件 五、下载预训练权重文件 六、开始训练数据 七、测试训练结果 一、进入Google Colab训练环境 打开 Google Drive 云端硬盘 新建Google Colaboratory文件&#xff0c;…
阅读更多...
公共大数据集群中如何配置 YARN 的公平调度器和容量调度器

公共大数据集群中如何配置 YARN 的公平调度器和容量调度器

公共大数据集群中如何配置 YARN 的公平调度器和容量调度器 1 YARN 资源管理框架与公平/容量调度器 作为一款资源调度框架&#xff0c;Yarn 支持可插拔的调度器&#xff0c;常见的调度器有公平调度器 fair scheduler 和容量调度器 capacity scheduler。常见的大数据发行版中&a…
阅读更多...
一张照片，如何生成一个二维码？

一张照片，如何生成一个二维码？

冬天落在恭王府的第一场大雪、春天聚在河边觅食的麻雀、盛夏午后从冰箱里拿出来的大西瓜、深秋爬满南墙的红叶……每一份惊喜和快乐&#xff0c;都值得分享给更多的朋友。 今天我们要介绍的是&#xff0c;如何将一张照片&#xff0c;做成一个二维码&#xff0c;扫码后就可以看…
阅读更多...
利用两个小demo理解汇编代码排查内存溢出问题

利用两个小demo理解汇编代码排查内存溢出问题

利用两个小demo理解汇编代码排查内存溢出问题 https://www.cnblogs.com/liuchuanloong/articles/16925695.html 【背景】 近日处理现场问题时遇到了踩内存导致的崩溃问题&#xff0c;然而个人对反汇编程序执行过程不熟悉&#xff0c;通过查阅资料&#xff0c;对比分析两个小d…
阅读更多...
不适用于云的应用程序有哪些？

不适用于云的应用程序有哪些？

所有应用程序都适合在云上运行吗?这是在云计算中寻求改进IT解决方案的企业经常问的一个问题。这个问题的答案是“视情况而定”。虽然企业云的应用正在飞速发展&#xff0c;大多数企业都在考虑将整个应用程序迁移到云上&#xff0c;以实现可伸缩、灵活、可访问、敏捷和精益的工…
阅读更多...
PC端配置定位服务步骤(依赖于腾讯位置服务)

PC端配置定位服务步骤(依赖于腾讯位置服务)

目录 第一步 &#xff1a; 安装 jsonp 第二步 &#xff1a; 在mian.js中配置并使用 第三步 &#xff1a; 在 manifest.json中进行相关配置 第四步 &#xff1a; 获取经纬度值&#xff0c;从而得到地址 第一步 &#xff1a; 安装 jsonp 执行此代码 &#xff1a; np…
阅读更多...
Origin2022安装教程

Origin2022安装教程

Origin2022他来了&#xff01; 本人虽然是Python和R的资深绘图用户&#xff0c;偶尔也用用Origin&#xff0c;Origin的优势区间是手动、全可控&#xff0c;要素复杂事图片效果好&#xff1a; 安装方法和安装包下载破解见文末&#xff1a; Origin 2022新要素 1.对地理要素和…
阅读更多...
基于 51 单片机室内灯光控制系统

基于 51 单片机室内灯光控制系统

1. 功能介绍 这是基于 STC89C52 单片机设计的灯光控制系统&#xff0c;实现对室内灯光的控制&#xff0c;采集光敏传感器&#xff0c;红外线热释电传感器&#xff0c;声音传感器&#xff0c;光照照度传感器等数据进行处理&#xff0c;完成室内灯光的智能控制。 支持的功能与设…
阅读更多...
VBox组件内部局域网

VBox组件内部局域网

我使用VirtualBox并不是很专业&#xff0c;只是拿它来组件服务器。后来这个虚拟机对我越来越重要&#xff0c;我的各种测试服务器和学习服务器越来越多&#xff0c;于是我就给他们规划了IP地址&#xff0c;像这样: 我用的网络一直都是桥接&#xff0c;每个虚拟机都可以上网&…
阅读更多...
高性能HTTP和反向代理Web服务器 - Nginx

高性能HTTP和反向代理Web服务器 - Nginx

Nginx一、安装1.1.Windows安装1.2.Linux安装1.3.常用命令二、动静分离三、反向代理3.1.正向代理3.2.反向代理四、负载均衡4.1.轮询4.2.加权轮询4.3.Ip hash五、限流六、缓存七、黑白名单Nginx是一个高性能的HTTP服务器和反向代理的web服务器&#xff0c;同时也提供IMAP&#xf…
阅读更多...
一文带你读懂公司卫生间一直有人窜稀的原理

一文带你读懂公司卫生间一直有人窜稀的原理

不知道你有没有这样的经历&#xff0c;一直忙忙碌碌&#xff0c;需求不断&#xff0c;当你终于解决完手头的事情&#xff0c;突然特别着急想要去卫生间的时候&#xff0c;仅有的几个门总是关着的&#xff0c;于是怀疑&#xff0c;可能其他人更需要这次机会&#xff0c;他们也一…
阅读更多...
华为云安装Docker，在其中安装Tomcat运行Html项目一步到位

华为云安装Docker，在其中安装Tomcat运行Html项目一步到位

一日不学习浑身难受&#xff0c;对于追光者的我来说&#xff0c;就是这种情况&#xff01;&#xff01;&#xff01;今天心血来潮&#xff0c;想把云服务器、Docker、Tomcat、Html项目集成一块进行练习&#xff0c;为了后面的部署项目做准备。 环境介绍&#xff1a;华为云cent…
阅读更多...
KafKa存储机制

KafKa存储机制

目录 存储机制 kafka 存储选型 Kafka 存储方案剖析 kafka 存储架构设计 kafka 日志系统架构设计 日志目录布局 磁盘数据存储 可靠性 Producer的可靠性保证 kafka 配置为 CP系统 kafka 配置为 AP系统 Broker 的可靠性保证 Consumer 的可靠性策略 AutoCommit&#xff…
阅读更多...
【二叉树从无到有】

【二叉树从无到有】

目录&#xff1a;前言一、树1.什么是树结构&#xff1f;2.为什么使用树结构&#xff1f;3.树的概念4.树的表示5.树在现实生活中的应用二、二叉树&#xff08;一&#xff09;二叉树概念既结构1.概念2.现实中的二叉树3.特殊的二叉树4.二叉树的性质5.二叉树的存储结构&#xff08;…
阅读更多...
线程的深度剖析

线程的深度剖析

线程和进程的区别和联系&#xff1a; 1.进程可以处理多并发编程的问题&#xff0c;但是进程太重&#xff0c;主要指它的资源分配和资源回收上&#xff0c;进程消耗资源多&#xff0c;速度慢&#xff0c;其创建、销毁、调度一个进程开销比较大。 2.线程的出现有效地解决了这一…
阅读更多...
面向对象的个人理解（使用JAVA代码描述）

面向对象的个人理解（使用JAVA代码描述）

前言 功能分类 类&#xff08;class&#xff09;的第一个功能是隔离&#xff0c;起到边界的作用&#xff0c;使得不同功能的代码互不干扰。 干扰的起源 在非面向对象的语言中&#xff0c;我们主要定义结构和函数来实现功能。下边用C语言来举个例子。 某程序员写了宠物模拟…
阅读更多...
Ajax学习：nodejs安装+express框架介绍

Ajax学习：nodejs安装+express框架介绍

ajsx应用中&#xff0c;需要安装nodejs环境 基于Chrome V8引擎&#xff08;和浏览器上的谷歌的解析引擎一样&#xff09;JavaScript运行环境 (31条消息) Node.js_安装_哇嘎123的博客-CSDN博客 查看安装是否完成 express框架介绍--为了创建一个web服务器 (31条消息) Express…
阅读更多...
Spark系列之Spark体系架构

Spark系列之Spark体系架构

title: Spark系列 第四章 Spark体系架构 4.1 Spark核心功能 Alluxio 原来叫 tachyon 分布式内存文件系统Spark Core提供Spark最基础的最核心的功能&#xff0c;主要包括&#xff1a; 1、SparkContext 通常而言&#xff0c;DriverApplication的执行与输出都是通过SparkC…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023