简单的网页制作

1网页编写格式

<!DOCTYPE html> 
<html><head><meta charset="utf-8"> <title>中文测试。。。。</title></head><body>这里是测试body测试内容。。。</body>
</html>

2标签

在body内
<h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
<p></p> 双标签  段落,有换行功效
<hr> 单标签  左到右分割符
<!--    -->注释

3元素属性

给元素提供更多的属性,大部分的元素属性

3.1语法

<标签 属性1=参数1>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0x00ff1234">

4文本元素属性
b 元素 内容 加粗
br 换行
如果是p标签中间有间隔
i元素, 字体倾斜
del元素 删除文字
strong 强调一段文字,效果类似 b标签
u元素,下划线
small元素, 超小字体
sub 下标
sup 上标

h20

100m2
ruby,拼音,二姐 (er) (jie),可能部分浏览器不支持。
make 元素 加黄色背景

5超链接
5种形式
1,链接外部网站
2,链接本地文件
3,图片链接
4,电子邮件链接打开电子邮件
,下载文件链接

	<a href="http://www.baidu.com">baidu</a><br><a href="1.html">1111</a><br><a href="1.html"><img src="abc.jpg"></a><br><a href="mailto:123@13.com">contract me</a><br><a href="abc.jpg">下载</a>

上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
baidu

6 img 单标签
src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
美女 px
美女
百分比是相对于网页而言的, 高度百分比无效的

7列表
有序列,无需序列
自定义列表
无序列表 前面无数字

  • 列表1
  • 列表2
  • 列表3
  • 列表4
有个type属性 文字最前面的符号 disc 黑色实心圆 circle 白色空心圆 square 黑色方块 有序列,前面有数字
  1. 列表1
  2. 列表2
  3. 列表3
  4. 列表4
其中可以放文字,图片,或链接 有type属性,设置排序使用什么数字

表格的构成,
table,外框
tr 行
td 列





1-11-21-3
2-12-22-3
3-13-23-3

3行 3列
表格的属性
border 边框粗细
th,是tr的属性,列标题,自动居中,加粗
colspan,横向合并单元格,需要 整形参数
name
表格的合并
rowspan ,列项合并,整数参数
caption 给表格加标题 子属性
表格还有3个字属性
thead 都是双标签
tbody
tfoot
这些属性,后期主要和css,js配合使用
9 html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

10 style 元素,html样式
引入样式的三种方法
1),外部样式 需要css

2)内部样式 样式需要放在之间,这个属于布局。 3).内联样式

单独的设置一个
  1. div布局 需要配合css样式设置
    9.html
    12 通用属性
    每个元素都用
    id属性,指定元素的标识符,唯一性。
    class 指定类型名,归类,统一设置共同的属性
    title 当鼠标移动到元素的时候显示的内容
    dir 用于控制显示输出的方向
    123456
    style 样式设置

12,表单 传递参数,数据

13,input元素,(输入框)他是表单的一个字属性 指定表单中的内容项,比如输入内容的文本框 可以指定表单属性,也可以放在表单的外面。 input元素的属性: type,指定输入框的类型,text单行文本,password密码,submit提交按钮, reset,重置按键,button按键,普通的按键需要和特定的时间关联。 image:图片式按键 hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。 email: 是一个邮箱类型,新特性,可能支持有差异 required:表示内容必须填写,不然不能提交。 name:名称,输入内容识别名称,传递参数时候的参数名称 value: 默认值,输入框默认填入的内容, maxlength,指定最大长度 placeholder,设置提示信息的。

HTML网页制作参考手册

https://www.w3school.com.cn/tags/index.asp

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

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

相关文章

二、yocto 集成ros2(基于raspberrypi 4B)

yocto 集成ros2 yocto 集成ros21. 下载ros layer2. 编译集成ros3. 功能验证 yocto 集成ros2 本篇文章为基于raspberrypi 4B单板的yocto实战系列的第二篇文章。 一、yocto 编译raspberrypi 4B并启动 本节我们将ros2机器人操作系统移植到我们的yocto系统里面。 1. 下载ros laye…

DNA存储技术原理是什么?

随着大数据和人工智能的发展&#xff0c;全球每天产生的数据量剧增&#xff0c;对存储设备的需求也随之增长&#xff0c;数据存储问题日益凸显。传统的硬盘驱动器&#xff08;HDD&#xff09;、磁带等冷存和深度归档存储占据数据中心存储的60-70%&#xff0c;由于它们的访问频率…

策略模式实战

项目推荐最近开发完成的项目中使用到了策略模式&#xff0c;实现多种支付方式&#xff0c;避免了后期支付方式if-else代码的冗余&#xff0c;也有利于后期支付的一个扩展。同时这个项目非常适合于做毕设&#xff0c;想了解这个项目的同学可以联系我QQ&#xff1a;3808898981 前…

html编辑器

HTML 编辑器推荐 html可以使用记事本编辑 但是更建议使用专业的 HTML 编辑器来编辑 HTML&#xff0c;我在这里给大家推荐几款常用的编辑器&#xff1a; VS Code&#xff1a;https://code.visualstudio.com/WebStorm: https://www.jetbrains.com/webstorm/Notepad: https://no…

命名空间——初识c++

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 经典的Hello Word 起航c关键字c语言的命名冲突问题域作用限定符::命名空间 namespace命名空间定义命名空间的使用1.加命名空间名称及作用域限定符2.使用…

异常:程序出现的问题

目的&#xff1a;为了以后发现异常后怎么去处理 异常的作用

【NTN 卫星通信】 TN和多NTN配合的应用场景

1 场景描述 此场景描述了农村环境&#xff0c;其中MNO (运营商TerrA)仅在城市附近提供本地地面覆盖&#xff0c;而MNO (SatA)提供广泛的NTN覆盖。SatA使用GSO轨道和NGSO轨道上的卫星。SatA与TerrA有漫游协议&#xff0c;允许:   所有TerrA用户的连接&#xff0c;当这些用户不…

免费的chatgpt网站(包含最新版4.0)

相信每个人在生活工作学习中都逃不过用chatgpt来解决一些问题&#xff0c;下面我长话短说&#xff0c;为大家简单介绍几款免费且好用的chatgpt网站 1、YesChat 网址&#xff1a;YesChat-ChatGPT4V Dalle3 Claude 3 All in One Free 第一个就给大家介绍一个狠角色&#xff0c;最…

接口冒烟测试方法

接口冒烟测试方法 今年遇到了几个问题&#xff0c;与接口的功能和性能相关&#xff0c;恰巧最近公司也在组织以冒烟测试为主题的活动&#xff0c;于是乎突发奇想&#xff0c;寻思着能否将接口测试与冒烟测试结合起来&#xff0c;发掘一些新的接口测试思路与方法。 平时对接口…

专升本 C语言 万字考点笔记全国通用

前言 全章内容多次校验整理,可以放心食用;如果发现内容有不严谨的地方,请随时私信张三xy 形而上学者谓之道&#xff0c;形而下学者谓之器 目录 前言 常考概念 一、C语言的基础知识 第一节、对C语言的基础认识 第二节、C语言程序生命周期 第三节、标识符 第四节、进制的转…

5G里面NR,gNB,en-gNB,ng-eNB是什么意思

不得不提一个国际组织&#xff0c;叫国际电信联盟(ITU, International Telecommunication Union)&#xff0c;简称国际电联。我们先看看国际电联的自我介绍&#xff1a; 国际电信联盟 『国际电联 (国际电信联盟) 是主管信息通信技术事务&#xff08;ICT&#xff09;的联合国机…

英伟达 V100、A100/800、H100/800 GPU 对比

近期&#xff0c;不论是国外的 ChatGPT&#xff0c;还是国内诸多的大模型&#xff0c;让 AIGC 的市场一片爆火。而在 AIGC 的种种智能表现背后&#xff0c;均来自于堪称天文数字的算力支持。以 ChatGPT 为例&#xff0c;据微软高管透露&#xff0c;为 ChatGPT 提供算力支持的 A…

春分|春和景明,万物复苏,百华与您共赴春天的盛宴

春分&#xff0c;是二十四节气之一&#xff0c;标志着春季正式来临。在这个时节&#xff0c;阳光明媚&#xff0c;气温逐渐回暖&#xff0c;大自然万物开始复苏&#xff0c;呈现出一幅春和景明的美好画卷。 春分时节&#xff0c;昼夜平分&#xff0c;白天和夜晚的时间几乎一样…

Docker-镜像仓库

Docker ⛅Docker-Registry&#x1f320;分类&#x1f320;镜像仓库工作机制&#x1f320;常用的镜像仓库&#x1f320;镜像仓库命令☃️docker login☃️docker pull☃️docker push☃️docker search☃️docker logout &#x1f320;镜像命令[部分]☃️docker images☃️docke…

【呼市经开区建设服务项目水、电能耗监测 数采案例】

实施方案 针对能耗采集中的水、电能源数据采集&#xff0c;因客观因素条件&#xff0c;数据采集方面存在较大难度。大多数国网电表485接口由于封签限制&#xff0c;不能实施采集&#xff0c;不让拆机接线&#xff0c;采集实施存在困难。水量能耗采集&#xff0c;存在类似问题&a…

.net使用excel的cells对象没有value方法——学习.net的Excel工作表问题

$exception {"Public member Value on type Range not found."} System.MissingMemberException 代码准备运行问题解决1. 下载别的版本的.net框架2. 安装3. 运行 代码 Imports Excel Microsoft.office.Interop.Excel Public Class Form1Private Sub Button1_Click(…

深入浅出前端本地储存

引言 2021 年&#xff0c;如果你的前端应用&#xff0c;需要在浏览器上保存数据&#xff0c;有三个主流方案&#xff1a; CookieWeb Storage (LocalStorage)IndexedDB 这些方案就是如今应用最广、浏览器兼容性最高的三种前端储存方案 今天这篇文章就聊一聊这三种方案的历史…

使用Laravel开发项目

如何使用Laravel框架开发项目 一、安装Laravel框架 1.在安装Laravel框架钱我们需要先查看要安装的Laravel框架版本以及版本所需要的安装运行条件。 2.配置好安装环境后再安装Laravel框架 2.1.配置安装环境 1&#xff09;PHP版本 2&#xff09;PHP OpenSSL扩展 3&#xff…

macOS - 获取硬件设备信息

文章目录 1、CPU获取方式 一&#xff1a; system_profiler获取方式二&#xff1a;sysctl&#xff0c; machdepmachdep 2、内存3、硬盘4、显卡5、声卡6、光驱7、系统序列号8、型号标识符9、UUID 等信息 10. 计算机名称 1、CPU 获取方式 一&#xff1a; system_profiler % syst…

这40 张图帮你搞懂分布式追踪

在微服务架构中&#xff0c;一次请求往往涉及到多个模块&#xff0c;多个中间件&#xff0c;多台机器的相互协作才能完成。 这一系列调用请求中&#xff0c;有些是串行的&#xff0c;有些是并行的&#xff0c;那么如何确定这个请求背后调用了哪些应用&#xff0c;哪些模块&…