HTML静态网页

最新推荐文章于 2024-05-25 10:00:21 发布
最新推荐文章于 2024-05-25 10:00:21 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 课程 文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SUUNLIGHTED/article/details/128535285
版权

HTML基础知识

入门案例

<!doctype html>
<html>
	<head>
		<title>测试项目</title>
		<!-- 防止中文乱码 -->
		<meta charset="UTF-8"/>
	</head>
	<body>
		hello html ~ 
		你好呀
		<!-- 
			ctrl c / v 复制粘贴
			ctrl x / d 删除 
			ctrl 上/下 箭头 调整位置
		-->
	</body>
</html>

语法

  • HTML标签
    HTML是一门标记语言，标签分为开始标签和结束标签，如
<a>  </a>
  • HTML属性
    HTML标签都可以具有属性，属性包括属性名和属性值。
    如果有多个空格隔开；
    属性的值要用单引号或者双引号引起来。
<a href="" target="" name="" id=""></a>
  • HTML注释
<!-- 注释内容 -->
  • 注意：不能交叉嵌套
  • 空格和换行
换行：<br/>

空格：在HTML中多个空格会当成一个空格显示

常用标签

标题标签

<!doctype html>
<html>
	<head>
		<title>01</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<!-- 标题标签:
			包括:h1~h6 
		-->
		<h1 align=”center”>我是1号标题</h1>
		<h2>我是2号标题</h2>
		<h3>我是3号标题</h3>
		<h4>我是4号标题</h4>
		<h5>我是5号标题</h5>
		<h6>我是6号标题</h6>
	</body>
</html>

列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- 列表标签:
			ol + li 有序
			
			ul + li 无序
			
			type 定义列表符号,默认是 disc 小圆点
		 -->
		<ul type="circle">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
		
		<ul type="square">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
		
		<ul type="disc">
			<li>中国</li>
			<li>美国</li>
			<li>小日本</li>
		</ul>
	</body>
</html>

图片标签

图片放到工程里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		
		<!--	图片标签:
			img向网页中引入图片 (相对路径/绝对路径)
			border:边框
			width:宽度
			height:高度
		 -->
		<img src="1.jpg" border="10px" width="50%" height="30%">
	</body>
</html>

超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		
		<!-- 超链接标签 
			href 指定要跳转的位置
			target 指定要打开的方式
		-->
		<a href="http://www.baidu.com" target="_blank">点我</a>
		<a name="_top">java从入门到精通</a>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
			<h6>你好java</h6>
		<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
			
		<br><br><br><br>
	</body>
</html>

input标签

<input type="text" />      普通文本框
<input type="password" /> 密码
<input type="radio"/>男   单选框
<input type="number" />   数字值
<input type="week" />	日历
<input type="checkbox" />杨幂  复选框
<input type="button"  value="点我一下"/>
<input type="submit"  value="提交数据"/>

表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>各种标签</title>
	</head>
	<body>
		<!--table表格标签 
			tr 表格里的行
			td 表格里的列
			border:表格的边框
			cellspacing:单元格的间距
			bgcolor:背景颜色
			width:宽度
			align:位置
		 -->
		<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
			<tr>
				<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
				<!-- <td>12</td> -->
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<!-- <td>33</td> -->
			</tr>
		</table>
	</body>
</html>

表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单</title>
	</head>
	<body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
		<!-- <form method="get"> -->
		<!-- post提交安全不显示数据 -->
		<form method="post">
			<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
				<th colspan="2">注册表单</th>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="user"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td><input type="text" name="nick"/></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="mail"/></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
				<!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="2"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
					<!-- name必须配,多选 ,提交的值就是1 2 3 -->
					<input type="checkbox" name="like" value="1"/>篮球
					<input type="checkbox" name="like" value="2"/>足球
					<input type="checkbox" name="like" value="3"/>排球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
				<select name="city"> <!-- 实现多选,按name提交数据 1 2-->
							<option value="1">北京</option> 
							<option value="2">上海</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="path"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="submit">提交</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

其他标签

<!-- 其他标签 div  p  span -->
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>

<p> Nice</p>
<p> Nice</p>
<p> Nice</p>

<span> hello</span>
<span> hello</span>
<span> hello</span>
SUNLIGHTED
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是静态网页 什么是HTML5,什么是静态网页？
weixin_29955195的博客
06-27 5693
在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页是标准的html文件，一般存在于服务器的文件中，它的扩展名有.htm、.html、.shtml、.xml等常见形式为后缀。当然静态网页并不是字面意思所说的静态，不会动的意思，静态网页中除开文字，也可以包含图片、声音、视频、flash动画、脚本、控件以及一些java小程序等，所以静态网页也可以出现...
html静态页面
niqiu320的博客
05-06 3851
0x00 什么是网页？ 网页是网站中的-“页”，通常是HTML格式的文件，它通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .hmtl 后缀结尾的文件，因此将其俗称为HTML文件。 什么是HTML？ HTML指的是超文本标记语言，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有2层含义： 1、它可以加入图片、声音、动画、多媒体等内容（超越了文本
静态网页的制作（从入门到精通）
2202_75991121的博客
04-15 1579
开发一个疫情专区网页
制作一个简单HTML静态网页（HTML+CSS）
最新发布
HTML网页设计
05-25 968
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
纯html+css静态网站
07-14
html+css做的一个静态的网站，该网站是模仿“惠州乐网科技”，只可用于学习，不得用于商业用途，谢谢
静态网站与动态网站的区别
weixin_39246554的博客
05-03 5043
静态网站与动态网站的区别 前言 在对网站设计和开发进行研究期间，我们可能遇到过用于描述网站类型的两个术语：“静态”和“动态”。 如果您正在构建自己的网站，选择静态网站还是动态网站是需要做出的首要决定之一，因为它将决定网页如何存储并在浏览器中传递给访问者。 静态网站和动态网站的区别在于，静态网站对于每个访问它们的用户来说都是一样的，并且只有在开发人员修改源文件时才会发生变化，而动态网站可以向不同的访问者呈现不同的信息。 无论网站看起来多么复杂，网页的核心只是显示在网络浏览器中的 HTML 文件。当我们访问一
HTML静态网页作业
02-15
在“HTML静态网页作业”中，我们可以深入探讨以下几个关键知识点： 1. **HTML基本结构**：HTML文档通常由三部分组成：文档声明、头部元素和主体元素。文档声明如`<!DOCTYPE html>`指明文档类型，头部元素`<head>`...
html静态网页模板
04-22
HTML静态网页模板是一种用于快速构建网站的预设计布局，它由HTML、CSS和有时包括JavaScript等前端技术组成。这些模板通常包含多个页面结构，如首页、关于我们、联系我们、产品展示等，以及各种组件，如导航栏、轮播...
HTML静态网页的设计
07-23
HTML静态网页设计是互联网开发的基础，它涉及到网页的布局、内容展示和用户交互。在这个领域，HTML、CSS和JavaScript是核心的技术。以下是对这些技术及其在网页设计中的应用的详细阐述。 HTML（HyperText Markup ...
html静态网页
12-11
在"html静态网页"这个项目中，我们可以理解为开发者仅使用了HTML来定义网页的结构，并通过CSS来控制网页的布局和视觉表现。由于描述中提到“没有数据库连接”，这意味着这个网页不是动态的，不会根据用户交互或...
HTML静态网页模板下载大全
03-15
HTML静态网页模板是网页设计中常见的一种资源，它是由HTML、CSS和JavaScript等技术构建的预设布局和设计。这些模板通常包含多个页面，如首页、关于我们、联系我们、产品展示等，为创建网站提供了一个快速而高效的...
纯html静态网站分布很详细适合初学者
11-14
html静态网站，每一步分布都很详细，适合初学者，适合学习网页制作！
纯静态页面
07-28
一个纯html+css写的页面
使用HTML和css写静态页面
08-02
作为一个联系的静态页面
全自动静态网页生成器StaticHtml
06-08
全自动静态网页生成器StaticHtml
大一学生WEB前端静态网页——旅游网页设计与实现(15页面)
网页设计与制作
03-12 1231
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目
Python 爬虫抓取纯静态网站及其资源
Python开发者
08-30 1225
（点击上方公众号，可快速关注）来源：Maskhttps://segmentfault.com/a/1190000015880780遇到的需求前段时间需要快速做个静态展示页...
使用HTML实现一个静态页面（含源码）
qq_38515154的博客
04-22 311
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
HTML制作个人网页制作(简单静态HTML个人博客网页作品)
HTML网页设计
08-18 3091
👨‍🔬个人网页制作 、大学生个人网页设计、 个人博客网站模板 、简单静态HTML个人网页作品🏷️ 个人博客静态HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J......
python静态网页
09-13
Python使用requests模块来访问静态网页。静态网页是指使用requests模块访问某个网址后，打印出的结果和在浏览器中看到的结果基本相同。通常情况下，你可以称呼这个网页为静态网页[1]。 要辨别静态网页，你可以使用浏览器的开发者工具。在工具中，点击Network选项卡下的All，然后选择第一个网址，再点击Preview。如果在Preview中看到的数据信息和在网页上看到的信息基本一致，那么可以确定这个网页是静态网页。此时，你可以使用requests模块直接访问这个网址，爬取相应的数据。 需要注意的是，有些静态网页并不是所有的数据都可以获取到。例如，评论信息通常无法通过直接访问网址获取，因为这些数据可能是通过ajax请求获取的。如果你需要获取这些数据，需要找到相应的ajax请求链接，并发送请求来获取数据。这些ajax请求链接通常可以在开发者工具的Network选项卡下的XHR或js选项卡中找到。 另外，有些网站的数据是静态加载的，但是通过使用JavaScript来渲染。对于这种情况，你可以使用requests模块访问网址，然后使用相应的解析模块来解析获取到的数据。这种方式加载数据的网页示例包括哔哩哔哩和西瓜视频等。 综上所述，你可以使用Python的requests模块来访问静态网页并获取数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值