HTML:常用标签

1. 标签概念 

<!--

    五要素: 文档声明<!DOCTYPE html>

        根标签<html></html>    

        头部元素<head></head>

        主体元素<body></body>

        注释标签

    1.html文件的根标签, <html></html>所有其他标签都要放在这个标签中间

    2.html文件下的一级标签

            <head></head>存放不直接展示却很重要的内容

            如: 1.字符集编码(以什么编码方式展示出来)

                单标签<meta charset = "utf-8"/>告诉浏览器用什么字符集对文件进行解码

                2.css引入

                3.js引入

                4.其他标签

            <body></body> 体标签

            页面要展示的主体内容

    3.专业词汇:

        1.标签tag: <>,一对尖括号即一个标签

        2.属性attribute: 对标签特征进行设置的一种方式,属性一般在开始标签中定义。如:<input type = "password"?>

        3.文本text:双标签中的文字

        4.元素element:开始标签+属性+文本+结束标签 称之为一个元素。如:<body> 到 </body>称之为元素

-->

hello wrold 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>你好世界<h1>hello wrold</h1>
</body>
</html>

 2. 标题标签

 <!--

        标题:h1-h6即分为六级的标题

        段落:p

        换行:br:换行

              hr:带横线的换行

    -->

<h1>带领你的部落走向胜利!</h1>
<h2>带领你的部落走向胜利!</h2>
<p>《部落冲突》(Clash of Clans,英文简称COC)是由芬兰游戏公司Supercell Oy开发的一款塔防类的策略手游。<br/><hr/></p>

 3. 序列标签

<!--

        有序列表 ol

        无序列表 ul

        列表项   li

    -->

<ul><li>Java<ol><li>数据类型</li><li>变量</li><li>流程控制语句</li><li>函数</li><li>面向对象</li></ol></li><li>HTML/css/js</li><li>spring全家桶</li></ul>

 4. 超链接标签

<!--

        超链接 a

            href 用于定义要跳转到的资源位置的地址

                1.完整的url:https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343

                2.相对路径:

                            ./  从当前资源所在的路径中寻找目标资源(默认该方式,可省略不写)

                            ../ 从当前资源的上一级路径中开始寻找目标资源(若以该方式必须写)

                3.绝对路径:指定从哪里作为出发点开始查找资源

            targe 用于定义目标资源的打开方式

                1._self  在当前页面直接打开

                2._blank 跳转到另一页面打开

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343" target="_self">食懵你啊1 </a><br><a href="https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343" target="_blank">食懵你啊2</a><br><!--相对路径--><a href="./hello.html" target="_self">hello</a><br><!--绝对路径--><a href="/demo1-html/常见标签/p2列表.html" target="_self" target="_self">hello</a>
</body>
</html>

 5. 图片标签

<!--

        img

            src 定义图片的路径

            title 鼠标悬停时显示的文字

            alt 打开资源失败时显示的内容

            width 定义图片大小,只需要输入宽会自动按照一定比列设置高

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="/demo1-html/img/屏幕截图 2024-03-23 162925.png" width="300" title="奶龙" alt="404" /><br><img src="/demo1-html/img/屏幕截图 2024-03-23 162925.png" title="drogen" alt="404"/>
</body>
</html>

 6. 表格标签

<!--

        表格标签 table整张表

                    thread 表头

                    tboody 表体

                    tfoot  表尾

                        tr 表格中的一行

                            td 表格中一行的一个单元格

                            th 表格中的加粗且居中的td

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--设置表格标题的样式style="text-align: center;"将标题居中--><h3 style="text-align: center;">部落成员竞赛表</h3><table borde border="1px" style="margin: 0px auto; width: 400px;"><thread><tr><th>姓名</th><th>项目</th><th>名次</th><th>备注</th></tr></thread><tbody><tr><td>莫雪韵</td><td>acm</td><td>国一</td><!--rowspan 表示行,即当前各自要横着占3格--><td rowspan="5">全体起立</td></tr>><tr><td>吴奈</td><td>蓝桥杯</td><td>国一</td></tr><tr><td>张晓琳</td><td>双创</td><td>国二</td></tr><tr><td>分队</td><!--colspan 即当前单元格要在表内竖着占3格--><td colspan="2">国家队</td></tr><tr><td>总人数</td><td colspan="2">3</td></tr></tbody></table>
</body>
</html>

 7. 表单标签

<!--

            form 表单标签

                action:定义数据的提交地址

                    1.url

                    2.相对路径

                    3.绝对路径

                method:定义数据的提交方式

                    1.get

                        参数:url??usename=343&password=434324

                        数据暴露在地址栏,数据相对不安全

                        地址栏长度有限,提交的数据量不大

                        地址栏只能是字符,不能提交文件  

                        发送数据效率相对post较高

                    2.post

                        参数默认不放在url后面

                        数据不暴露在地址栏,数据相对安全

                        数据可以单独打包发送,数据量大

                        可以发送文件

           

            表单项标签的name属性一定要定义,该属性用于明确提交时的参数

            表单项的value值可以定义,不定义就会使用默认的值,当输入值会将默认值覆盖

            input 表单项标签

                type 输入信息的表单项类型

                    text     单行文本框

                    password 密码框

                    submit   提交按钮

                    reset    按钮重置

                    radio    单选框(多个选项选其一)

                             多个单选框同时使用若要产生互斥效果则定义的属性名需要相同

                    checkbox 多选框,可以同时选择多个选项

                    file     选择文件

            注意:设置默认内容需要用到checked

            textarea 多行文本框(文本域)

            select 下拉框

                option 下拉框的内容

            注意:设置默认内容需要用到selected

           

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--定义往纳提交,提交方式--><form action="hello.html" method="get"><!--添加表单项标签,输入用户信息--><!--hidden 数据不显示出来,但是提交时会携带readonly 即该文本框显示出来,但不能修改,该数据提交时会携带disabled 不可用的数据,该数据提交时不会携带--><input type="hidden" name="id" value="123" /> <br><input type="text" name="pd" value="456" readonly /> <br><input type="text" name="td" vlaue="789" disabled /> <br>账号: <input type="text" name="usename" /> <br>密码:<input type="password"  name="password" /> <br><!--定义单选框radio,属性名为gender,选择提交后的值为1/0,不设值默认为on,开启第一个单选框的默认选择,即两个单选框都不选则默认选择checked为true的单选框-->性别:<input type="radio" name="gender" value="1" checked="checked"/> 男<input type="radio" name="gender" value="0" /> 女<br>爱好:<input type="checkbox" name="hobby" value="1" /> 篮球<input type="checkbox" name="hobby" value="2" /> 羽毛球<input type="checkbox" name="hobby" value="3" /> 游泳<input type="checkbox" name="hobby" value="4" /> 骑车<br>个人简介:<textarea name="intro" style="width: 300px; height: 100px;"></textarea><br>籍贯:<select name="pro"><option value="1">京</option><option value="2">粤</option><option value="3">桂</option><!--selected为即默认选择该内容--><option value="null" selected>请选择</option></select><br>选择头像:<input type="file" /> <br><!--设置登录按钮,不设置值默认为提交,设置值为登录--><input type="submit" value="登录"/><!--设置重置按钮,不设置值默认为重置,设置值为清空--><input type="reset" value="清空"/> </form>
</body>
</html>

 8. 布局标签

 <!--

        css样式基础:

            通过元素的style属性进行设置

            stytle="样式名1: 值; 样式名2: 值; ... ;"  

       

        块元素:自己独占一行的元素

            div:对于很多css样式大多都是生效的,如:长宽高等等

       

        行元素:不会自己独占一行的元素

            span:对于很多css样式都是不生效的

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="background-color: blueviolet;"><div style="border: 1px solid rgb(0, 255, 60); width: 400px; height: 200px; margin: 10px auto; background-color: cornflowerblue;">123</div><div style="border: 1px solid rgb(255, 106, 0); width: 400px; height: 200px; margin: auto;">456</div><div style="border: 1px solid rgb(238, 255, 0); width: 400px; height: 200px; margin: auto;">789<div style="border: 1px solid blue; width: 200px; height: 100px; margin: auto;">niubi</div></div><span style="border: 20px; width: 2000px;">hello world</span></div></body>
</html>

 9. 实体标签

 <!--

        html代码来说,某些符号有特殊含义的,需要进行转义才能输出该符号

        如:< > 代表标签的符号,在浏览器解析时会将该符号解析成标签,若要输出该符号,则需要进行转义

    -->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--输出 <h1> 一级标题</h1> -->&lt; h1 &gt; 一级标题 &lt; / h1 &gt;<!--输出&gt-->&amp;gt</body>
</html>

 

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

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

相关文章

yarn、npm设置淘宝国内镜像

NPM 1. 查询当前镜像 npm get registry 2. 设置为淘宝镜像 npm config set registry https://registry.npm.taobao.org/ (旧地址&#xff0c;不再维护&#xff0c;可以使用) npm config set registry https://registry.npmmirror.com/ (最新地址)3. 设置为官…

第三十一章 配置 Web Gateway 的默认参数 - 事件记录参数

文章目录 第三十一章 配置 Web Gateway 的默认参数 - 事件记录参数 第三十一章 配置 Web Gateway 的默认参数 - 事件记录参数 事件日志级别字段指定 Web Gateway 写入 Web Gateway 事件日志的信息。日志记录选项定义为一串字符&#xff0c;每个字符代表一个日志记录命令。此处…

springboot实现简单的excel导入

前文其实已经实现了较为复杂的excel导入了&#xff0c;这篇博客就给大家介绍简单的excel表格导入方法 以下是我的excel表格&#xff1a; 以下是我的实体类&#xff1a; package com.datapojo.bean;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.m…

直接插入排序 希尔排序 选择排序 堆排序

目录 一. 排序的概念及应用 1.1 排序的概念 1.2 常见的排序算法 二. 常见排序算法的实现(从小到大排序) 2.1 插入排序 2.1.1基本思想&#xff1a; 2.1.2 直接插入排序 2.1.3 希尔排序( 缩小增量排序) 2.2 选择排序 2.2.1基本思想&#xff1a; 2.2.2 直接选择排序: 2…

【Node.js】mysql 操作 MySQL 数据库

实际案例 db/index.js const mysql require(mysql)// 创建数据库的连接 const db mysql.createPool({host: localhost,user: root,password: hxg20021126,database: management-pro })module.exports dbLoginController.js const db require(../db/index) const bcrypt …

动态规划——线性dp

数字三角形 // 从上到下 #include <iostream> #include <algorithm> using namespace std; const int N 510, INF 1e9; int n; int a[N][N]; int f[N][N];int main() {scanf("%d", &n);for (int i 1; i < n; i )for (int j 1; j < i; j …

宝塔面板安装sqlite

宝塔面板是一个非常流行的服务器管理面板&#xff0c;它提供了许多方便的功能来管理服务器和网站。但是&#xff0c;默认情况下&#xff0c;宝塔面板不支持SQLite数据库的安装和管理。SQLite是一个轻量级的嵌入式数据库&#xff0c;它在很多应用程序中被广泛使用。如果你需要在…

计算机组成原理 CPU组成与机器指令执行实验

一、实验目的 (1)将微程序控制器同执行部件( 整个数据通路)联机&#xff0c;组成一台模型计算机; (2)用微程序控制器控制模型机数据通路; (3)通过CPU运行九条机器指令(排除中断指令)组成的简单程序&#xff0c;掌握机器指令与微指令的关系&#xff0c;牢固建立计算机的整机概…

深度学习pytorch——2D函数优化实例(持续更新)

课程&#xff1a;课时46 优化问题实战_哔哩哔哩_bilibili 这就是我们今天要求的2D函数&#xff1a; 下图是使用python绘制出来的图像&#xff1a; 但是可以看出有4个最小值&#xff0c;但是还是不够直观&#xff0c;还是看课程里面给的比较好&#xff0c;蓝色是最低点位置&am…

Python 全栈系列236 rabbit_agent搭建

说明 通过rabbit_agent, 以接口方式实现对队列的标准操作&#xff0c;将pika包在微服务内&#xff0c;而不必在太多地方重复的去写。至少在服务端发布消息时&#xff0c;不必再去考虑这些问题。 在分布式任务的情况下&#xff0c;客户端本身会启动一个持续监听队列的客户端服…

动态规划16 | ● 583. 两个字符串的删除操作 ● *72. 编辑距离

583. 两个字符串的删除操作 https://programmercarl.com/0583.%E4%B8%A4%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%88%A0%E9%99%A4%E6%93%8D%E4%BD%9C.html 考点 子序列问题 我的思路 dp[i][j]的含义是&#xff0c;当两个字符串分别取前i和j个元素时&#xff0c;对应…

路由相关基本概念(IP入门)

IP协议--网络层--路由器、三层交换机&#xff08;冗余备份&#xff09; 路由器的功能&#xff1a; 1、构建和维护路由表 2、根据路由表进行转发 3、路由器接口划分广播域 路由--实现路由的设备&#xff08;路由器、多层交换机&#xff09; 协议&#xff1a;定义一种语言 路…

Django(一)- 环境搭建和快速入门

一、搭建环境 1、创建Python虚拟环境 (base) C:\Users\35351>conda create -n django_study python3.9 2、安装Django (django_study) C:\Users\35351>pip install Django >> 查看安装版本 (django_study) C:\Users\35351>python -m django --version 3、安…

数据分析与挖掘

数据起源&#xff1a; 规模庞大&#xff0c;结构复杂&#xff0c;难以通过现有商业工具和技术在可容忍的时间内获取、管理和处理的数据集。具有5V特性&#xff1a;数量&#xff08;Volume&#xff09;&#xff1a;数据量大、多样性&#xff08;Variety&#xff09;&#xff1a…

CSS(二)

一、CSS 的复合选择器 1.1 什么是复合选择器 在 CSS 中&#xff0c;可以根据选择器的类型把选择器分为基础选择器和复合选择器&#xff0c;复合选择器是建立在基础选择器之上&#xff0c;对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素&#xff…

Mockito.when返回的list长度为0问题解决方法

今天玩Mockito.when遇见一个问题Mockito.when返回的list长度为0&#xff1b;上代码 ArrayList<Org> childDepts new ArrayList<>();Org org new Org();org.setDeptId("1");org.setDeptName("1");childDepts.add(org); Mockito.when(orgMappe…

系统设计之缓存(Caches)和内容分发网络(CDNs)设计

系统设计之缓存(Caches)和内容分发网络(CDNs)设计 目录 系统设计之缓存(Caches)和内容分发网络(CDNs)设计缓存不同的缓存策略1. 浏览器缓存缓存命中和缓存未命中2. 服务器缓存缓存失效淘汰策略:缓存的决策制定者自适应策略自定义策略淘汰策略的影响3. 数据库缓存实现工…

OC对象 - 关联对象(如何给分类添加成员变量)

文章目录 OC对象 - 关联对象&#xff08;如何给分类添加成员变量&#xff09;1. 基本使用1.1 提供的API1.1.1 添加关联对象1.1.2 获得关联对象1.1.3 移除所有关联对象1.1.3 修饰符 1.2 使用方法1.2 Key的常见用法1.2.1 使用的get方法的selecor作为key1.2.2 使用指针的地址作为k…

100 天机器学习指南

100 天机器学习指南 除了机器学习专栏&#xff0c;我们打算出另外一期专栏&#xff0c;叫做100 天机器学习指南&#xff0c;目标是通过100天的深入持续学习&#xff0c;让我们没有机器学习经验的人&#xff0c;也可以从事简单的机器学习工作&#xff0c;为职业生涯寻找增长点&…

LeetCode每日一题——移除链表元素

移除链表元素OJ链接&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 思路&#xff1a; 这与之前的移除元素的题目很相似&#xff0c;那么我们同样可以用类似的做法&#xff08;双指针&#xff09;进行解题。但是这是一个链表删除&a…