HTML:超文本标记语言
HyperText Markup Language
一种用于创建网页的标准标记语言
HTML 运行在浏览器上,由浏览器来解析。

https://www.runoob.com/html/html-tutorial.html

1.格式
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8"> 
<title>中文测试。。。。</title>
</head>
<body>
这里是测试body测试内容。。。
</body>
</html><!DOCTYPE html> 声明为 HTML5(最新的HTML标准)文档 告诉浏览器按照标准模式进行解析渲染页面,有助于浏览器中正确显示网页
<html> </html>元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

2.标签 在body内
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签大部分是成对出现的,比如 <b> 和 </b>,还有少部分为单标签,比如<hr>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签


<h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
<p></p> 双标签  段落,有换行功效
<hr> 单标签  左到右分割符(横线)
<!--    -->注释

3.元素的属性
给元素提供附件信息,大部分的元素属性
属性一般描述于开始标签
属性总是以"名称=值对"的形式出现,比如:name="value"。
语法:<标签 属性名称=参数1>
1) bgcolor ,body的属性设置网页的背景色
<body bgcolor="ff1234">
2)background  body的属性设置网页的背景图片

3)align属性 值: left,right,center
4.文本元素属性
b 元素 <b>内容</b> 加粗
br 换行<br> 
i元素, 字体倾斜<i></i>
del元素 删除文字<del></del>
strong  强调一段文字,效果类似 b标签
ins元素,插入文字(下划线<ins></ins>)
small元素, 超小字体<small></small>
sub 下标<sub></sub>
sup  上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>

5、img 单标签
<img src="url" alt="some_text">
src 图像来源
alt 如果不能正确打开,显示的替换文字
width, height
<img src="abc.jpg" alt="美女" width="50" height="60"> 
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的

    &nbsp  空格

6、超链接
5种形式
基本语法
<a href="url">链接文本</a>
1.链接外部网站
2.链接本地文件
3.图片链接
4.电子邮件链接打开电子邮件
5.下载文件链接

<a href="http://www.baidu.com">baidu</a>
<br><a href="1.html">链接文件</a>
<br><a href="1.html"><img src="abc.jpg"></a>
<br><a href="mailto:123@13.com">发送邮件</a>
<br><a href="abc.jpg">下载</a>

上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>



7、列表
1)有序列表,
2)无需序列
3)自定义列表

1)无序列表 前面无数字
<ul type=square>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块

2)有序列表,前面有数字

    <ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
其中可以放文字,图片,或链接
有type属性,设置排序使用什么数字
a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号(默认)

8、表格的构成,
table,外框
tr 行
td 列
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
3行 3列
表格的属性
border 边框粗细
th,是tr的属性,列标题,自动居中,加粗(和tr用法一样)
colspan,横向合并单元格,需要 整形参数
<tr><th colspan="3">name</th></tr> 

表格的合并
rowspan ,列项合并,整数参数

    
9、表单    传递参数,数据
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
<form>
</form>
属性 action,指定表单发送的地址(表单转向的网页等)
属性 method 发送的方式 get,post 
get方法 数据会附加到url的后面传递给服务器 默认
post,将数据包大包发给服务器,等候服务器来读取 
表单中重要的字元素 input button 

<form method="get" action="">
username: <input type="text" name="用户名"><br>
passward: <input type="text" name="密码">
</form>
10、input元素,(输入框)他是表单的一个字属性
指定表单中的内容项,比如输入内容的文本框
可以指定表单属性,也可以放在表单的外面。
input元素的属性:
type,指定输入框的类型,
text 单行文本,
password 密码,
submit 提交按钮,
radio 单选按钮
reset 重置按键,
image 图片式按键
<input type="image" src="1.jpg" alt="图标" width="48" height="48"
点击图片会上交点击的坐标(get方式url中可以看到)


name:名称,输入内容识别名称,传递参数时候的参数名称
value: 默认值,输入框默认填入的内容,
maxlength,指定最大长度maxlength="3"
placeholder,设置提示信息的。
required:表示内容必须填写,不然不能提交。

<form action="xxx.html" method="get" align="center">
username: <input type="text" name="用户名" required><br>
passward: <input type="password" name="密码" maxlength="3" placeholder="你猜"><br>
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="按键">
<input type="image" src="img_submit.gif" alt="图标" width="48" height="48">    
</form>

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

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

相关文章

【车联网kafka】Kafka核心架构与实战经验(第一篇)

目录 一、我与kafka的缘分-初识Kafka 二、Kafka深入探讨-了解kafka ​编辑2.1 kafka 生产者框架 2.1.1 生产者在生活中的实例 2.1.2 kafka生产者流程及框架 1. 主线程处理阶段 2. Sender线程处理阶段 设计优势总结 2.2 kafka 生产者框架中的一些关键参数 2.3 kafka 生…

Go 语言变量作用域

Go 语言变量作用域 引言 在编程语言中&#xff0c;变量作用域是定义变量可以使用和不可使用的区域。在Go语言中&#xff0c;理解变量的作用域对于编写高效且易于维护的代码至关重要。本文将详细介绍Go语言中的变量作用域&#xff0c;包括其规则、类型以及实际应用。 一、变量作…

单卡10分钟部署MiniCPM4-0.5B:轻量级大模型本地运行指南

一、介绍 MiniCPM 4 是一个极其高效的边缘侧大型模型&#xff0c;经过了模型架构、学习算法、训练数据和推理系统四个维度的高效优化&#xff0c;实现了极致的效率提升。 &#x1f3d7;️ 高效的模型架构&#xff1a; InfLLM v2 – 可训练的稀疏注意力机制&#xff1a;采用可…

CSS变量与Houdini自定义属性:解锁样式编程新维度

在前端开发中&#xff0c;CSS变量和Houdini自定义属性正在彻底改变我们编写和管理样式的方式。这些技术不仅提高了样式代码的可维护性&#xff0c;更为CSS带来了编程语言的强大能力。一、CSS变量&#xff1a;原生样式的革命 CSS变量&#xff08;CSS Custom Properties&#xff…

Android中PID与UID的区别和联系(2)

一、核心概念对比特性PID (Process ID)UID (User ID)本质进程唯一标识符应用身份标识符分配时机进程启动时动态分配应用安装时静态分配生命周期进程结束时回收应用卸载时才回收变化性每次启动都可能不同长期保持不变作用范围单进程内唯一全设备范围唯一核心作用系统资源管理&am…

TCPDump实战手册:协议/端口/IP过滤与组合分析指南

目录 一、基础过滤速查表 1. 协议过滤&#xff08;单协议&#xff09; 2. 端口过滤 3. IP地址过滤 二、组合过滤实战示例 1. 协议端口组合 2. IP端口组合 3. 复杂逻辑组合 三、高级协议分析示例 1. HTTP请求分析 2. DNS问题排查 3. TCP连接问题分析 四、组合过滤场…

【智能协同云图库】智能协同云图库第八弹:基于阿里云百炼大模型—实现 AI 扩图功能

AI 扩图功能 需求分析 随着 AI 的高速发展&#xff0c;AI 几乎可以应用到任何传统业务中&#xff0c;增强应用的功能&#xff0c;带给用户更好的体验。 对于图库网站来说&#xff0c;AI 也有非常多的应用空间&#xff0c;比如可以利用 AI 绘图大模型来编辑图片&#xff0c;实现…

2025年Solar应急响应公益月赛-7月笔记ing

应急响应身为颜狗的我是真心觉得lovelymem的ui写得~~~~【任务1】应急大师题目描述&#xff1a;请提交隐藏用户的名称&#xff1f;print打印注册表&#xff0c;或者开启环境是就有【任务4】应急大师题目描述&#xff1a;请提交黑客创建隐藏用户的TargetSid&#xff08;目标账户安…

C++/CLI vs 标准 C++ vs C# 语法对照手册

&#x1f680; C/CLI vs 标准 C vs C# 语法对照手册&#x1f9e9; 核心类型系统对比 // 类型声明语法对比 标准 C C/CLI C# ─────────────────────────────────────────────────…

仓库管理系统-2-后端之基于继承基类的方式实现增删改查

文章目录 1 数据库表user 2 后端通用框架 2.1 User.java(实体类) 2.2 使用封装的方法(继承基类) 2.2.1 UserMapper.java(mapper接口) 2.2.2 UserService.java(service接口) 2.2.3 UserServiceImpl.java(service实现类) 2.2.4 UserController.java(控制器) 3 增删改查(封装的方法…

【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据

一个简单的获取内容的办法 表格部分&#xff0c;主要是ref写一下<el-table :data"tableData" ref"tableRef"> </el-table>进入页面的时候绑定监听 mounted(){ // 绑定滚动事件this.$nextTick(() > {const table this.$refs.tableRef;const…

OCR 赋能自动阅卷:让评分更高效精准

考试阅卷中&#xff0c;OCR 技术正成为高效助手&#xff0c;尤其在客观题和标准化答题场景中表现亮眼。将考生答题卡扫描后&#xff0c;OCR 能快速识别填涂的选项、手写数字或特定符号&#xff0c;与标准答案比对后自动判分。相比人工阅卷&#xff0c;它能在短时间内完成成百上…

在docker中安装frp实现内网穿透

服务端frps 1.首先在服务器端安装frps docker pull snowdreamtech/frps2.本地创建frps的配置文件frps.ini [common] bind_port 7000 # frp 服务端控制端口 token xxxxx # 客户端认证密钥3.启动frps docker run -d --name frps \ --network host \ --restartalwa…

电脑开机后网络连接慢?

在数字化日益普及的今天&#xff0c;电脑已成为我们工作和生活中不可或缺的工具。但是&#xff0c;可能很多用户都遇到过电脑开机后网络连接慢的情况&#xff0c;这不仅影响了我们的工作效率&#xff0c;还极大降低了上网体验。怎么解决该问题呢&#xff1f;本文分享的这5个方法…

一分钟部署一个导航网站

先看效果1.部署教程 mkdir -p /home/ascendking/mysite cd /home/ascendking/mysite# 安装 WebStack-Hugo 主题git clone https://gitee.com/WangZhe168_admin/WebStack-Hugo.git themes/WebStack-Hugo# 将 exampleSite 目录下的文件复制到 hugo 站点根目录 cd /home/ascendki…

Rust实现微积分与高等数学公式

基于Rust实现高等数学中微积分 以下是基于Rust实现高等数学中微积分相关公式的示例整理,涵盖微分、积分、级数等常见计算场景。内容分为基础公式和进阶应用两类,提供可直接运行的Rust代码片段(需依赖num或nalgebra等库)。 微分运算 导数的数值近似(前向差分) 适用于函…

Android 键盘

基础知识1. 物理键盘&#xff08;Physical Keyboard&#xff09;定义物理键盘指的是设备上真实存在的、可以按压的键盘。例如&#xff1a;早期的 Android 手机&#xff08;如黑莓、摩托罗拉 Milestone&#xff09;自带的 QWERTY 键盘外接的蓝牙/USB 键盘平板或 Chromebook 上的…

SuperClaude Framework 使用指南

SuperClaude Framework 使用指南SuperClaude Framework 是一个开源配置框架&#xff0c;将 Claude Code 从通用 AI 助手转变为专业的上下文感知开发伙伴。该框架通过模板驱动架构应用软件工程原理&#xff0c;为专业软件开发工作流程提供了强大的增强功能。目前该项目处于 v3.0…

Ruby 发送邮件 - SMTP

Ruby 发送邮件 - SMTP 在互联网的世界中,邮件服务已经成为我们日常生活中不可或缺的一部分。而在开发过程中,使用Ruby发送邮件是一项基本技能。SMTP(Simple Mail Transfer Protocol)是互联网上用于发送电子邮件的标准协议。本文将详细介绍如何在Ruby中使用SMTP发送邮件。 …

Docker运行Ollama

1.docker-compose启动ollama 按照 ollama docker-compose配置说明 配置并启动ollama容器&#xff0c;启动成功后&#xff0c;浏览器访问 http://localhost:11434 如果显示如下即代表成功 如果你的服务器支持GPU&#xff0c;可添加GPU参数支持&#xff0c;参考&#xff1a;htt…