简单HTML网页制作 实例

2023-10-27

HTML网页制作

1.新建文本文档,以“html”结尾。
在这里插入图片描述

2.用html网页逻辑器打开,这里我们用Sublime Text打开。

Tips:使用 !+Tab 按键 那么就可以自动生成HTML文档模板

推荐大家使用的前端工具有
Vscode hbuilder sublime_text 等等
在这里插入图片描述
在这里插入图片描述在标签<body></body>里写文本,<h1></h1>意思是把文本设置为标题,
align里设置文本居中属性。

html基本结构 <html></html>

段落标签 <p></p> 用来分段用的
空格标签 &nbsp 有几个空格就写几个 &nbsp
标题标签 <h#>:#=1~61~6个标题,就是大小粗细递减,再写7啊8啊的就没啥区别了,看不出来不同了。
图片标签<img src=""/>引号里面填图片地址,如果和文档放在一个空间就直接写,图片名.jpg 就OK了。

3.演示插入图在这里插入图片描述
在这里插入图片描述

5.加入一个简单的表格,两行两列。
在这里插入图片描述在这里插入图片描述

 table>

<tr>
<td><img src="E:\code\image\2.jfif"></td>
<td><img src="E:\code\image\2.jfif"></td>
</tr>

<tr>
<td align="center">皮卡丘1</td>	
<td align="center">皮卡丘2</td>
</tr>

</table>

6.添加超链接。

<a>定义和用法
<a> 标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

在所有浏览器中,链接的默认外观是:

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

7.表单
用于收集用户数据 在什么样的场景会使用到表单
登陆、注册 表格 需要提交的场景 都会用表单

<form></form>
action -----表单提交路径 -----跳转的功能
method -----提交的方式

<input> 输入
Type ----- text password checkbox radio submit reset file 等等
Text ----文本框
Password ----密码框
Checkbox —多选框
Radio ----单选框
Submit ----提交按钮
Reset ----重置按钮
File -----文件上传

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form align="center" action="file:///E:/code/practice1.html" method="get">

<p>	用户:<input type="text" value="请输入您的账号"/> </p>
<p> 密码:<input type="password"/> </p>
<p> 性别:<input type="radio" name="sex"/><input type="radio" name="sex"/></p>
<p>
      爱好:
<input type="checkbox" name="hobby" value="打篮球"/>打篮球   
<input type="checkbox" name="hobby" value="踢足球"/>踢足球
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="爬山" />爬山
</p>

<p>
城市:
		<select name="city">
		    <option>--请选择城市--</option>
			<option>重庆</option>
			<option>西安</option>
			<option>杭州</option>
		</select>
</p>

  <p>  <input type="submit" value="提交"/>
       <input type="reset" value="重置"/>
  </p>
</form>
</body>
</html>

在这里插入图片描述

8.多窗口框架。
<frameset> 多窗口的框架标签 里面的每一个窗口都是一个frame
注意:<frameset>标签不能和body标签连用

页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<frameset rows="15%,70%,15%">

  <frame src="E:\code\a.html" name="header" />

  <frameset cols="20%,80%">
  	<frame  name="menu" />
  	<frame name="center" />
  </frameset>

  <frame  name="footer" />
</frameset>
</html>

a块:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A</title>
</head>
<body>
<a href="b.html" target="menu">A</a>

</body>
</html>

b块:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>B</title>
</head>
<body>
		<a href="c.html" target="center">B</a>

</body>
</html>

c块:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>C</title>
</head>
<body>
		<a href="d.html" target="footer">C</a>

</body>
</html>

d块:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D</title>
</head>
<body>
		<a href="a.html" target="header">D</a>

</body>
</html>

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

简单HTML网页制作 实例 的相关文章

  • 将我的 JSON 字符串格式化为 PHP 中的
      有序列表

    我正在为一个宠物项目开发一个简单的 CMS 我目前有一个 JSON 字符串 其中包含菜单结构的页面 ID 和父页面 ID 的列表 我现在想将此字符串转换为嵌套或分层列表 有序列表 我尝试过循环查找 但似乎最终得到了过于复杂的子类范围 我正在
  • 在 Javascript 中隐藏按钮

    在我最新的程序中 有一个按钮 单击时会显示一些输入弹出框 这些框消失后 如何隐藏按钮 You can set its visibility财产 http www w3schools com cssref pr class visibilit
  • 通过标记或JS强制下载

    假设我在 CDN 来自 Rackspace 的云文件 上有一个文件 以及一个包含该文件链接的静态 html 页面 有什么方法可以强制下载此文件 以防止它在浏览器中打开 例如 mp3 我们可以让我们的服务器读取该文件并将相应的标头设置为 he
  • jQuery onclick 隐藏其父元素[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我想隐藏 li tag on a 使
  • 脚本不会从nodejs应用程序中的ejs文件运行

    我正在尝试使用nodejs express mysql和ejs让网页显示图表 但我显然不明白ejs javascript等是如何工作的 我需要运行一个脚本来设置图表 来自 Chart js 模块 但它不会输出任何类型的图表 我尝试过的 将
  • 将带有 rowspan 和 colspan 的 XHTML 表转换为 LaTeX

    我一直在寻找将 HTML 表格转换为 LaTeX 的合适解决方案 我发现以下问题与我的要求相似 XML 表到 LaTeX https stackoverflow com questions 27021926 xml table to lat
  • CSS 链接图像带有下划线(“a”显示设置为阻止)

    我有一个菜单 我希望每个单独的项目中文本周围的所有空间都能将用户带到指定的页面 我在网上查了一下 发现最好的解决方案是将 a 显示设置为阻止 如下 a display block height 100 text decoration und
  • 我可以跳过 HTML5 中“style”标签中的属性“type”吗? [复制]

    这个问题在这里已经有答案了 根据W3学校 http www w3schools com tags tag script asp 我可以跳过属性type对于标签script在 HTML5 中 Evidence HTML 4 01 和 HTML
  • Angular 在 Img 末尾添加额外变量 %E2%80%8B

    http myimage png E2 80 8B 我刚刚复制粘贴了这个图像网址 但它最后添加了一些奇怪的数据 并且图像没有显示 但在代码上它看起来很完美 我尝试过类似 Angular 的东西 var imageSafeUrl this s
  • 为什么 Bootstrap 按钮下拉菜单在 iOS 上不起作用?

    看起来甚至连引导演示在这里 http twitter github com bootstrap components html buttonDropdowns不适用于 iOS 您似乎无法在 iPhone 或 iPad 上从中选择项目 有解决
  • 我如何在ajax应用程序中找到未使用的css?

    我一直在搜索 但找不到任何 ff 插件或 javascript 来查找 ajax 应用程序中未使用的 css 除尘选择器 http www sitepoint com dustmeselectors 可以进行网站抓取 但我正在寻找检查加载内
  • 可以在 iPad 上自动播放 HTML5 视频吗?

    The
  • 不显示 ul 中的项目符号 [重复]

    这个问题在这里已经有答案了 我在 ul 中显示项目符号时遇到问题 有谁知道问题出在哪里 my site http www minikoblizky wz cz zamestnanci html它以 Co od v s o ek v me 开
  • 在没有 Flash 的情况下用 HTML / js 录制音频?

    从麦克风录制音频并将 ajax 发回服务器 真的不知道如何在 Flash 中做到这一点 并希望它保持简单 目前还没有浏览器实现WHATWG 设备 API http www whatwg org specs web apps current
  • xsl 方法中的自关闭标签:xml

    我正在使用一个使用 xsl method xml 创建 html 模板的网站 但是 当 xsl 引擎呈现 html 页面时 我遇到了标签自动关闭的问题 div div 转换为 gt div div 该方法需要保留 xml 否则页面的其他组件
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • 为什么我的 css 在 IE9 中无法正确显示?

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE
  • 带搜索框的 D3 图表

    我在 D3 中创建了一个图表 其中节点显示特定个人创建文档的时间 该图表还显示了一个搜索框 该搜索框根据搜索框输入是否与与该文档关联的单词匹配而将节点变成红色 这些单词列在数据集的第 5 列中 请参阅下面的数据集 我的问题 一旦将搜索输入到
  • 右侧对齐不浮动

    我有一个聊天小部件 我正在向其中添加一些样式 但是 我很难使 用户 聊天气泡与屏幕右侧对齐 当我使用向右浮动和向左浮动 另一侧 时 div 不再正确定位 因为它们似乎只是转到相对 div 的右侧 我希望它也能够附加 div 这将导致溢出 y
  • 将画布下载为 PNG 图像[重复]

    这个问题在这里已经有答案了 当我尝试将画布下载为 PNG 图像时 浏览器会在新页面中打开该图像 但不下载它 我的下载代码 btnScaricaEtichetta click function console log Download loc

随机推荐

  • 使用git的心得感悟 杂烩

    1 git的 gitignore文件里面配置的东西是对还未加入版本控制系统管理的文件或者是目录才有用 对已经加入版本控制的文件是不生效的 一定要将之前的纳入版本控制系统的文件取消版本控制可以使用命令 git rm r cached 加上某文
  • uniapp 返回上一页 携带参数 修改上页面的参数

    uniapp 返回上一页 携带参数 修改上页面的参数 阐述 有些场景我们需要从A页面带着参数到B页面 然后再B页面去修改A页面的这个参数 实现的两种方式 第一种方式 ps 如果是uniapp封装的app 需要安装uniapp内置的调试器 如
  • elementUI的日期选择器获取选择时间的格式,获取时间戳等

    elementUI的日期选择器获取选择时间的格式 获取时间戳等 在使用日期选择器的时候 我们需要把时间进行格式化 然后再传给后端 比如传时间戳 value format timestamp
  • unity 第五期

    原题1 什么是单例 举一个游戏中使用单列的例子 答 单例 啊 那是一种内功心法 而且是行走江湖必备的一种最基本的内功心法 说到单例 我们得要把后面两个字补全 也就是单例模式 单例模式是传说中的23种设计模式之一 为什么DC老湿说其实内功心法
  • 2-2、java详述scope作用

    创建Java项目 一个类是Test类 包名com jd test 一个类是UserInfo类 包名com jd vo 还有一个application xml
  • 使用Python,Matplotlib显示RGB图像

    使用Python Matplotlib显示RGB格式的 图像 1 效果图 2 源码 参考 这篇博客将介绍如何使用matplotlib显示RGB图像 具体是使用matplotlib pyplot和mpimg来加载和显示图像 调用plt axi
  • 电机驱动详解--从原理到智能车驱动(DRV8701)

    目录 1 全H桥电路驱动电机原理 2 H桥工作模式 3 死区控制 1 全H桥电路驱动电机原理 从上图可以看出 电路是由四个NMOS管 一个motor 以及VCC GND所构成的 可以控制栅极的电平高低 来控制NMOS管的开通与关闭 所以可以
  • Jmeter 课程笔记(四)关联

    LR中有手动关联和自动关联 Jmeter中只有手动关联 自动关联准确性低 1 第一种关联方式 Http请求 右键 后置处理器 正则表达式提取器 将其放在生成想要关联的页面下 在页面中找到其位置复制当前区域 源码中有相似的值对该区域进行拓展复
  • vbs之createobject大全

    2007年10月30日 11 12 00 ADO对象ConnectionCommandRecordSetRecordStreamServer CreateObject Scripting FileSystemObject Server Cr
  • 【论文精读】CVRecon: Rethinking 3D Geometric Feature Learning For Neural Reconstruction

    今天读的是一篇发表在ICCV2023上的文章 试图使用mvs的方法来助力neural reconstruction 项目地址 点击前往 文章地址 点击前往 文章目录 Abstract 1 Introduction 2 Related Wor
  • React 开发用到的chrome扩展插件

    1 安装react developer tools开发工具 1 下载地址 https pan baidu com s 1eSZsXDC 下载好是一个crx 格式的文件 把下载后的 crx扩展名的离线Chrome插件的文件扩展名改成 zip或
  • Google colab 阻止自动掉线

    Google colab 可以免费使用GPU TPU等计算资源进行人工智能计算 但计算页面隔一段时间无操作之后就会自动掉线 之前训练的数据都会丢失 最后终于找到了一种可以让其自动保持不离线的方法 用一个js程序自动点击连接按钮 代码如下 f
  • 详细介绍下Rational Rose及其功能与优点

    Rational Rose是一款由IBM公司开发的商业软件工具 主要用于软件建模和设计 它支持多种软件工程方法 如面向对象分析和设计 OOA D 面向过程分析和设计 PPA D 数据流分析和设计 DFD 等 Rational Rose提供了
  • mysql5 存储过程

    MySql5 0以后均支持存储过程 最近有空 研究了一把这个格式 CREATE PROCEDURE 过程名 过程参数 特性 过程体CREATE FUNCTION 函数名 函数参数 RETURNS 返回类型 特性 函数体过程参数 IN OUT
  • UE 虚幻引擎项目启动快捷键

    1 Epic Games Launcher目录下找到UnrealVersionSelector exe 2 将UnrealVersionSelector exe添加到任务栏 鼠标右键点击 可以看到所有打开的UE项目 不限UE版本 鼠标左键点
  • IP反查域名

    IP反查域名 ip反查域名的三种方法 方法有很多 我这边只描述三种 也算是两种 1 在线网站 http stool chinaz com same 2 在线网站 https site ip138 com 3 工具 https github
  • 程序员如何实现财富自由?

    有国外的码农在论坛里提问 为了过上更好的生活我两年前移民到法国后 开始从事前端开发 我的月薪从当时的1 5万涨到现在的1 9万 这样的工资还算可以 但我觉得不够多 我在想为什么所有人都能赚大钱 而我作为码农 实在不知道该如何提高自己的收入
  • 给VMware Workstation 16 Pro中安装的Ubuntu 20.04.3 LTS安装VMware Tools

    安装VMware Tools 点击虚拟机 安装VMware Tools 如果之前安装过 则是 重新安装VMware Tools 之后启动虚拟机 在虚拟机中出现一个DVD光盘 如果没有 则点击虚拟机 可移动设备 CD DVD 设置使用ISO映
  • Linux任务前后台的切换 【转】

    文章来源 Linux任务前后台的切换 Shell支持作用控制 有以下命令实现前后台切换 1 command 让进程在后台运行 2 jobs 查看后台运行的进程 3 fg n 让后台运行的进程n到前台来 4 bg n 让进程n到后台去 5 k
  • 简单HTML网页制作 实例

    HTML网页制作 1 新建文本文档 以 html 结尾 2 用html网页逻辑器打开 这里我们用Sublime Text打开 Tips 使用 Tab 按键 那么就可以自动生成HTML文档模板 推荐大家使用的前端工具有 Vscode hbui