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>
<!--
 字符宽
空格宽
< <
> >
--><i><strong><p>  无人扶我青云志,我自踏雪至<a href="https://baike.baidu.com/item/%E5%B1%B1%E5%B7%85/5588984" target="_blank">山巅,<听泉></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博客https://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>密 码<input type="password" name="paw" placeholder="请输入密码"></p><p>性 别<input type="radio" name="sex" value="female">女<input type="radio" name="sex" value="male">男</p><p>爱 好<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? 超文本标记语言(HyperTextMarkup Language,简称HTML) 怎么学HTML? HTML 是一门标记语言,标记语言由一套标记标签组成,学习 HTML,其实就是学习标签 开发工具 编辑器: Pycha…...

Linux系统Centos设置开机默认root用户
目录 一. 教程 二. 部分第三方工具配置也无效 一. 教程 使用 Linux 安装Centos系统的小伙伴大概都知道,我们进入系统后,通常都是自己设置的普通用户身份,而不是 root 超级管理员用户,导致我们在操作文件夹时往往爆出没有权限&am…...
【网络安全 | 甲方建设】双/多因素认证、TOTP原理及实现
未经许可,不得转载。 文章目录 背景双因素、多因素认证双因素认证(2FA)多因素认证(MFA)TOTP实现TOTP生成流程TOTP算法TOTP代码示例(JS)Google Authenticator总结背景 在传统的在线银行系统中,用户通常只需输入用户名和密码就可以访问自己的账户。然而,如果密码不慎泄…...
Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案
Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案 首先说明一点,Nuxt3 的动态路由响应机制是根据 URL 是否更改,参数的更改并不会触发 Router 去更新页面,这在 Vue3 上同样存在…...
2024华为java面经
华为2024年Java招聘面试题目可能会涵盖Java基础知识、核心技术、框架与工具、项目经验以及算法与数据结构等多个方面。以下是考的内容。 一、Java基础知识 Java中有哪些基本数据类型? Java为什么能够跨平台运行? String是基本数据类型吗?能…...
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:构建高效分布式文件存储的实战指南(下)
接上篇:《深度解析FastDFS:构建高效分布式文件存储的实战指南(上)》 传送门: 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技术引入社交的企业,今年首次亮相…...
简单工厂模式、方法工厂模式
简单工厂模式(Simple Factory Pattern) 简单工厂模式的核心思想是通过一个工厂类,根据提供的参数来决定创建哪一个具体的产品类实例。 这个模式通常用于产品种类较少,且不经常变化的场景。 interface Product {void create(); }…...
【面试】前端vue项目架构详细描述
基于您提供的技术栈和要求,以下是前端项目的架构设计描述: 项目结构 • 入口文件: main.js 作为项目的入口文件,负责初始化 Vue 实例,并挂载到 DOM 上。 • 组件目录: components 目录包含项目的所有 Vue 组…...
BERT的中文问答系统32
我们需要在现有的代码基础上增加网络搜索功能,并在大模型无法提供满意答案时调用网络搜索。以下是完整的代码和文件结构说明,我们创建一个完整的项目结构,包括多个文件和目录。这个项目将包含以下部分: 主文件 (main.py)…...

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 拦截器实现 Java
点一下关注吧!!!非常感谢!!持续更新!!! Java篇开始了! 目前开始更新 MyBatis,一起深入浅出! 目前已经更新到了: Hadoop࿰…...

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

C#桌面应用制作计算器
C#桌面应用制作简易计算器,可实现数字之间的加减乘除、AC按键清屏、Del按键清除末尾数字、/-按键取数字相反数、%按键使数字缩小100倍、按键显示运算结果等...... 页面实现效果 功能实现 布局 计算器主体使用Panel容器,然后将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 塔科夫 混搭风格的冒险游戏。暂且就当是一个有随机元素,有基地,死亡会掉落物品的近战塔科夫罢。 花了三天时间,整合了Mixa…...
每日算法一练:剑指offer——栈与队列篇(1)
1.图书整理II 读者来到图书馆排队借还书,图书管理员使用两个书车来完成整理借还书的任务。书车中的书从下往上叠加存放,图书管理员每次只能拿取书车顶部的书。排队的读者会有两种操作: push(bookID):把借阅的书籍还到图书馆。pop…...

【Java】ArrayList与LinkedList详解!!!
目录 一🌞、List 1🍅.什么是List? 2🍅.List中的常用方法 二🌞、ArrayList 1🍍.什么是ArrayList? 2🍍.ArrayList的实例化 3🍍.ArrayList的使用 4🍍.ArrayList的遍…...
怎么用VIM查看UVM源码
利用ctags工具可以建立源码的索引表,在使用VIM或其他文本编辑器时,就可以跳转查看所调用的UVM或VIP的funtcion/task/class等源码了。 首先需要确认ctags安装,一般安装VIM后都有,如果没有可以手动安装。在VIM中可以输入:help ctag…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...