HTMl标签;知识回忆;笔记分享;

news2024/11/16 5:59:09

             HTML标签是用于定义和组织网页内容的基础构建块。每个标签都有特定的作用。

一,标准结构标签:

HTML文档标准结构:
 

<html>
        <head>
        </head>
        <body>
                this is my second html... 
        </body>
</html>

【1】html标签


                       定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

【2】head标签---》里面放的是页面的配置信息


                        head标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
     

【3】body标签---》里面放的就是页面上展示出来的内容


                        body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body是用在网页中的一种HTML标签,标签是用在网页中的一种HTML标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!

二,常用标签详解

1,head中常用标签:

<html>
        <!-- 这是一个注释,注释的快捷键是ctrl+shift+/-->
        <!--
                head标签中:放入:页面的配置信息
                head标签中可以加入:
                <title>、<meta>、<link>、<style>、 <script>、 <base>。
        -->
        <head>
                <!--页面标题-->
                <title>百度一下,你就知道</title>
                <!--设置页面的编码,防止乱码现象
                        利用meta标签,
                        charset="utf-8" 这是属性,以键值对的形式给出  k=v a=b 
                        告诉浏览器用utf-8来解析这个html文档
                -->
                <meta charset="utf-8" /><!--简写-->
                <!--繁写形式:(了解)-->
                <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
                <!--页面刷新效果-->
                <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
                <!--页面作者-->
                <meta name="author" content="msb;213412@qq.com" />
                <!--设置页面搜索的关键字-->
                <meta name="keywords" content="架构师课程" />
                <!--页面描述-->
                <meta name="description" content="架构师页" />
                <!--link标签引入外部资源-->
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
       
        <body>
              
        </body>
</html>

2,body中常用标签:

   (1)body中的图片标签:

                <img     />  :没有结尾关闭  为单标签  是行级标签(自动和其它标签在一行如果没有换行标签)
                src :图片地址:uri地址  
                height:高
                width:宽
                alt:在图片因意外未加载成功时,该属性值占据图片位置进行显示的信息。
                title:图片鼠标悬浮在图片上方的提升信息
                <br/> :换行标签

   (2)超链接标签:

····<a></a>中可以为图片也可以为汉字等。
            ···    属性:
                                href:写跳转后的目标地址   加对应服务器的变量名点击后直接转入搜索值的结果页面。
                                title:图片鼠标悬浮在链接上方的提升信息

        (3)表单标签:

        <form></form>:表单标签        包裹所有的表单元素。

属性 :
                     action:表单添加action属性        用于按钮        提交        表单内容的目的地址

                                                

                    method:
                                       表单数据提交的方式

                 target:表单数据响应的信息显示的位置(开新页面还是在本页面)

                常用表单元素:
文本框:

                <input></input>默认type是文本输入框

                        输入框,宽和高用style选择。

                        属性:name :用来保存用户输入的信息内容

                        maxlength:限制文本框输入的最大长度

                        placeholder:文本框在未输入值前的提示信息

                        readonly:只读  (在使用时因为只有一个选择且和其属性名相同,所以在使用时可以不赋值。)

                        value: 为文本框赋值 (用户输入的值就是value值,可以用其设置默认值:在文本框默认有)

                        disable: 禁用    也可以简写disable,不赋值。禁用和只读区别是禁用的值在提交表单时不会被提交。

                        type=“text”:设置input标签为文本框

                        输入框中的属性name ,在输入框中输入的内容都会赋值d。然后用提交按钮提交给表单。

密码框:

                        input的type=“password”    ,属性和文本框一致

单选按钮:

                        input的type=“radio”  属性和文本框一致,但是name还有区分是否为同一组单选按钮的作用,且有value属性值才会提交按钮内容

                        注:type选择类型时不能有空格,否则赋值失败
                               disabled:让该单选按钮禁用
                               checked:默认,开始时有其属性的按钮默认选择

复选框:

                除了 input 的type=“checkbox”  其余和单选按钮一致。

隐藏域:

input 的type=“hidden ”  不会显示在页面中,但里面内容会提交

按钮:

时间控件:

邮箱控件:

下拉列表:

                       

(4)表格标签:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--表格:4行4列
                        table:表格
                        tr:行
                        td:单元格
                        th:特殊单元格:表头效果:加粗,居中
                        默认情况下表格是没有边框的,通过属性来增加表框:
                        border:设置边框大小
                        cellspacing:设置单元格和边框之间的空隙
                        align="center"  设置居中
                        background 设置背景图片 background="img/ss.jpg"
                        bgcolor :设置背景颜色
                        rowspan:行合并
                        colspan:列合并
                -->
                <table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
                        <tr bgcolor="bisque">
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年纪</th>
                                <th>成绩</th>
                        </tr>
                        <tr>
                                <td align="center">1001</td>
                                <td>丽丽</td>
                                <td>19</td>
                                <td rowspan="3">90.5</td>
                        </tr>
                        <tr>
                                <td colspan="2" align="center">2006</td>
                                <td>30</td>
                        </tr>
                        <tr>
                                <td>3007</td>
                                <td>小明</td>
                                <td>18</td>
                        </tr>
                </table>
        </body>
</html>

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

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

相关文章

代码随想录 | day 15 | 二叉树part03

完全二叉树的节点个数 方法一&#xff1a;可以用递归法遍历一遍左子树和右子树的个数之和再加1等于全部节点个数 class Solution { public:int getcount(TreeNode* cur){if(curNULL) return 0;int leftcount getcount(cur->left);int rightcount getcount(cur->right…

Python3.11二进制AI项目程序打包为苹果Mac App(DMG)-应用程序pyinstaller制作流程(AppleSilicon)

众所周知&#xff0c;苹果MacOs系统虽然贵为Unix内核系统&#xff0c;但由于系统不支持N卡&#xff0c;所以如果想在本地跑AI项目&#xff0c;还需要对相关的AI模块进行定制化操作&#xff0c;本次我们演示一下如何将基于Python3.11的AI项目程序打包为MacOS可以直接运行的DMG安…

90. UE5 RPG 实现技能的装配

在上一篇里&#xff0c;我们实现了在技能面板&#xff0c;点击技能能够显示出技能的相关描述以及下一级的技能的对应描述。 在这一篇里&#xff0c;我们实现一下技能的装配。 在之前&#xff0c;我们实现了点击按钮时&#xff0c;在技能面板控制器里存储了当前选中的技能的相关…

企业高性能web服务器(nginx)

目录 Web服务器基础介绍 正常情况下的单次web服务器访问流程 Apache 经典的 Web服务端 Apache prefork 模型 Apache work模型 Apache event模型 服务端的I/O流程 服务器的I/O 磁盘I/O 网络I/O 网络I/O处理过程 I/O模型 I/O模型相关概念 同步/异步 阻塞/非阻塞 网…

Ant-Design-Vue快速入门+排坑全攻略:打造炫酷Vue应用的s实用指南!

Ant-Design-Vue 是一个基于 Vue.js 的高质量 UI 组件库&#xff0c;适用于企业级后台产品的快速开发。下面将提供一份快速上手指南&#xff0c;并分享一些常见的“坑”和解决方案。 一、Ant-Design-Vue 快速上手指南 1. 安装与引入 确保安装了 Node.js&#xff08;推荐使用最新…

数据结构基础详解(C语言): 栈与队列的详解附完整代码

数据结构 栈 栈的核心重点&#xff1a; 栈是只能从表尾插入和删除的数据结构。 栈的顺序存储结构由两部分组成&#xff0c;top指针和数组。 链栈其实本质就是单链表头插法 文章目录 数据结构 栈1.栈的基本概念1.1 栈的常用操作 2.栈的存储结构2.1 栈的顺序存储结构2.1.1 栈的定…

环境配置1-MobaXterm服务器中Anaconda、Pytorch的安装

①登录 Login as 输入密码时密码不显示&#xff0c;正常输入即可 ②进入指定的下载目录 出现类似界面后&#xff0c;键盘操作Ctrlc即可进行输入 cd / …….(要下载到的目录名称)/ Anaconda的安装 ①输入wget https://repo.anaconda.com/archive/Anaconda3-2022.10-Linux…

如何M3U8视频切片保存到本地,见过视频被别人拿走了吗?

一、数据来源分析 1.明确需求 网址:https://v.qq.com/x/cover/mzc002006n62s11/e0045s2g2eg.html 数据&#xff1a;视频 2.抓包分析 F12 刷新网站 搜索关键字找到对应的数据位置 M3U8 https://vd6.l.qq.com/proxyhttp 二、代码实现步骤 发送请求 …

Linux磁盘操作之df命令

Linux使用df命令&#xff0c;可以查看系统中每个文件系统的总容量、已使用空间、可用空间和使用率。这对于了解磁盘空间的使用情况以及判断是否需要清理或扩展磁盘空间非常有用。 参数说明 df是一个用于显示磁盘空间使用情况的命令&#xff0c;df是disk free的缩写&#xff0…

Kafka事件(消息、数据、日志)的存储

1、查看有关kafka日志配置文件的信息 2、查看kafka全部主题的日志文件 3、查看每个主题的日志文件 4、__consumer_offsets-xx文件夹的作用 package com.power;public class Test {public static void main(String[] args) {int partition Math.abs("myTopic".hashCo…

穿越时光的经典:从LeNet到ResNet,机器学习中的CNN架构进化史

在机器学习的浩瀚星空中&#xff0c;卷积神经网络&#xff08;Convolutional Neural Networks, CNNs&#xff09;无疑是最为耀眼的星辰之一&#xff0c;它们以其卓越的图像处理能力&#xff0c;在计算机视觉领域书写了无数辉煌篇章。从最初的简单架构到如今复杂而高效的模型&am…

嵌入式UI开发-lvgl+wsl2+vscode系列:9、控件(Widgets)(二)

一、前言 接下来我们总结第二部分的控件。 二、示例 1、image&#xff08;图像&#xff09; 1.1、示例1 #include "../../lv_examples.h" #if LV_USE_IMAGE && LV_BUILD_EXAMPLESvoid lv_example_image_1(void) {LV_IMAGE_DECLARE(img_cogwheel_argb);lv…

【算法进阶2-动态规划】最长公共子序列、欧几里得算法-分数、RSA算法-密码于加密

1 最长公共子序列 2 欧几里得算法 2.1 欧几里得算法-分数 3 RSA算法-密码于加密 1 最长公共子序列 -个序列的子序列是在该序列中删去若干元素后得 到的序列。 例:“ABCD”和“BDF”都是“ABCDEFG”的子序列最长公共子序列(LCS)问题:给定两个序列X和Y&#xff0c;求X和Y长度最大…

请你谈谈:async与await是如何控制异步操作的执行顺序

async/await 是 JavaScript 中用于处理异步操作的一种语法糖&#xff0c;它使得异步代码的编写、阅读和维护变得更加容易和直观。async 和 await 关键字是在 ES2017&#xff08;ES8&#xff09;中引入的&#xff0c;旨在简化基于 Promise 的异步操作。 1 async async 是一个函…

Pytorch如何指定device(cuda or cpu)例子解析

代码示例&#xff1a; 在PyTorch中&#xff0c;指定设备&#xff08;CPU或CUDA&#xff09;是一个非常重要的步骤&#xff0c;特别是当你在进行深度学习训练时。以下是一些指定设备的详细例子&#xff1a; 检查CUDA是否可用: 首先&#xff0c;你需要检查你的机器是否支持CUDA&…

【C++ Primer Plus习题】5.9

问题: 解答: #include <iostream> #include <cstring> using namespace std;#define SIZE 20int main() {string words[SIZE];string done "done";int count 0;while (true){cout << "请输入单词:" << endl;cin >> words…

2054. 骑马修栅栏

代码 #include<bits/stdc.h> using namespace std; int mp[505][505]; queue<int> ans; int du[505]; int n0,m,u,v;void dfs(int i) {for(int j1;j<n;j){if(mp[i][j]>1){mp[i][j]--;mp[j][i]--;dfs(j);}}ans.push(i); } int main() {cin>>m;for(int …

javaSpringBootmysql的大学生心理健康管理系统39182-计算机毕业设计项目选题推荐(附源码)

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;高校当然也不例外。大学生心理健康管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c…

一文搞懂不确定性原理

在讲这个之前&#xff0c;我们先要搞清楚&#xff0c;什么是不确定性原理&#xff1f;然后再解释它为什么就是不确定的呢&#xff1f; 我还模糊记得我第一次接触这个东西的时候&#xff0c;是在高中物理教材上面提了一下。其中印象最深的就是&#xff1a;动量确定&#xff0c;…

记录|Steam登录不上,打开速度慢等问题

目录 前言一、方法1二、方法2&#xff1a;cmd指令三、steam账号可以多台电脑一起用吗&#xff1f;更新时间 前言 参考视频&#xff1a; Steam登不上&#xff1f;商店打不开&#xff1f;多种方案助你解决问题&#xff01; 一、方法1 打开Steam的快捷方式的“属性”&#xff0c;…