前端——HTML
2401_88153531 2024-10-27 08:33:02 阅读 64
目录
HTML简介
HTML基本框架
JavaScript
内嵌JavaScript
外引JavaScript
CSS
内部样式
外部样式
HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML基本框架
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<!-- ① !代表生成html基本元素 -->
<!-- ② html元素 直接书写html元素名，不需要加<>，直接回车自动生成 -->
<!-- ③ {}配合2快捷键 在{}当中书写文本会直接在html标签内生成文本 $代表数字 0-9 -->
<!-- ④ *N N代表个数，配合2可以生成多个html元素 -->
<!-- ⑤ >表示向下一级生成html元素 -->
<!-- ⑥ +表示同级下生成不同的html元素 -->
<!-- ⑦ #表示生成id值 -->
<!-- ⑧ .表示生成class值 -->
</body>
</html>
各种标签
1.文本内容标签:
<p>：段落
<h1> 到 <h6>：标题，<h1> 是最高级别的标题，<h6> 是最低级别。
2.链接和导航:
<a>：超链接，用于链接到其他页面或页面内部的锚点。
<nav>：导航链接的容器。
3.列表:
<ul>：无序列表
<ol>：有序列表
<li>：列表项
4.分组内容:
<div>：块级容器，用于组织内容，没有语义意义。
<section>：文档中的一个独立部分，如章节、页脚或页眉。
<article>：独立的内容块，如博客文章或新闻故事。
<header>：页面或部分的头部，通常包含标题和导航。
<footer>：页面或部分的底部，通常包含版权信息。
5.表格:
<table>：表格
<tr>：表格行
<th>：表头单元格
<td>：表格单元格
6.表单:
<form>：表单，用于收集用户输入。
<input>：输入字段，类型可以是文本、密码、按钮等。
<label>：输入字段的标签。
<button>：按钮。
7.图像和多媒体:
<img>：图像
<video>：视频
<audio>：音频
8.图形和效果:
<canvas>：图形和动画。
<svg>：可缩放矢量图形。
9.脚本和样式:
<script>：客户端脚本，如JavaScript。
<style>：样式信息，如CSS。
其他:
<br>：换行
<hr>：水平线
<blockquote>：长引用
<cite>：引用作品的标题
<code>：计算机代码
<pre>：预格式化文本
<abbr>：缩写或首字母缩写
<address>：联系信息
<b> 和 <strong>：粗体文本，<strong> 表示重要性
<i> 和 <em>：斜体文本，<em> 表示强调
<span>：行内容器，用于对文本的一小部分应用样式或脚本。
JavaScript
内嵌JavaScript
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<!-- 内嵌 -->
<script>
alert(1)
</script>
</head>
<body>
</body>
</html>
外引JavaScript
既有外引又有内嵌时，内嵌会被完全覆盖掉
defer表示延迟加载，只能用于外引
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<!-- 外引 -->
<!-- 既有外引又有内嵌，内嵌被完全覆盖掉 -->
<!-- defer表示延迟加载 defer只能用于外引 -->
<script src="js/javascript基础语法.js" defer></script>code>
</head>
<body>
</body>
</html>
CSS
内部样式
直接将样式写到<style></style>标签中
<!-- 内部样式 -->
<style>
p{
color: red;
background: purple;
}
</style>
外部样式
<!-- 外部样式 -->
<link rel="stylesheet" href="css选择器.css">code>
上一篇： 前端实现图片压缩(干货总结)
下一篇： Telegram bot & Mini-App开发实践---Telegram简单介绍与初始化小程序获取window.Telegram.WebApp对象并解析
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。