HTML前端

html

超文本标记语言

文本:文字字符

超文本:网页内容

标记:标签 标识

提供许多标签,不同标签功能不同,网页就是通过这些标签描述出来的,最终由浏览器解释运行我们看到的网页

<!-- 
html注释<!DOCTYPE html> 声明html语言的版本信息,为html5版本 告诉浏览器以html5标准解释运行-->
<!DOCTYPE html>
<!-- HTML骨架标签 -->
<html><head><meta charset="utf-8" /><title>我的第一张网页</title><!-- 网页标签 --></head><body>网页内容<!-- 标签结构<标签名><开始标签>标签名</结束标签> 闭合标签(双标签)<标签 属性=“ ”/>完成一个特定的设置功能,没有标签体<br/> 换行标签标签中可以有属性:可以标签属性--></body>
</html>

<!--

标签结构

<标签名>

<开始标签>标签名</结束标签> 闭合标签(双标签)

<标签 属性=“ ”/>完成一个特定的设置功能,没有标签体 换行标签

 标签中可以有属性:可以标签属性
  -->

<!-- 标题标签一个标签独占一行--><h1 align="left">一级标签</h1><h2 align="center">二级标签</h2><h3 align="right">三级标签</h3>
​		 <!-- 
​		 段落标签
​		 一个p标签,表示一个独立的段落
​		 -->
 <!-- 无序列表<ul><li>列表项1</li>--><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul><!-- 有序列表--><ol type="1"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ol><ol type="A"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ol>
</body>

a标签:

HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是 通过连接来访问其他网页资源。 

特殊符号转义 

在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。 比如< 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html签。 例如:

会被解析为b标签,空格,再多的空格都会当一个空格处理。 为了可以使用这些预留字符,我们必须在html中使用字符转义。

* 小于号< *

版权(C) < © *

大于号> *

商标(TM) > ™ * 空格 *

注册商标(R)   ®  

表格

表格的基本构成标签

table标签:表格标签

tr标签:表格中的行

th标签:表格的表头

td标签:表格单元格

<body><!-- table 表示一个表格  设置宽和高tr  表示一行       设置高度th  表示一个单元格,还是表头,内容会加粗,并且居中  设置宽度td  表示一个普通单元格表格中数据都只能写在单元格cellpadding="0" 设置内容到边框的内边距cellspaacing="0" 设置内容到边框的外边距align="内容水平对齐方式" top middle (默认)--><table border="1" width="400" cellpadding="0" cellspacing="0"><tr height="40"><th height="40">姓名</th><th>JAVA</th><th>c</th><th>python</th></tr><tr><th>主食类</th><th>90</th><th>70</th><th>80</th> </tr><tr><th>dadk</th><th>90</th><th>70</th><th>80</th> </tr><tr><th>王天龙</th><th>90</th><th>70</th><th>80</th> </tr></table></body>

 

<!-- colspan 和并列 从哪列开始合并  --><!--  rowspan="3" 跨行合并--><td  colspan="4"></td></tr><tr><td></td><td></td><td></td><td rowspan=3""></td></tr><tr>

 

</head><body bgcolor=""><!-- 表单:就一个区域,拥有许多输入和选件让用户可以输入选择,最终将数据提交到服务器端readonly 设置只读 不能修改 提交表单时可以被提交到服务器端placeholder="请输入姓名"输入提示信息disabled 禁用组件,不会提交至服务器端--><h3>用户登录页面</h3><form action="server.html" method="get">账号:<input type="text" name="account" value="" placeholder="请输入姓名"/><br />密码:<input type="password" name="password"/><br />性别:<input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/> 女<br />课程:<input type="checkbox" name="course" value="java"/>java<input type="checkbox" name="course" value="c"/>c<input type="checkbox" name="course" value="python"/>python<input type="checkbox" name="course" value="html"/>html<br />附件:<input type="file" name="file"/><br />省份:<select><option>请选择</option><option value="101" selected>北京</option><option value="102">天津</option><option value="103">山西</option><option value="104">陕西</option><option value="105">山东</option><option value="106">河南</option><option value="107">河北</option><option value="18">湖南</option></select><br />地址:<textarea  rows="1" cols="20" name="address"></textarea><br /><input type="submit" value="保存"/><input type="reset"/><input type="button" value="登录" onclick="alert('你好');"/></form></body>

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

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

相关文章

C++ 50 之 继承中的对象模型

继承中的对象模型 在C编译器的内部可以理解为结构体&#xff0c;子类是由父类成员叠加子类新成员而成&#xff1a; #include <iostream> #include <string> using namespace std;class Base03{ public:int m_a; protected:int m_b; private:int m_c; // 哪怕是…

lua对接GPT4实现对话

演示效果&#xff1a; 准备材料&#xff1a; 1、FastWeb网站开发服务&#xff1a;fwlua.com 2、一台服务器 该示例使用开源项目&#xff1a;fastweb 实现。 代码比较简单&#xff0c;主要是两部分&#xff0c;一个lua代码和一个html页面&#xff0c;用来用户发起请求和后台…

面向事件编程之观察者模式

前言 村里的老人常说&#xff1a;真男人就该懂得遵守“三不原则”——不主动、不拒绝、不负责。 一个复杂的软件系统&#xff0c;其中必然会存在各种各样的“对象”&#xff0c;如果在设计之初没有注意控制好耦合度&#xff0c;导致各个对象甚至是函数之间高度耦合&#xff0…

网络安全知识全景地图V1.0 - 20240616更新

网络安全领域的知识全景涵盖了从基础概念到高级技术的广泛内容。博主基于自身十年多的工作经验结合CISSP认证官方教材按照不同的主题和层次梳理出如下高层次的概览地图&#xff0c;可以帮助个人和组织理解网络安全领域的主题。 1.1. 基础理论 1.1.1. 网络安全概述 网络安全的…

React@16.x(29)useRef

目录 1&#xff0c;介绍2&#xff0c;和 React.createRef() 的区别3&#xff0c;计时器的问题 目前来说&#xff0c;因为函数组件每次触发更新时&#xff0c;都会重新运行。无法像类组件一样让一些内容保持不变。 所以才出现了各种 HOOK 函数&#xff1a;useState&#xff0c;u…

Camtasia Studio 2024软件最新版下载【安装详细图文教程】

​Camtasia是美国TechSmith公司出品的一款集电脑屏幕录制、视频剪辑为一体的软件套装。同时包含Camtasia 录制器、Camtasia Studio&#xff08;编辑器&#xff09;、Camtasia 菜单制作器、Camtasia 剧场、Camtasia 播放器和Screencast的内置功能。 安 装 包 获 取 地 址&#x…

AirPlay技术规范及认证资讯

AirPlay是Apple开发的一种无线技术&#xff0c;允许用户将音频、视频或图片从iOS设备、Mac电脑或其他支持AirPlay的设备无线传输到支持AirPlay的接收器设备上&#xff0c;例如智能电视或音响系统。这项技术基于Wi-Fi网络&#xff0c;提供了一种便捷的方式来共享媒体内容。AirPl…

车票信息的请求与显示

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 1 发送与分析车票信息的查询请求 得到了获取车票信息的网络请求地址&#xff0c;然后又分析出请求地址的必要参数以及车站名称转换的文件&#xff…

《软件测试52讲》——测试基础知识篇

1 你真的懂测试吗&#xff1f;从“用户登录”测试谈起 从“用户登录”测试谈起&#xff0c;“用户登录”功能作为测试对象 作为测试工程师&#xff0c;你的目标是要保证系统在各种应用场景下的功能是符合设计要求的&#xff0c;所以你需要考虑的测试用例就需要更多、更全面。 …

2078.两栋颜色不同且距离最远的房子

街上有 n 栋房子整齐地排成一列&#xff0c;每栋房子都粉刷上了漂亮的颜色。给你一个下标从 0 开始且长度为 n 的整数数组 colors &#xff0c;其中 colors[i] 表示第 i 栋房子的颜色。 返回 两栋 颜色 不同 房子之间的 最大 距离。 第 i 栋房子和第 j 栋房子之间的距离是 a…

Linux应用编程 - i2c-dev操作I2C

嵌入式Linux操作I2C设备&#xff0c;我们一般会在内核态编写I2C驱动程序。另外还能在用户空间编写I2C程序&#xff0c;下面介绍相关代码的实现。 i2c-dev框架在内核中封装了I2C通信所需要的所有通信细节&#xff0c;I2C适配器会在/dev目录下创建字符设备&#xff0c;例如&#…

kettle从入门到精通 第七十课 ETL之kettle kettle数据校验,脏数据清洗轻松拿捏

场景&#xff1a;输入在指定的错误(错误应涵盖数据类型不匹配的情况)行数内&#xff0c;trans不报错&#xff0c;但通过错误处理步骤捕捉&#xff0c;并记入文件&#xff0c;整个数据管线正常完成直至处理完最后一个输入行。 解决方案&#xff1a;使用步骤【数据检验】进行处理…

本周MoonBit新增Wasm1引用计数支持、语法即将添加错误恢复机制

MoonBit更新 【Wasm MVP】Wasm1 后端添加基于 Perceus 算法的引用计数支持 【语法】throw raise try catch 均被保留为关键字 为了即将添加的错误处理机制 【Core】List与sorted_map被移动至core/immut下 List被移动至core/immut/list包中&#xff0c;并被移除内置类型支持 …

哈希表、递归在二叉树中的应用-1372. 二叉树中的最长交错路径

题目链接及描述 1372. 二叉树中的最长交错路径 - 力扣&#xff08;LeetCode&#xff09; 题目分析 题目所述&#xff0c;计算在二叉树中交替遍历的最大深度【左->右->左】【右->左->右】&#xff0c;例如对于从当前根节点root出发&#xff0c;则此时遍历方向有两个…

今日成果2024-6-7 TrustZone TEE安全SDK开发指南

Rockchip Vendor Storage Application Note.pdf OK 开机下&#xff0c;可以实现Vendor Storage的读写。 0ms时同步RTC时间 OK Rockchip_Developer_Guide_TEE_SDK_CN.pdf 什么是TrustZone 此系统方法意味着可以保护安全内存、加密块、键盘和屏幕等外设&#xff0c;从而可确…

视频剪辑可以赚钱吗 快速学会视频剪辑的方法

由于视频剪辑的需求不断增长&#xff0c;学会视频剪辑成为一项自媒体必备的技能&#xff0c;这个技能可以为个人带来收入和职业发展带来机会。无论是作为自由职业者还是在公司工作&#xff0c;掌握视频剪辑技能都可以为你提供更多的工作机会和竞争优势。这篇文章将讲解视频剪辑…

2.深度学习-线性回归

文章目录 环境配置&#xff08;必看&#xff09;线性回归代码工程运行结果1.对比图2.运行结果 环境配置&#xff08;必看&#xff09; Anaconda-创建虚拟环境的手把手教程相关环境配置看此篇文章&#xff0c;本专栏深度学习相关的版本和配置&#xff0c;均按照此篇文章进行安装…

Carsim高级开发:VS Connect通讯开发指南

文章目录 前言一、VS Connect 概念引入二、VS Connect 通讯框架三、Carsim 工程配置1、车辆模型配置2、procedure配置3、Run Control配置4、受控车辆名称配置 四、VS Connect Server代码1、打开Sln工程2、代码修改 五、VS Connect Client代码1、函数的调用关系2、carsim_variab…

5G消息 x 文旅 | 一站式智慧文旅解决方案

5G消息 x 文旅 | 一站式智慧文旅解决方案 文旅 x 5G 消息将进一步强化资源整合&#xff0c;满足游客服务需求、企业营销需求、政府管理需求&#xff0c;推进文化旅游项目的智慧化、数字化&#xff0c;增强传播力、竞争力和可持续性。5G 消息的“原生入口”、“超强呈现”、“智…

帕金森病的食疗建议

帕金森病&#xff08;PD&#xff09;是一种慢性、进展性的神经退行性疾病&#xff0c;主要影响中老年人。虽然目前尚无法根治&#xff0c;但及早规范治疗可显著改善症状&#xff0c;提高患者的生活质量。饮食调理作为帕金森病综合治疗的重要组成部分&#xff0c;对于维持患者较…