简单HTML网页制作 实例_html网页制作案例-程序员宅基地

技术标签: html  

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>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaoxiaoxiexies/article/details/116113249

智能推荐

MAME打开ROM报错解决办法_mame bios and devices sets-程序员宅基地

文章浏览阅读6.1k次。MAME打开ROM红屏报错的解决办法_mame bios and devices sets

什么是CAP理论? cp ap原则的含义-程序员宅基地

文章浏览阅读1.2k次。什么是CAP理论?CAP原则又称CAP定理,指的是在一个分布式系统中,一致性(Consistency)、可用性(Availability)、分区容错性(Partition tolerance)。CAP 原则指的是,这三个要素最多只能同时实现两点,不可能三者兼顾CAP分别是什么?一致性(Consistency) (所有节点在同一时间具有相同的数据)可用性(Availability) (保证每个请求不管成功或者失败都有响应)分区容错性(Partition tolerance) (系统中任意信息的丢失或_cp ap

Linux Kernel 2.4.x / 2.6.x uselib() Local Privilege Escalation Exploit-程序员宅基地

文章浏览阅读195次。/** pwned.c - linux 2.4 and 2.6 sys_uselib local root exploit. PRIVATE.* it's not the best one, the ldt approach is definitively better.* discovered may 2004. no longer private beca..._linux 2.4 挖洞

C/C++ —— 十六进制类型字符串的转换_c++ 16进制转字符串-程序员宅基地

文章浏览阅读9.5k次,点赞2次,收藏4次。在实际工作中,字符串和其它数据类型的转换是很常见的,库函数有很多,比如 atoi , strtol , sscanf 等,这些函数网上有很多资料,我经常用到的就是十六进制的数值以字符串的形式传输,然后又要解析,这里记录一下我这边的做法:将2个字节的十六进制的字符串转成short int 2个字节的整形数据:_c++ 16进制转字符串

Kafka实战:从RDBMS到Hadoop,七步实现实时传输-程序员宅基地

文章浏览阅读4.8k次。对于那些想要把数据快速摄取到Hadoop中的企业来讲,Kafka是一个很好的选择。Kafka是什么?Kafka是一个分布式、可伸缩、可信赖的消息传递系统,利用发布-订阅模型来集成应用程序/数据流。同时,Kafka还是Hadoop技术堆栈中的关键组件,能够很好地支持实时数据分析或者货币化的物联网数据。

SharedPreferencesUtils_sharedpreferencesutils 爆红-程序员宅基地

文章浏览阅读216次。package com.goodfamily.gps.polling_and_maintenance.util;import java.util.Set;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import andr_sharedpreferencesutils 爆红

随便推点

spring开启注解的三种方式-程序员宅基地

文章浏览阅读1.2w次。本章使用c3p0做演示 方法一,编辑试事务开启事务核心类 DataSourceTransactionManager,不管是哪一种方式都需要创建该对象,该方式需要记住的类 TransactionTemplate, 其实很好记,使用spring操作数据库创建jdbcTemplate ,使用spring开启事务创建TransactionTemplatepublic class Transact_spring开启注解的三种方式

这份字节跳动历年校招Java面试真题解析,年薪50W_前端校招面试真题解析大全-程序员宅基地

文章浏览阅读174次。写在前面很多小伙伴留言说让我写一些工作过程中的真实案例,写些啥呢?想来想去,写一篇我在以前公司从零开始到用户超千万的数据库架构升级演变的过程吧。本文记录了我之前初到一家创业公司,从零开始到用户超千万,系统压力暴增的情况下是如何一步步优化MySQL数据库的,以及数据库架构升级的演变过程。升级的过程极具技术挑战性,也从中收获不少。希望能够为小伙伴们带来实质性的帮助。这些面试题你都会了吗?(精选97道Java核心面试题)常量池有哪些,数据结构,自己设计一个常量池String为啥设计为final,好_前端校招面试真题解析大全

mac系统下配置tomcat_tomcat苹果与windows有区别吗-程序员宅基地

文章浏览阅读380次。mac tomcat的安装_tomcat苹果与windows有区别吗

前端必会:CDN加速原理-程序员宅基地

文章浏览阅读137次。作者:Kandyhttps://www.jianshu.com/p/1dae6e1680ff一、什么是 CDNCDN的全称是(Content Delivery Network),即内..._前端面试 cdn加速原理,没有缓存到哪里拿

小习惯-程序员宅基地

文章浏览阅读334次。生活在熙熙攘攘中从未变得安静,有时候感觉自己就像一辆行走着的汽车,向往着速度,应和着节奏。

ABSTRACT SQL CONFIGURE 代码分析一_abstractsql sql.or()-程序员宅基地

文章浏览阅读500次。2021SC@SCSDU对于SQL的配置public abstract class AbstractSQLConfig implements SQLConfig { private static final String TAG = "AbstractSQLConfig"; public static String DEFAULT_DATABASE = DATABASE_MYSQL; public static String DEFAULT_SCHEMA = "sys";..._abstractsql sql.or()