在这里插入图片描述

HTML 超文本编辑语言

HTML 介绍

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由WEB的发明者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言， 它是标准通用化标记语言（SGML）的应用。用HTML编写的超文本文档称为HTML文档，它能独立于 各种操作系统平台(如 UNIX，Windows 等)。使用HTML，将所需要表达的信息按某种规则写成HTML 文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

就是进行网页内容填充的

网页三大件，HTML、CSS(为了让内容更美观)、JavaScript(实现动态数据的加载，比如天气、新闻等)

现代网页 -> 动静结合 -> 人机交互更好

全栈开发工程师：一份钱，三份工作

HTML 标记

对于刚刚接触超文本的同学来说，一些用 “<”、“>” 包括起来的句子可能很难被理解，它们被称 为标记，也叫标签，是用来划分网页元素的，以形成文本的布局、文字的格式。

标签分为单标签和双标签两大类：单标签指的是只存在一个标签的写法，如<meta>,<input>、 双标签指的是存在一对标签的写法，如<head></head>、<body></body>等

在双标签中第一个标签为起始标签，第二个标签为结束标签，结束标签需要在左尖括号后添加一个 关闭符 “/”

HTML 文档结构

一个HTML文档基本结构主要由文档声明<!DOCTYPE html>、HTML文档<head>、文档头部分<head>、和文档主体<Body>四部分组成。

<!DOCTYPE>

必须是HTML文档的第一行，位于<html>标签之前。<!DOCTYPE>声明不是 HTML标签，它用于向浏览器说明当前文档是属于哪种HTML或XHTML标准规范。必须在开头使用，为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的 XHTML文档，并按照指定文档类型进行解析。

<html>

<html>标签位于<!DOCTYPE> 声明之后，作用相当于在告知浏览器这是一个HTML文档。
<html></html>标签限定了文档的开始和结束点，其中<html>表示网页的开始，</html>表示网页的结束，网页需要展示的所有内容都应该写到<html></html>标签的内部，<html>标签也被称为根标签，指最外层的意思。

<head>

<head></head>用于定义HTML文档的头部信息。在<html>标签之后，文档头内部的标签如下

标签意义
<title> </title>定义网页标题
<style> </style>定义HTML文档的样式文件
<script> </script>定义JavaScript或脚本文件
<link/>定义了一个文档和外部资源之间的关系
<meta/>定义网页源信息

一个HTML文档只能有一对<head></head>标签，大部分的文档头部包含的标签数据不会真正作为内容显示在页面中。
示例：<meta charset="UTF-8">指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以同一显示中文简体，繁体及其它语言（如英语、日语、韩语），这样网页就不会出现乱码的情况，属于国际通用的编码方式。

<body>

<body></body>包含文档要展示的所有内容，也称为主体标签，网页中显示的文本、超链接、图片、表格和列表等信息，都必须在<body>内。

（解释内容越少，事越大）

HTML 语言是不区分大小写的，但是建议文档声明采用大写方式，其它部分都采用小写方式。

HTML 注释

< !-- 注释内容 -- > 解释这里干了什么事

Pycharm 快捷注释： Ctrl + /

HTML 属性

<标签名字 属性1=“属性值1” 属性2=“属性值2”……>内容部分

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

一般会在 css 样式文件中编写，分文件编写，叫做“解耦”，提高效率

HTML 常用标签

Pycharm 快捷补全标签： 输入 标签名 ，按 Tab 补全

标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<!-- 用法 -->
<hn 属性=“属性值”>标题内容</hn>
段落标签
<p>	</p>
<!-- 用法 --> 
<p 属性=“属性值”>段落文本</p>
文本格式化标签
<strong></strong>		强调加粗
<em></em>				强调斜体
<sub></sub>				下标文本
<sup></sup>				上标文本
<del></del>				加删除线方式
<ins></ins>				加下划线方式
<i></i>					斜体（不具备语义化强调作用，指显示斜体效果）
<b></b>					加粗（不具备语义化强调作用，指显示加粗效果）
水平线标签
<hr>					有时为了使文档结构清晰，层次分明，常常需要在网页文档中加一些水平线将段落与段落之间分开，HTML 中使用<hr>标签来创建水平线
特殊符号

在编写代码的时候，经常会遇到无法输入的字符如：商标注册、版权符等，在HTML中为这些特殊 的字符准备了专门的代码。如下所示：

特殊字符含义特殊符号代码
空格&nbsp
©版权&copy
®注册商标reg
<小于号&lt
>大于号&gt
&和号&amp
￥人民币&yen
°温度&deg
±正负号&plusmn
1上标1&sup1
2下标2&sub2
345上标3 数字4 下标5&sup3 4 &sub5
图像标签
<!-- 用法 --> 
<img src="图像URL"/>
链接标签
<!-- 用法 --> 
<a href="链接页面的地址" target="链接打开方式">链接对象名称</a>
<!-- 链接打开方式 -->
_self		在当前窗口打开链接，默认方式
_blank		在新的窗口中打开链接
_top		在顶层框架中打开链接
_parent		在当前框架的上一层打开链接
列表标签
有序列表：
在HTML中用<ol></ol>标签表示有序列表，列表项目用<li></li>标签表示，列表项目有先后顺序之分，因此称为有序列表
无序列表：
在HTML中用<ul></ul>标签表示无序列表，列表项目用<li></li>标签表示，列表项目没有先后顺序之分，因此称为无序列表
<div> 和 <span>

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span 标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

HTML 表格

表格的基本结构

每个表格有三个必须的标签，<table>、<tr>和<td>

三个标签，用来创建表格，语法结构如下：

<table>							<!-- <table></table>标签用于定义一个表格 -->
<caption> 表格名 </caption>		<tr>						<!-- <tr>标签用于定义表格中的一行，必须嵌套在<table></table>中，表示该表格有几行 --><th></th>				<!-- <th></th>标签用于定义一个表格的表头，位于表格的第一行或第一列 --><td> 单元格内容 </td> 	<!-- <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr></tr>包含几对<td></td>，表示该行中有多少个单元格(列)--></tr>
</table>

Pycharm 快捷生成表格： 输入 tr>td*4 按 Tab 补全

表格行与列的合并

在HTML中，也需要用到“表格合并行”和“表格合并列”。

和并行使用标签的 rowspan 属性，而合并列则用到标签的 colspan 属性。

HTML表单

表单是网页中最为重要的一种数据标签，如登录注册页面上用户名和密码的输入，提交按钮等都是用表单相关的标签定义的。表单是HTML中获得用户输入的主要手段，它主要功能是收集用户输入的信息，并将这些信息发送给后台服务器，实现网页和用户的友好交互。

HTML中，一个完整的表单通常由表单元素，提示信息和表单域三个部分组成。

  • 表单元素：包含表单的具体功能，如文本输入框、下拉列表框、复选框、密码输入框，登录按钮等
  • 提示信息：表单中通常还需包含一些说明性的文字，提示用户要进行的操作
  • 表单域：用来容纳表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果未定义表单域，表单中的数据就无法传送到后台服务器
表单元素
表单元素含义
<input>表单输入框（可定义多种表单项）
<textarea>定义多行文本框
<select>定义一个下拉列表
<label>定义表单辅助项
<form>定义表单域
form表单
<!--form  表单提交属性:action  请求的后端路径method  请求方法  get/postinput  默认为文本输入框属性:type  文本框类型  有text			文本框password		密码number			数字date			日期datetime		日期时间submit			提交reset			重置checkbox		复选框radio			单选框			file			上传文件button			纯按钮,需要用js绑定功能email			邮箱color			颜色hidden			隐藏域name  文本框命名value 文本框的值readonly  只读placeholder  文本框的提示文字select  下拉选择name  下拉框命名<option> 下拉框内容 </option>value 下拉框的值
--><form action="/login" method="get">用户名<input type="text" name="username"><br>密码<input type="password" name="password"><br><input type="submit">
</form>

能让用户选择的,不要让用户输入

frame布局

虽然frame布局已过时,但是第三阶段爬虫可能会遇到这种网页的局部,要知道这种布局

frameset标签不建议放在<body>骨架标签中

<frameset rows="10%,80%,*"><frame>  <!-- 一个<frame>标签就是一个格子--><frameset><frame src="./left.html" name="left">  <!-- name用于指定frame块名称,当其他超链接指向某个网页时,可以将target属性设置为frame的name名,可以将指定跳转的网页放在名为name的frame块中显示 --><frame></frameset><frame>
</frameset>

HTML 快速创建标签(待整理)

待整理…

CSS 介绍

层叠样式表，是一种样式表语言，用来描述HTMIL和XML文档的呈现。随看HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML页面也越来越臃肿，CSS便随之诞生，CSS用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发

CSS是以HTMIL为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML类似，CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS基础语法

CSS的引入方式

  • 行间引入：直接在HTML中使用style参数引入样式，繁琐，不方便管理.适用于单个页面某个标签单独设计样式
  • 内部引入：在HTML文件中使用<style></style>标签引入样式，内部遵循CSS样式规范。在HTML中使用CSS选择器引用样式.适用于单个页面使用相同样式
  • 外部引入：在HTML文件中使用<link rel="stylesheet" href="">标签引入为外部CSS文件。在HTML中使用CSS选择器引入样式.适用于多个页面使用相同样式

CSS的格式

CSS选择器 {属性1:属性值; 属性2:属性值;...}

大小有 px 和 % 两种写法，px 指屏幕像素值，% 指当前标签基于其父标签的百分比

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

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python爬虫实战：研究开源的高性能代理池，构建电商数据采集和分析系统

Python爬虫实战：研究开源的高性能代理池，构建电商数据采集和分析系统

1. 绪论 1.1 研究背景与意义 随着互联网技术的飞速发展，网络数据已成为信息时代的核心资源之一。从商业角度看，企业通过分析竞争对手的产品信息、用户评价等数据，可制定更精准的市场营销策略；从学术研究角度，研究者通过爬取社交媒体数据、学术文献等，可开展社会网络分析…
阅读更多...
项目设计文档——爬虫项目（爬取天气预报）

项目设计文档——爬虫项目（爬取天气预报）

一、项目背景以及项目意义 项目背景&#xff1a; 爬虫技术的核心目的是自动化地从互联网上采集&#xff0c;提取和存储数据。网络爬虫是一种自动化程序&#xff0c;用于从互联网上抓取数据并进行处理。C语言因其高效性和接近硬件的特性&#xff0c;常被用于开发高性能的网络爬…
阅读更多...
Python 操作 PPT 文件：从新手到高手的实战指南

Python 操作 PPT 文件：从新手到高手的实战指南

在日常工作和学习中&#xff0c;PPT 是我们展示信息和进行演示的重要工具。无论是制作报告、演讲还是教学课件&#xff0c;PPT 都扮演着不可或缺的角色。然而&#xff0c;当面对大量重复性的 PPT 编辑任务时&#xff0c;手动操作不仅耗时耗力&#xff0c;还容易出错。幸运的是&…
阅读更多...
系统设计中的幂等性

系统设计中的幂等性

1. 基本概念 幂等性&#xff08;Idempotence&#xff09;是系统设计中经常提到的概念。如果某个操作执行一次或多次都能产生相同的结果&#xff0c;那么它就是幂等的。2. 代码示例 下面这段代码是幂等的。无论你调用多少次&#xff0c;show_my_button 的最终状态都是False。 de…
阅读更多...
Pandas vs Polars Excel 数据加载对比报告

Pandas vs Polars Excel 数据加载对比报告

📊 Pandas vs Polars Excel 数据加载对比报告 1. 数据基本情况 数据文件：data.xlsx 数据规模：23,670 行 3 列 字段： case_time：日期/时间 case_name：公司名称（字符串） board：所属板块（字符串） 2. 加载方式与代码 Pandas import pandas as pdfrom tools import…
阅读更多...
Kafka 为什么具有高吞吐量的特性？

Kafka 为什么具有高吞吐量的特性？

Kafka 高吞吐量原因&#xff1a;面试题总结 在面试中&#xff0c;Kafka 的高吞吐量设计是高频考点&#xff0c;核心需围绕“架构设计”“存储优化”“网络效率”“资源利用”四个维度展开&#xff0c;以下是结构化总结&#xff1a; 一、核心架构&#xff1a;并行化与分层设计分…
阅读更多...
MCP 协议原理与系统架构详解—从 Server 配置到 Client 应用

MCP 协议原理与系统架构详解—从 Server 配置到 Client 应用

1. MCP MCP&#xff08;Model Context Protocol&#xff0c;模型上下文协议&#xff09;是开发 Claude 模型的(Anthropic)公司推出的一个开放标准协议&#xff0c;就像是一个 “通用插头” 或者 “USB 接口”&#xff0c;制定了统一的规范&#xff0c;不管是连接数据库、第三方…
阅读更多...
uniapp安卓真机调试问题解决总结

uniapp安卓真机调试问题解决总结

uniapp安卓真机调试遇到各种连接不上问题&#xff1a; 手机上打开调试数据线不行&#xff0c;换数据线电脑重启手机重启拔出数据线&#xff0c;换个USB插口。
阅读更多...
Linux Qt创建和调用so库的详细教程

Linux Qt创建和调用so库的详细教程

一、创建so库1.文件-->新建文件或项目-->Library->C Library&#xff0c;如下图2.工程命名为Example3.一直下一步就可以4、工程创建完成&#xff0c;如下图5、删除Example_global.h6、配置.pro文件# 设置输出目录 DESTDIR $$PWD/output #只生成.so文件 CONFIG plugi…
阅读更多...
【深度学习】蒙特卡罗方法：原理、应用与未来趋势

【深度学习】蒙特卡罗方法：原理、应用与未来趋势

作者选择了由 Ian Goodfellow、Yoshua Bengio 和 Aaron Courville 三位大佬撰写的《Deep Learning》(人工智能领域的经典教程&#xff0c;深度学习领域研究生必读教材),开始深度学习领域学习&#xff0c;深入全面的理解深度学习的理论知识。 之前的文章参考下面的链接&#xf…
阅读更多...
区块链技术原理(18)-以太坊共识机制

区块链技术原理(18)-以太坊共识机制

文章目录前言什么是共识&#xff1f;什么是共识机制&#xff1f;共识机制的核心目标共识机制的类型PoW&#xff08;工作量证明&#xff09;协议&#xff1a;&#xff08;2015-2022&#xff09;PoS&#xff08;权益证明&#xff09;协议&#xff1a;&#xff08;PoS&#xff0c;…
阅读更多...
java基础（十五）计算机网络

java基础（十五）计算机网络

网络模型概述 为了使得多种设备能通过网络相互通信&#xff0c;并解决各种不同设备在网络互联中的兼容性问题&#xff0c;国际标准化组织&#xff08;ISO&#xff09;制定了开放式系统互联通信参考模型&#xff08;OSI模型&#xff09;。与此同时&#xff0c;TCP/IP模型作为实际…
阅读更多...
idea将服务封装为一个jar包

idea将服务封装为一个jar包

你使用的是 IntelliJ IDEA 2018&#xff0c;这个版本虽然不是最新的&#xff0c;但完全支持通过 图形化界面 打 JAR 包&#xff08;无需命令行&#xff09;&#xff0c;非常适合你在公司内部将 Snowflake 模块打包成通用组件。下面我将 手把手、一步一步、图文流程式地教你&…
阅读更多...
ZYNQ [Petalinux的运行]

ZYNQ [Petalinux的运行]

一、下载ubuntu 下载地址很多&#xff0c;这里提供了一个&#xff1a;http://mirrors.aliyun.com/ubuntu-releases/14.04/ 推荐开始浏览器下载之后复制下载链接使用迅雷下载。 二、虚拟机安装Ubuntu vmware中安装Ubutun–这部分不展示 安装ssh sudo apt install openssh-s…
阅读更多...
excel 破解工作表密码

excel 破解工作表密码

破解Excel工作表密码可通过易用宝工具、VBA脚本或修改文件格式实现&#xff0c;具体方法需根据文件类型和密码保护类型选择。 ‌使用易用宝工具&#xff08;推荐&#xff09;‌ 适用于Excel 2007及以上版本&#xff0c;操作简便且无需编程基础&#xff1a; 下载安装Excel易用…
阅读更多...
Deepseek + RAGFlow 搭建本地知识库问答系统

Deepseek + RAGFlow 搭建本地知识库问答系统

Deepseek RAGFlow 搭建本地知识库问答系统原因为什么要本地部署RAG模型和微调模型区别本地部署流程1. 下载 ollama &#xff0c;通过ollama把Deepseek模型下载到本地运行。2. 下载RAGFlow 源代码和 Docker &#xff0c;通过Docker部署RAGFlow。3. 在RAGFlow中构建个人知识库并…
阅读更多...
elementui附件上传自定义文件列表，实现传完即可预览、下载、删除，二次封装el-upload

elementui附件上传自定义文件列表，实现传完即可预览、下载、删除，二次封装el-upload

背景当前 elementui 的文件上传组件在上传完文件之后只支持删除&#xff0c;用户希望可以看到附件信息&#xff0c;还可以预览自己刚刚上传但未提交的文件&#xff0c;还希望可以下载&#xff0c;因为公司的下载功能当前是通过 OnlyOffice 实现了文件格式转换&#xff0c;所以我…
阅读更多...
linux的conda配置与应用阶段的简单指令备注

linux的conda配置与应用阶段的简单指令备注

1.新建某虚拟环境 conda create -n 虚拟环境名 pythonPython版本号 (-y)2.退出当前虚拟环境 conda deactivate3.查看当前conda环境下所有的虚拟环境 conda info --envs4.查看conda版本和位置 conda --versionwhich conda5.激活某个conda虚拟环境 conda activate 虚拟环境名
阅读更多...
虚拟化技术 ——KVM

虚拟化技术 ——KVM

一、KVM 技术简介 KVM&#xff08;Kernel-based Virtual Machine&#xff0c;基于内核的虚拟机&#xff09;是 Linux 内核原生支持的全虚拟化解决方案&#xff0c;依托 CPU 的硬件虚拟化技术&#xff08;Intel VT-x/AMD-V&#xff09;实现高效的虚拟机运行。它将 Linux 内核转…
阅读更多...
线程间Bug检测工具Canary

线程间Bug检测工具Canary

Canary1.Introduction2.Approach2.1.数据依赖分析2.2.线程间依赖分析3.Bug检测4.Evaluation参考文献1.Introduction 主要做跨线程value-flow bug检查&#xff0c;下面代码中两个函数中存在指向关系&#xff1a;1. x→o1x \rightarrow o_1x→o1​, b→o2b \rightarrow o_2b→o2…
阅读更多...
最新文章

Copyright @ 2022~2023