Html技术

news2024/9/23 23:59:58

软件架构:

架构访问端服务端
C/SClientServer
B/SBrowserServer

Html:

   Hyper Text Markup Language (超文本标记语言) 简写:HTML HTML 通过标签来标记要显示的网页中的各个部分。

   网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画 面如何安排,图片如何显示等)

网页的组成部分:

内容是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示
表现指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用 CSS 技术实现
行为指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

创建Html文件:

创建一个 web 工程(静态的 web 工程

在工程下创建 html

HTML 文件的书写规范:

<html> 表示整个 html 页面的开始
 <head> 头信息
  <title>标题</title> 标题
 </head>
 <body> body 是页面的主体内容
  页面主体内容
 </body>
</html> 表示整个 html 页面的结

示例:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>标题</title>
 </head>
 <body>
  hello
 </body>
</html>

注:Java 文件是需要先编译,再由 java 虚拟机跑起来。但 HTML 文件它不需要编译,直接由浏览器进行解析执行。


注释:

   注释不能嵌套

<!-- 注释内容 -->

标签简介:

   标签名大小写不敏感。

   标签不能交叉嵌套

   标签必须正确关闭

   属性必须有值,属性值必须加引号

注:html 代码不是很严谨。有时候标签不闭合,也不会报错

标签属性:

基本属性:

// 可以修改简单的样式效果
bgcolor="red"

事件属性:

// 可以直接设置事件响应后的代码。
onclick="alert('你好!');" 

标签分类:

但标签:

   没有文本内容

// <br/> 换行
<标签名/>

双标签:

   某些标签可以有文本内容:<div/>

// <div>早安,尚硅谷</div>
<标签名>封装的数据</标签名>

Font标签:

   可以用来修改文本的字体,颜色,大小(尺寸)

Font标签属性:

color属性修改颜色
face属性修改字体
size属性修改文本大小
<font color="red" face="宋体" size="7">我是字体标签</font>

特殊字符:


标题标签:

   标题标签是 h1 到 h6;数字越大标签越小。

标题标签属性:

align(对齐方式)left左对齐(默认
center剧中
right右对齐
<h1 align="left">标题 1</h1>

超链接:

   点击之后可以跳转的内容

<a href="http://localhost:8080" target="_self">百度_self</a><br/>

属性:

href连接的地址
target_self表示当前页面(默认值
_blank表示打开新页面来进行跳转

列表标签:

<li>:是列表项

无序列表:

<ul type="none">
 <li>赵四</li>
 <li>刘能</li>
 <li>小沈阳</li>
 <li>宋小宝</li>
</ul>

属性:

type(列表项前面的符号)none(没有)

有序列表:


img 标签:

   可以在 html 页面上显示图片。

<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../2.jpg" width="200" height="260" />

属性:

src设置图片的路径
width设置图片的宽度
height设置图片的高度
border设置图片边框大小
alt设置当指定路径找不到图片时,用来代替显示的文本内容

访问路径:

在 JavaSE 中路径也分为相对路径和绝对路径

相对路径:从工程名开始算

绝对路径:盘符:/目录/文件名

在 web 中路径分为相对路径和绝对路径两种

相对路径:
 . 表示当前文件所在的目录
 .. 表示当前文件所在的上一级目录
 文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省

绝对路径:
 正确格式是: http://ip:port/工程名/资源路径
 错误格式是: 盘符:/目录/文件名

表格标签(table):

table属性:

border设置表格标签
width设置表格宽度
height设置表格高度
align设置表格相对于页面的对齐方式
cellspacing设置单元格间距

tr:

   是行标签

th:

   是表头标签

td:

   是单元格标签

属性
align设置单元格文本对齐方式

跨行(rowspan):

<table width="500" height="500" cellspacing="0" border="1">
 <tr>
// 跨两行
  <td rowspan="2">2.1</td>
  <td>1.3</td>
  <td>1.4</td>
  <td>1.5</td>
 </tr>
 <tr>
  <td>3.2</td>
  <td>3.3</td>
  <td>3.4</td>
  <td>3.5</td>
 </tr
</table>

跨列(colspan):

<table width="500" height="500" cellspacing="0" border="1">
 <tr>
// 跨两列
  <td colspan="2">1.1</td>
  <td>1.3</td>
  <td>1.4</td>
  <td>1.5</td>
 </tr>
</table>

iframe 框架标签:

   可以在页面上开辟一个小区域显示一个单独的页面

ifarme 和 a 标签组合:

   在 iframe 标签中使用 name 属性定义一个名称

   在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<a href="0-标签语法.html" target="abc">0-标签语法.html</a>

表单标签(form):

    表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器

属性:

action属性设置提交的服务器地址
method属性设置提交的方式 GET(默认值)或 POST

表单内标签: 

inputtype=text是文件输入框 value 设置默认显示内容
type=password是密码输入框 value 设置默认显示内容
type=radio是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
type=checkbox是复选框 checked="checked"表示默认选
type=reset是重置按钮 value 属性修改按钮上的文本
type=submit是提交按钮 value 属性修改按钮上的
type=button是按钮value 属性修改按钮上的文本
type=file是文件上传域
type=hidden是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的 时候同时发送给服务器)
select是下拉列表框
option标签是下拉列表框中的选项 selected="selected"设置默认选
textarea表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows设置可以显示几行的高度
cols设置每行可以显示几个字符宽度
<form>
	<h1 align="center">
		用户注册
	</h1>
	<table align="center">
		<tr>
			<td>
				用户名称:
			</td>
			<td>
				<input type="text" value="默认值" />
			</td>
		</tr>
		<tr>
			<td>
				用户密码:
			</td>
			<td>
				<input type="password" value="abc" />
			</td>
		</tr>
		<tr>
			<td>
				确认密码:
			</td>
			<td>
				<input type="password" value="abc" />
			</td>
		</tr>
		<tr>
			<td>
				性别:
			</td>
			<td>
				<input type="radio" name="sex" />
				男
				<input type="radio" name="sex" checked="checked" />
				女
			</td>
		</tr>
		<tr>
			<td>
				兴趣爱好:
			</td>
			<td>
				<input type="checkbox" checked="checked" />
				Java
				<input type="checkbox" />
				JavaScript
				<input type="checkbox" />
				C++
			</td>
		</tr>
		<tr>
			<td>
				国籍:
			</td>
			<td>
				<select>
					<option>
						--请选择国籍--
					</option>
					<option selected="selected">
						中国
					</option>
					<option>
						美国
					</option>
					<option>
						小日本
					</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				自我评价:
			</td>
			<td>
				<textarea rows="10" cols="20">
					我才是默认值
				</textarea>
			</td>
		</tr>
		<tr>
			<td>
				<input type="reset" />
			</td>
			<td align="center">
				<input type="submit" />
			</td>
		</tr>
	</table>
</form>
</body>

表单提交的时候,数据没有发送给服务器的三种情况:

表单项没有 name 属性值
单选、复选(下拉列表中的 option 标签)都需要添加 value 属性,以便发送给服务器
表单项不在提交的 form 标签

请求分类:

GET

浏览器地址栏中的地址是:action 属性[+?+请求参数]

请求参数的格式是:name=value&name=value

<form action="http://localhost:8080" method="get">
不安全,且有数据长度的限制
POST浏览器地址栏中只有 action 属性值
<form action="http://localhost:8080" method="post">
相对于 GET 请求要安全,理论上没有数据长度的限制

b:

   加粗标签

<b>内容</b>

div:

   默认独占一行

<div>div 标签 1</div>

span:

   它的长度是封装数据的长度

<span>span 标签 1</span>

p:

   默认会在段落的上方或下方各空出一行来(如果已有就不再空)

<p>p 段落标签 1</p>

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

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

相关文章

Redis类型操作

目录 一、List&#xff08;列表&#xff09; 1.List模板 2.List基本操作(不区分大小写) 2.1添加命令 2.2移除命令 2.3下标索引 2.4列表长度 2.5移除指定值 2.6List截断 2.7移除列表最后一个元素并将他移到新的列表中 2.8替换操作 2.9插入命令 二、Set(集合) 1.Set定义 2…

日撸 Java 三百行day41

文章目录 说明day41 顺序查找与折半查找1.顺序查找2.折半查找3.代码 说明 闵老师的文章链接&#xff1a; 日撸 Java 三百行&#xff08;总述&#xff09;_minfanphd的博客-CSDN博客 自己也把手敲的代码放在了github上维护&#xff1a;https://github.com/fulisha-ok/sampledat…

微信小程序蓝牙功能开发与问题记录

一、蓝牙支持情况 1. 微信小程序对蓝牙的支持情况 目前普遍使用的蓝牙规格&#xff1a;经典蓝牙和蓝牙低功耗。 经典蓝牙&#xff08;蓝牙基础率/增强数据率&#xff09;&#xff1a;常用在对数据传输带宽有一定要求的大数据量传输场景上&#xff0c;比如需要传输音频数据的…

AI工具和用法汇总—集合的集合

AI 工具和用法汇总 汇集整理 by Staok/瞰百&#xff0c;源于相关资料在我这慢慢越积累越多&#xff0c;到了不得不梳理的程度。 文中有许多内容作者还没有亲自尝试&#xff0c;所以很多内容只是罗列&#xff0c;但信息大源都已给出&#xff0c;授人以渔&#xff0c;欢迎 PR 补…

hadoop3.2.1+hive3.1.2-docker安装

Hadoop 1.拉取镜像 docker pull hadoop_hive:32.运行容器 建立hadoop用的内部网络(此步出错&#xff0c;若与其它网段冲突&#xff0c;可省略) #指定固定ip号段 docker network create --driverbridge --subnet172.17.0.1/16 hadoop建立Master容器&#xff0c;映射端口 10…

滚动加载数据

效果图: 综合使用后,觉得还是以下绑定 div监听滚动条的方式好用,有的可以监听滚轮滚动,但是监听不到鼠标拖动滚动条,下面这种方式两者都可以监测到↓ <template><div class"scrollTest-container" id"scrollTestContainer"><div class&quo…

简单分享微信小程序上的招聘链接怎么做

招聘小程序的主要用户就是企业招聘端和找工作人员的用户端,下面从这两个端来对招聘小程序开发的功能进行介绍。 企业端功能 1、岗位发布:企业根据自身岗位需求,在招聘app上发布招聘岗位及所需技能。 2.简历筛选:根据求职者提交的简历选择合适的简历,并对公开发布的简历进行筛…

105.(cesium篇)cesium指南针

听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上完整代码,代码重要位置会做相应解释 <html lang="en">

【软考高级】2019年系统分析师综合知识

第 1 题 面向对象分析中&#xff0c;一个事物发生变化会影响另一个事物&#xff0c;两个事物之间属于&#xff08;1&#xff09;。 (1) A .关联关系 B .依赖关系 C .实现关系 D .泛化关系 参考答案&#xff1a;(1)B 试题解析&#xff1a; 本题考查的是 UML 图中类的关系…

业务零中断,数据零丢失|庚顿新一代双活高可用架构实时数据库为流程工业核心业务保驾护航

新一代双活架构高可用架构实时数据库管理系统可实现流程工业数据平台“零中断”、“零丢数”的超高可用性要求&#xff0c;在满足实时性要求的同时&#xff0c;实现断网/掉电时业务不中断、不丢数&#xff0c;突破传统主备架构。 随着生产生活自动化、数字化、信息化水平不断升…

二叉树或者多叉树直径问题

原题链接&#xff1a;543. 二叉树的直径 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给定一棵二叉树&#xff0c;你需要计算它的直径长度。一棵二叉树的直径长度是任意两个结点路径长度中的最大值。这条路径可能穿过也可能不穿过根结点。 什么是任意两点路径…

ChatGPT来了不用慌,广告人还有这个神器在手

#ChatGPT能取代广告人吗&#xff0c;#ChatGPT会抢走你的工作吗&#xff1f;#ChatGPT火了&#xff0c;会让营销人失业吗&#xff1f;自ChatGPT爆火以来&#xff0c;各种专业or非专业文章不停给广告人强加焦虑&#xff0c;但工具出现的意义&#xff0c;更多在于提效而非替代&…

BetaFlight统一硬件配置文件研读之timer命令

BetaFlight统一硬件配置文件研读之timer命令 1. 源由2. 代码分析3. 实例分析4. 配置情况4.1 AFn配置查表4.2 timer4.3 timer show4.4 timer pin list 5. 参考资料 统一硬件配置文件的设计是一种非常好的设计模式&#xff0c;可以将硬件和软件的工作进行解耦。 1. 源由 cli命令…

某程序员哀叹:二本计算机,4年开发,年包才40多万。二本真的不如985/211吗?

前段时间&#xff0c;某职场论坛上有人发了一个帖子&#xff0c;发帖人问&#xff1a;为什么大家工资那么高&#xff0c;三五年都六七十万了&#xff1f;我二本计算机专业&#xff0c;四年前端开发&#xff0c;找个年包40万多点就顶头了。 原贴如下&#xff1a; 有网友表示楼主…

【Docker】Docker上篇

文章目录 一、认识Docker1、Docker出现的背景2、Docker的历史3、虚拟机技术与容器技术4、容器比虚拟机快的原因5、对Devops层面的影响 二、Docker的安装的原理1、核心名词2、安装Docker&#xff08;for Linux&#xff09;3、配置阿里云镜像加速4、Run的流程和Docker原理 三、Do…

phoenix使用(一)之全局索引的使用

索引使用 1.1. 全局索引&#xff08;Global Indexing&#xff09; 名词解释&#xff1a; 全局索引&#xff0c;适用于读多写少的业务场景。使用Global indexing在写数据的时候开销很大&#xff0c;因为所有对数据表的更新操作&#xff08;DELETE, UPSERT VALUES and UPSERT SEL…

chatgpt软件 - chatbox

文章目录 打开github 进入chatgpt官方要记得登录&#xff01;&#xff01;点击头像将key命名&#xff1a;安装chatbox下面就可以开始使用啦&#xff01;&#xff01; 打开github https://github.com/Bin-Huang/chatbox 特性&#xff1a; 更自由、更强大的 Prompt 能力数据存储…

看了这13个案例,我总算又get到了企业级无代码

企业级无代码为何面向软件公司的研发团队&#xff1f; 哪些人能在企业级无代码旅程中获益&#xff1f; 如何找到实践的切入点&#xff1f; 如何开展规模化的交付实践&#xff1f; 如何快速组建企业级无代码开发团队&#xff1f; ...... 近期smardaten从组织创新、技术创新…

OCC的拓扑基础数据结构

在OpenCASCADE中,提供了一系列的拓扑基础数据结构,用于表示几何实体的拓扑结构,其中最基本的是TopoDS_Shape。下面是一些其他常用的拓扑数据结构: TopoDS_TCompound:代表了复合实体,即由多个几何实体组合而成的实体,可以包含任意数量和类型的其他几何实体。 TopoDS_TCom…

【消费战略方法论】认识消费者的恒常原理(三):消费者刺激反馈原理

人类是一种高度智能的生物&#xff0c;而所谓智能的核心在于其理解世界的能力&#xff0c;而理解世界的过程中必然伴随着感知和反应。人的刺激反馈机制就是在这个过程中发挥着重要的作用。 刺激反馈机制是一种生物学的反应现象&#xff0c;它指的是人体对外界刺激的感知与反应…