HTML总结

HTML简介

HTML(Hyper Text Markup Language)的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

整体结构 

<!--告诉浏览器,使用DOCTYPE规范-->
<!DOCTYPE html>
<html lang="en"><!--总标签-->
<!--head标签代表网页头部-->
<head><!--meta标签用来描述网页信息--><meta charset="UTF-8"><title>Title</title>
</head>
<!--body标签代表网页主体-->
<body></body>
</html>

基本标签 

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>

段落标签

<p>hello</p>
<p>world</p>

换行标签

hello<br/>
world<br/>

水平线标签

<hr/>

字体样式标签

斜体

<em>hi</em>

字体样式

粗体

<strong>hi</strong>

特殊符号标签

以&开头

以;结尾

空格

&nbsp;

大于

&gt;

小于

&lt;

图像标签

width与height选填

<img src="图片地址" alt="图片加载失败后显示" width="300" height="200">

 超链接标签

target可选 

target="_blank"在新网页打开

target="_self"在自己的网页打开,默认选项

a+Tab

<a href="要跳转到的页面" target="窗口在哪里打开">点击可以进行跳转,可以设置为图片</a>

锚链接

需要一个锚进行标记

可以定位到所标记的位置 

<!--使用name作为标记-->
<a name="top">顶部</a>
...
...
<a href="#top">回到顶部</a>
<!--跳转到first.html下的down标签-->
<a href="first.html#down">跳转</a>

功能性链接

邮箱

<a href="mailto:surprise_a@163.com">点击联系我</a>

列表标签

有序列表

<ol><li>Java</li><li>C/Cpp</li><li>Python</li><li>PHP</li>
</ol>

无序列表

<ul><li>Java</li><li>C/Cpp</li><li>Python</li><li>PHP</li>
</ul>

自定义列表

dl:标签

dt:列表名称

dd:列表内容

<dl><dt>学科</dt><dd>Java</dd><dd>CPP/C</dd><dd>PHP</dd><dt>base</dt><dd>北京</dd><dd>哈尔滨</dd><dd>太原</dd>
</dl>

表格标签

table

行 tr

列 td colspan 跨列的长度

         rowspan 跨行的长度

border 边框的宽度

<table border="5px"><tr><td colspan="3">学生成绩</td></tr><tr><td rowspan="2">xm</td><td>语文</td><td>100</td></tr><tr><td>数学</td><td>100</td></tr><tr><td rowspan="2">xh</td><td>语文</td><td>100</td></tr><tr><td>数学</td><td>100</td></tr></table>

媒体元素

视频标签

video

src:资源路径

controls:控制条,可以控制开启和关闭

autoplay:自动播放

<video src="" controls autoplay></video>

音频标签

audio

src:资源路径

controls:控制条,可以控制开启和关闭

autoplay:自动播放

<audio src="" controls autoplay></audio>

页面结构分析

header 标记头部区间的内容

footer 标记脚步区间的内容

nav 导航辅助内容 

section Web页面中的一块独立区域

<header><h2>网页头部</h2>
</header><section><h2>网页主体</h2>
</section><footer><h2>网页脚部</h2>
</footer>

iframe内联框架

iframe

在网站中嵌入另一个网站

src 地址

weight 宽度

height 高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000" height="800"></iframe>

表单

action 表单提交的位置 可以是网站也可以是请求处理地址

method 提交方式post或者get

get提交 可以在url中看到提交的信息,不安全,高效

post提交 比较安全,可以传输大文件

表单元素格式

属性说明
type指定元素的类型。text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为text
name指定元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。其他类型以像素为单位
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否被选中

文本框

value默认初始值

maxlength最长能写几个字符

size文本框的长度

<input type="text" name="username" value="xm" maxlength="8" size="30">
<p>名字:<input type="text" name="text" >
</p>
<p>密码:<input type="password" name="pwd">
</p>

单选框

radio

为单选框radio指定组后就只能进行单选(通过name指定组)

checked表示默认

<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女

 多选框

checkbox

<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏

按钮

button普通按钮

image图像按钮

submit提交按钮

reset重置按钮

<input type="button" name="btn1" value="点击">
<input type="image" src="...">

下拉框

<select name="列表名称"><option value="china">中国</option><option value="us">美国</option><option value="eth">瑞士</option><option value="india">印度</option>
</select>

文本域

<textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>

文件域

<input type="file" name="files">
<input type="button" value="上传" name="upload">

验证

邮箱

<input type="email" name="email">

URL

<input type="url" name="url">

数字

<input type="number" name="num" max="100" min="0" step="1">

滑块

音量

<input type="range" name="voice" min="0" max="100" step="1">

搜索框

<input type="search" name="serch">

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

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

相关文章

C++模板背后的黑箱操作:编译器

C模板背后的黑箱操作:编译器 编译器如何处理模板 模板代码的处理 为了理解模板的复杂性&#xff0c;你需要了解编译器是如何处理模板代码的。当编译器遇到模板方法定义时&#xff0c;它会进行语法检查&#xff0c;但实际上不会编译模板。编译器不能编译模板定义&#xff0c;…

Python Opencv实践 - 简单的AR项目

这个简单的AR项目效果是&#xff0c;通过给定一张静态图片作为要视频中要替换的目标物品&#xff0c;当在视频中检测到图片中的物体时&#xff0c;通过单应矩阵做投影&#xff0c;将视频中的物体替换成一段视频播放。这个项目的所有素材来自自己的手机拍的视频。 静态图片&…

Java注册并监听全局快捷键

背景 之前在博客中分享了SWT托盘功能, 随之带来一个问题, 当程序最小化后无法快速唤醒, 按照平时使用软件的思路, 自然想到了注册全局快捷键, 本文介绍使用java方式实现全局快捷键的注册. 方案 通过google,搜到一个现成的库: jintellitype, 使用maven可以直接引用, 非常方便…

istio为什么能代替传统的SpringCloud 服务网格Istio概述

服务网格Istio概述 什么是服务网格(Service Mesh)&#xff1f;istio简介边车模式&#xff08;Sidecar&#xff09;为什么istio能代替传统SpringCloud&#xff1f;整体架构 首先奉上 istio官网 什么是服务网格(Service Mesh)&#xff1f; 服务网格详解 服务网格&#xff08;Se…

JS - 包装类型

目录 1&#xff0c;什么是包装类型2&#xff0c;作用3&#xff0c;和其他引用类型的区别4&#xff0c;如何为基本类型添加属性或方法 1&#xff0c;什么是包装类型 在 js 中&#xff0c;数据类型分为基本数据类型和引用数据类型。 而这2个类型有个明显的区别&#xff1a;引用…

SpringMVC修炼之旅(2)基础入门

一、第一个程序 1.1环境配置 略 1.2代码实现 package com.itheima.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;//定义…

【JaveSE】:认识异常

异常 一.异常的概念二.异常的体系结构1.基础结构2.异常分类 三.异常的处理1.防御式编程2.异常的抛出3.异常捕获4.try-catch捕获并处理5.finally 四.异常处理流程五.自定义异常 一.异常的概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常。 算术异常 数组越界…

推荐一款手持式ECU刷写设备,国产软件配合使用

同星智能开发的一款手持式ECU刷写工具——TF1011&#xff0c;在TSMaster中导入诊断流程即可离线一键刷写。在 PC 端完成配置后&#xff0c;在设备可以在手持式离线场景下实现&#xff1a;基于 UDS 协议的诊断和基于 UDS 协议的 Flash Bootloader 程序更新功能。 产品简介—TF10…

Spring 面试题——事务

目录 1.谈谈对 Spring 事务的理解。2.Spring 管理事务的方式有哪几种&#xff1f;3.✨Spring 事务底层源码是如何实现的&#xff1f;3.1.后置处理3.2.事务执行3.3.总结 4.Transactional 注解有什么作用&#xff1f;它的常用属性有哪些&#xff1f;5.✨Spring 事务中的传播行为是…

ansible常用模块介绍

ansible运行模块的两种方式 Ad - Hoc 利用 ansible 命令直接完成管理 &#xff0c; 主要用于临时命令使用场景 ansible westos -m shell -a ls /mnt playbook ansible 脚本 &#xff0c; 主要用于大型项目场景 &#xff0c; 需要前期的规划 vim test.yml - hosts: all task…

【栈】车队

题目&#xff1a; /** 单调栈&#xff1a;存储到终点的时间&#xff0c;需要考虑浮点数* 思路&#xff1a;首先按照距离进行排序&#xff08;目的&#xff1a;如果离终点远的车辆用时比前面的车辆用时短&#xff0c;则是一个车队)* 排序后计算每一辆车辆的时间如果用…

web:[SUCTF 2019]CheckIn(一句话木马,.user.ini)

题目 页面显示 上传文件&#xff0c;随便上传一个文件试试 上传了一个文本&#xff0c;显示失败&#xff0c;不是图片 那就换图片马上传试试 不能包含<?,换一种写法&#xff0c;需要加上GIF89a&#xff0c;进行exif_imagetype绕过 上传成功 这里用.user.ini或者用post传参…

甘草书店:#8 2023年11月22日 星期三「“说一套做一套”的甘草与麦田」

最近与甘草书店的投资方和意向投资方沟通&#xff0c;听取了来自不同领域不同人群的观点。他们讲的都有道理&#xff0c;但他们说的都不是甘草。就像“麦田”成立之前&#xff0c;世间没有“麦田”一样&#xff1b;“甘草”出现之前&#xff0c;世间没有也没有“甘草”。 故事…

力扣116. 填充每个节点的下一个右侧节点指针(详细讲解root根节点的理解)

题目&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右…

220V工频正弦波逆变器设计

摘 要 与传统逆变器相比&#xff0c;工频正弦波逆变器具有电容电压应力低的优点。但是工频正弦波逆变器存在开关器件电压应力大和开关频率高的缺陷。将SPWM调制策略应用于工频正弦波逆变器&#xff0c;并在不产生电流纹波的条件下实现了最大调制度&#xff0c;不仅能够减小开关…

05.开闭原则(Open Closed Principle)

“你这个人怎么这么轴&#xff1f;让你改改以前的代码怎么和要了你命似的&#xff1f;难道你的能力仅限于此吗&#xff1f;” “你懂什么&#xff1f;我有我的原则&#xff01;我有我的信仰&#xff01;” 一言 开闭原则即&#xff1a;对扩展开放&#xff0c;对修改关闭&#…

D. In Love

贪心&#xff0c;维护最靠左的右端点以及最靠右的左端点 // Problem: D. In Love // Contest: Codeforces - Codeforces Round 905 (Div. 3) // URL: https://codeforces.com/contest/1883/problem/D // Memory Limit: 256 MB // Time Limit: 2000 ms // // Powered by CP Edi…

【从0配置JAVA项目相关环境1】jdk + VSCode运行java + mysql + Navicat + 数据库本地化 + 启动java项目

从0配置JAVA项目相关环境 写在最前面一、安装Java的jdk环境1. 下载jdk2. 配置jdk3. 配置环境变量 二、在vscode中配置java运行环境1. 下载VSCode2. 下载并运行「Java Extension Pack」 三、安装mysql1.官网下载MySQL2.开始安装如果没有跳过安装成功 3.配置MySQL Server4.环境变…

【爬虫】自动下载指定网站全部图片(Java版)

爬虫是一种自动化程序&#xff0c;能够模拟人类的浏览行为&#xff0c;访问网络资源并提取所需数据。它可以通过发送HTTP请求获取网页内容&#xff0c;并对网页进行解析和数据提取。 在大多数时候&#xff0c;提到爬虫我们就会想到 Python&#xff0c;其实 Java 也是可以实现爬…

判断完数(写出部分函数)

例如&#xff1a;本题要求实现一个函数&#xff0c;判断一个自然数是否是完数。如果一个自然数除自身之外的因子和等于它自己&#xff0c;则称该数为完数。例如 6 1 2 3&#xff1b;则6是完数。 函数接口定义&#xff1a; 在这里描述函数接口。&#xff1a;int isPerfect (…