当前位置: 首页 > news >正文

HTML简介

知识点一 HTML

什么是HTML?

超文本标记语言(HyperTextMarkup Language,简称HTML)

怎么学HTML?

HTML 是一门标记语言,标记语言由一套标记标签组成,学习 HTML,其实就是学习标签

开发工具

编辑器: Pycharm 浏览器:Chrome、Firefox

HTML的基本结构

HTML的基本模块

<!DOCTYPE html>               <!--文档类型-->
<html lang="en">              <!--根标签>
<head>                        <!--网页头部--><meta charset="UTF-8">    <!--国际编码--><title>Title</title>      <!--网页标题-->
</head>                       
<body><!--网页主体>
</body>
</html><!--静态页面  动态页面-->
静态页面是随着HTML代码的生成,页面的内容和显示效果就基本不会发生变化
(除非修改页面代码),而动态页面,虽然同样页面代码不发生变化,但是其显
示的内容确实可以随着时间环境或者数据操作的结果而发生变化。因此静态页面和动态页面的认识应该定位在:是否有数据库加工这个环节。例如
去购买T-shirt,我们直接从商店购买的T-shirt就是静态页面,而我们根据不同
人兴趣定制T-shirt就是动态页面。

知识点二 标签

什么是标签:?

由尖括号包裹单词构成,eg:<html>,所以标签不可能以数字开头
标签不区分大小写,推荐小写
标签可以嵌套,但不能交叉嵌套
错误示例:<a><b></a></b>正确示例:<a><b></b></a>

标签使用样式:

1.开始标签<a >标签体</a>结束标签
2.自闭合标签,eg:<br>,<hr>,<input><img>

标签属性:

a.通常为键值对形式出现,eg:color=“red”  id='eat'
b.属性只能出现在开始标签和自闭和标签内
C.属性名字全部小写,属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样,直接写属性名即可,eg:“readonly”(input标签属性)

 标题标签及基础标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jianqi</title>
</head>
<body><a href="#add">跳转到add</a><p id="test"></p><h1>1级标签</h1><h2>2级标签</h2><h3>3级标签</h3><h4>4级标签</h4><h5>5级标签</h5><h6>6级标签</h6><p>无人扶我青云志,我自踏雪至山巅。</p><p>无人扶我青云志,我自踏雪至山巅。</p><div>这是一个div标签</div><div>这是第二个一个div标签</div><div>一个最原始、最干净的容器 和其他容器标签用途一样,但其他标签都特定了装什么东四</div>
<!--target="_blank" 重新打开一个网页,默认是_self--><a href="http://www.baidu.com" target="_blank"><img src="1.png"></a><a href="#test">返回顶部</a><a name="add"></a><div>
<!--内连标签站占一行,只需要把内连标签套在外连标签中--><a href="javascript:void(0)">点进去有惊喜</a></div>
</body>
</html><!--静态页面  动态页面-->

有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol type="a" start="3"><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li></ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul type="circle">
<!--默认desc空心圆circle正方形的实心square取消none--><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li></ul>
</body>
</html>

标签缩进 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--
&emsp;字符宽
&nbsp;空格宽
&lt;  <
&gt;  >
--><i><strong><p>&emsp;&emsp;无人扶我青云志,我自踏雪至<a href="https://baike.baidu.com/item/%E5%B1%B1%E5%B7%85/5588984" target="_blank">山巅,&lt;听泉&gt;</a></p></strong></i><i>斜体</i><strong>粗体</strong>
</body>
</html>-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><dl><dt>江苏省</dt><dd>南京市</dd><dd>苏州市</dd><dt>贵州省</dt><dd>遵义市</dd><dd>贵阳市</dd></dl>
</body>
</html>

 快捷键使用:ul>li*n;

                    ol>li*n;

                    dI>dt+dd*n;

知识点三 特殊符号

参考HTML特殊字符符号大全-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/qq_45301392/article/details/128848810?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522c0c1135442e7c4afc61b97bd855fc559%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=c0c1135442e7c4afc61b97bd855fc559&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-128848810-null-null.142%5Ev100%5Econtrol&utm_term=html%E4%B8%AD%E7%9A%84%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6&spm=1018.2226.3001.4187

知识点四 表格

什么是表格?

表格其实就是大家平时看到的二维表,比如Excel表格之类

表格如今的地位

表格布局火于90年代,如今一般用于后台展示数据

表格初识

表格分为表头,表身和表脚

表格整体的结构 

    *table  表格标签*thead  表头标签*tbody  表身标签*tfoot  表脚标签
表格的其他补充
caption 表格标题
rowspan 合并行
colspan  合并列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border-collapse: collapse;  /* 边框合并 */text-align: center;  /* 居中 */width: 300px;}</style>
</head>
<body><table border="2"><thead><tr><th>序号</th><th>班级</th><th>姓名</th><th>性别</th></tr></thead><tbody><tr><td colspan="2">10</td>  <!-- 合并行 --><td>python</td><td>捡起</td><td>牛</td></tr><tr><td>11</td><td rowspan="2">java</td>  <!-- 合并列 --><td>fufu</td><td>虎</td></tr><tr><td>12</td><td>math</td><td>beibei</td><td>兔</td></tr></tbody></table>
</body>
</html>

知识点五 表单

表单是什么

表单是搜集用户数据信息的各种表单元素的集合区域

表单的作用

用于收取用户数据并向后台发送,前后交互的方式之一

表单的应用

表单常应用于 登录注册,搜索,文件上传等

表单的属性


 form表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--    <form action="http://www.baidu.com/s" method="get">-->
<!--        <input type="text" name="wd" placeholder="请输入你要搜索的内容">-->
<!--        <input type="submit" value="提交">--><form action="https://www.sogou.com/web" method="get"><input type="text" name="query" placeholder="请输入你要搜索的内容"><!-- name用作服务区作为数据交互 --><input type="submit" value="提交">
<!--
type 属性规定 input 元素的类型
name    作为可与服务器交互数据的HTML元素的服务器端的标示。
button  定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox    定义复选框。
hidden  定义隐藏的输入字段。
file    定义输入字段和"浏览"按钮,供文件上传。
image   定义图像形式的提交按钮。
password    定义密码字段。该字段中的字符被掩码。
radio   定义单选按钮。
reset   定义重置按钮。重置按钮会清除表单中的所有数据。
submit  定义提交按钮。提交按钮会把表单数据发送到服务器。
text    定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符
--></form>
</body>
</html>

form表单完整版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="" method="get"><p>用户名:<input type="text" name="uer" placeholder="请输入用户名"></p><p>密&emsp;码<input type="password" name="paw" placeholder="请输入密码"></p><p>性&emsp;别<input type="radio" name="sex" value="female">女<input type="radio" name="sex" value="male">男</p><p>爱&emsp;好<input type="checkbox" name="hobby" value="sing">唱歌<input type="checkbox" name="hobby" value="dance">跳舞<input type="checkbox" name="hobby" value="swim">游泳</p><p>上传文件:<input type="file" name="file"></p><p><textarea name="xing" cols="30" rows="10" placeholder="写上你未来的计划"></textarea></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form>
</body>
</html>

form领域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form><fieldset><legend>Personalia</legend>Name:<input type="text"><br>Email:<input type="text"><br>Date of birth:<input type="text"></fieldset></form>
</body>
</html>

form下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form><p>地址<select name="addr"><optgroup label="江苏省"><option value="NJ">南京市</option><option value="SZ">苏州市</option></optgroup><optgroup label="贵州省"><option value="ZY">遵义市</option><option value="GY">贵阳市</option></optgroup></select></p></form>
</body>
</html>

相关文章:

HTML简介

知识点一 HTML 什么是HTML&#xff1f; 超文本标记语言(HyperTextMarkup Language&#xff0c;简称HTML) 怎么学HTML&#xff1f; HTML 是一门标记语言&#xff0c;标记语言由一套标记标签组成&#xff0c;学习 HTML&#xff0c;其实就是学习标签 开发工具 编辑器: Pycha…...

Linux系统Centos设置开机默认root用户

目录 一. 教程 二. 部分第三方工具配置也无效 一. 教程 使用 Linux 安装Centos系统的小伙伴大概都知道&#xff0c;我们进入系统后&#xff0c;通常都是自己设置的普通用户身份&#xff0c;而不是 root 超级管理员用户&#xff0c;导致我们在操作文件夹时往往爆出没有权限&am…...

【网络安全 | 甲方建设】双/多因素认证、TOTP原理及实现

未经许可,不得转载。 文章目录 背景双因素、多因素认证双因素认证(2FA)多因素认证(MFA)TOTP实现TOTP生成流程TOTP算法TOTP代码示例(JS)Google Authenticator总结背景 在传统的在线银行系统中,用户通常只需输入用户名和密码就可以访问自己的账户。然而,如果密码不慎泄…...

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新&#xff0c;NuxtLink不刷新不跳转&#xff0c;生命周期无响应解决方案 首先说明一点&#xff0c;Nuxt3 的动态路由响应机制是根据 URL 是否更改&#xff0c;参数的更改并不会触发 Router 去更新页面&#xff0c;这在 Vue3 上同样存在…...

2024华为java面经

华为2024年Java招聘面试题目可能会涵盖Java基础知识、核心技术、框架与工具、项目经验以及算法与数据结构等多个方面。以下是考的内容。 一、Java基础知识 Java中有哪些基本数据类型&#xff1f; Java为什么能够跨平台运行&#xff1f; String是基本数据类型吗&#xff1f;能…...

2021 年 9 月青少年软编等考 C 语言三级真题解析

目录 T1. 课程冲突思路分析T2. 余数相同问题思路分析T3. 生成括号思路分析T4. 广义格雷码思路分析T5. 菲波那契数列思路分析T1. 课程冲突 小 A 修了 n n n 门课程,第 i i i 门课程是从第 a i a_i ai​ 天一直上到第 b i b_i bi​ 天。 定义两门课程的冲突程度为:有几天…...

深度解析FastDFS:构建高效分布式文件存储的实战指南(下)

接上篇&#xff1a;《深度解析FastDFS&#xff1a;构建高效分布式文件存储的实战指南&#xff08;上&#xff09;》 传送门: link 文章目录 六、常用命令七、FastDFS配置详解7.1 tracker配置文件7.2 tracker目录及文件结构7.3 storage配置文件7.4 storage服务器的目录结构和文件…...

Python学习29天

二分查找 # 定义函数冒泡排序法从大到小排列 def bbble_sort(list):# i控制排序次数for i in range(len(list) - 1):# j控制每次排序比较次数for j in range(len(list) - 1 - i):if list[j] < list[j 1]:list[j], list[j 1] list[j 1], list[j] # 定义二分查找函数 def…...

Soul App创始人张璐团队携多模态大模型参加GITEX GLOBAL,展现未来社交趋势

作为中东地区规模最大、最成功的计算机通讯及消费性电子产品展,GITEX GLOBAL一直颇受全球关注,于今年迎来了第44届盛会。自诞生以来,GITEX GLOBAL始终聚焦技术驱动的创新,吸引了许多科技巨头、创新企业及投资者的参与。Soul App作为中国较早将AI技术引入社交的企业,今年首次亮相…...

简单工厂模式、方法工厂模式

简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 简单工厂模式的核心思想是通过一个工厂类&#xff0c;根据提供的参数来决定创建哪一个具体的产品类实例。 这个模式通常用于产品种类较少&#xff0c;且不经常变化的场景。 interface Product {void create(); }…...

【面试】前端vue项目架构详细描述

基于您提供的技术栈和要求&#xff0c;以下是前端项目的架构设计描述&#xff1a; 项目结构 • 入口文件&#xff1a; main.js 作为项目的入口文件&#xff0c;负责初始化 Vue 实例&#xff0c;并挂载到 DOM 上。 • 组件目录&#xff1a; components 目录包含项目的所有 Vue 组…...

BERT的中文问答系统32

我们需要在现有的代码基础上增加网络搜索功能&#xff0c;并在大模型无法提供满意答案时调用网络搜索。以下是完整的代码和文件结构说明&#xff0c;我们创建一个完整的项目结构&#xff0c;包括多个文件和目录。这个项目将包含以下部分&#xff1a; 主文件 (main.py)&#xf…...

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…...

idea maven 重新构建索引

当设置maven仓库为离线模式的时候&#xff0c;会出现一些问题。 比如本地的仓库被各种方式手动更新之后&#xff0c; 举例&#xff1a;我需要一个spring的包&#xff0c;在pmo文件中写好了引入包的代码 但是由于是离线模式没有办法触发自动下载&#xff0c;那么这个时候我可以…...

C#桌面应用制作计算器

C#桌面应用制作简易计算器&#xff0c;可实现数字之间的加减乘除、AC按键清屏、Del按键清除末尾数字、/-按键取数字相反数、%按键使数字缩小100倍、按键显示运算结果等...... 页面实现效果 功能实现 布局 计算器主体使用Panel容器&#xff0c;然后将button控件排列放置Pane…...

细说STM32单片机DMA中断收发RTC实时时间并改善其鲁棒性的方法

目录 一、DMA基础知识 1、DMA简介 (1)DMA控制器 (2)DMA流 (3)DMA请求 (4)仲裁器 (5)DMA传输属性 2、源地址和目标地址 3、DMA传输模式 4、传输数据量的大小 5、数据宽度 6、地址指针递增 7、DMA工作模式 8、DMA流的优先级别 9、FIFO或直接模式 10、单次传输或突…...

【Unity/Animator动画系统】多层动画状态机实现角色的基本移动

文章目录 前言实现顶层地面状态四方向混合树计算动画所需参数 空中状态分层动画 前言 最近打算做个Rougelike RPG 塔科夫 混搭风格的冒险游戏。暂且就当是一个有随机元素&#xff0c;有基地&#xff0c;死亡会掉落物品的近战塔科夫罢。 花了三天时间&#xff0c;整合了Mixa…...

每日算法一练:剑指offer——栈与队列篇(1)

1.图书整理II 读者来到图书馆排队借还书&#xff0c;图书管理员使用两个书车来完成整理借还书的任务。书车中的书从下往上叠加存放&#xff0c;图书管理员每次只能拿取书车顶部的书。排队的读者会有两种操作&#xff1a; push(bookID)&#xff1a;把借阅的书籍还到图书馆。pop…...

【Java】ArrayList与LinkedList详解!!!

目录 一&#x1f31e;、List 1&#x1f345;.什么是List&#xff1f; 2&#x1f345;.List中的常用方法 二&#x1f31e;、ArrayList 1&#x1f34d;.什么是ArrayList? 2&#x1f34d;.ArrayList的实例化 3&#x1f34d;.ArrayList的使用 4&#x1f34d;.ArrayList的遍…...

怎么用VIM查看UVM源码

利用ctags工具可以建立源码的索引表&#xff0c;在使用VIM或其他文本编辑器时&#xff0c;就可以跳转查看所调用的UVM或VIP的funtcion/task/class等源码了。 首先需要确认ctags安装&#xff0c;一般安装VIM后都有&#xff0c;如果没有可以手动安装。在VIM中可以输入:help ctag…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...