html简单实现--代码+注释

最新推荐文章于 2023-02-28 17:10:32 发布
最新推荐文章于 2023-02-28 17:10:32 发布
阅读量387 收藏 1
点赞数 1
分类专栏： html+css+js 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45958469/article/details/114700858
版权

本文仅有源码，可直接用于测试：与上一篇html文档对应
新人降临，请多指教！！！

<html>
	<head>
		<!-- 网页名字 -->
		<title>测试页面</title>
		<!-- 指定了文档的字符编码,防止页面乱码 -->
		<meta charset="utf-8">
		<!-- 网页logo -->
		<link rel="shortcut icon" sizes="144x144" href="E:\Photograph\壁纸\图标.jpg" >
	</head>
	
	<body>

		<!-- 页面顶部 -->
		<a name="top"></a>


		<!-- 字体无样式 -->
		<p>普通输出</p>
		<!-- 换行 -->
		<hr>


		<!-- 字体形式-斜体 -->
		<!-- <em>属于内联元素:即元素展示没有间隙 -->
		<em>斜体1</em><em>斜体2</em><em>斜体3</em><em>斜体4</em>
		<!-- <p>-块级标签-默认有一定的样式显示(原因:默认的浏览器有着默认的展示<p>元素的CSS styling) -->
		<p>斜体5</p><p>斜体6</p><p>斜体7</p><p>斜体8</p>
		<hr>


		<!-- 字体样式-加粗-"爆" -->
		<p>你看我这<strong> 爆 </strong>脾气:)</p>

		<hr>
		<!-- 
			图片插入:
				alt:图片不能显示时显示的文本
				src：图片路径
		 -->
		<p>图片插入:</p>
		<img alt="未找到该图片" src="E:\Photograph\壁纸\皮卡丘.jpg">
		
		<!-- 页面中部标记 -->
		<a name="middle"></a>

		<p>点击图片跳转到百度：</p>
		<a href="https://www.baidu.com">
			<img alt="百度" src="E:\Photograph\壁纸\baidu.png">
		</a>

		<hr>


		<!-- 
			<a>标签属性:
			href:声明超链接的web地址
			title:超链接声明额外的信息(即链接到的地址名称)
			target:指定链接如何呈现出来
				target="_blank":新标签页中打开链接
		 -->
		<!-- 声名超链接地址:直接跳转至指定链接 -->
		<p>点击<a href="https:www.baidu.com" target="_blank" title="baidu">百度</a>,将在新页面打开链接</p>
		<hr>


		<!-- 
			<input>标签:
				type属性:输入类型
				disable属性:防止用户输入
		 -->

		<p>不可输入:
			<input type="text" disabled>
		   可输入:
			<input type="text">
		</p>
		
		<hr>
		<p>实体字符:</p>
		<!--
		 	如果你想将引号当作文本显示在html中，你就必须使用实体引用
		 	实体引用:
		 		&nbsp;	空格
		 		&It;	>
		 		&gt;	<
		 		&amp;	&
		  -->
		<!--实体字符-->
		<p>空格：&nbsp;END</p>
		<p>左括号：&lt;</p>
		<p>右括号：&gt;</p>
		<p>AND(&)符号：&amp;</p>

		<hr>

		<p>表格:</p>
		<!-- 
			表格:
			table标签:
				broder属性:边框
				cellspacing属性:单元格边框高度
				cellpadding属性:单元格内边距
			注意:若table设置了broder,则空单元格的border会不显示，可以通过在空单元格中添加 &nbsp; 来解决
			th:表头
				rowspan:当前单元格占几行
				colspan:当前单元格占几列
			tr:行
				aling:对其方式

			td:列
		 -->
		 <!-- 有空单元格 -->
		<table border="1">
			<!-- 第一行 -->
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<!-- 第二行 -->
			<tr>
				<td>张三</td>
				<td>23</td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td>李四</td>
				<td>24</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>王五</td>
				<!-- <td>&nbsp;</td> -->
			</tr>
		</table>
		<br>
		<table cellspacing="5" cellpadding="10" border="5">
			<!--  -->
			<tr align="right" >
				<th rowspan="2">性别</th>
				<td>男</td>
			</tr>
			<tr>
				<td>女</td>
			</tr>
		</table>


		<p>表单:</p>
		<!-- 
			表单(所有HTML表单都以一个<form>元素开始):
				action:属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理
 				method:属性定义了发送数据的HTTP方法(它可以是“get(数据会附加在url地址后面)”或“post”).
 			注意:实践中最好至少要设置action属性和method属性
			<input>标签:
				type属性:
					text:单行的文本区域
					password:单行的文本区域，其值会被遮盖
					checkbox:复选框
					file:让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
		 -->
		 <form action="F:/HTML/html.html" method="get">
		 		<!-- 单行文本输入框 -->
		 	<div>
			    <label for="username">用户名:</label>
			    <input type="text" id="username" name="username">
		  	</div>
		  		<!-- 密码输入框 -->
	 		<div>
			    <label for="password">密码:</label>
			    <input type="password" id="password" name="password">
			</div>
				<!-- 多行文本输入框 -->
		  	<div>
			    <label for="Introduction">简介:</label>
			    <textarea id="Introduction"></textarea>
		  	<div>
		  		<!-- 上传图片文件 -->
		  	</div>
				<label for="avatar">上传头像:</label>
				<input type="file" accept=".jpg" id="avatar">
			</div>
				<!-- 按钮 -->
			<div>
				<input type="reset"><!-- 重置按钮 -->
				<input type="submit"><!-- 提交按钮 -->
			</div>
		 </form>

		<hr>
		<!-- 
			页面锚点 
				name属性：记录页面跳转位置
		-->		
		<a href="html.html#middle">返回页面中部</a>
		<a href="html.html#top">返回页面顶部</a>>

		
	</body>
</html>

感谢阅读！！！

CarryBircks
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML实现
weixin_54447656的博客
12-08 238
表单标签： form标签：<form action="test.html"> ... </form> 描述了要把数据按照什么方式，提交到哪个页面中 input标签：type取值种类有button、checkbox、text、file、image、password、radio... 1）文本框 <input type="text"> ...
简单的html页面，适合初学者，注释详细、内容简单
04-09
一个简单的html页面，包括css以及简单的一点js，内容适合初学者，简单移动，比较实用
html网页的实现
Suoh_Mikoto的博客
09-20 161
配置环境 “File”–“new”–“project”，如下图勾选创建 在“web”中放入网页所需的图片等，创建“pges”并在该包中创建“index”，“index2” table “index”代码如下： 首页 div “index2”代码如下 首页 ...
简单html实现
虎康的博客
07-16 237
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ line-height:80px ; float:left; border: 1px white solid; width: 10%; height: 96px; m
HTML实现的简单小例子
weixin_43758984的博客
07-03 675
华为 MatePad Pro 平板电脑 <div class="line"> <span class="new-price">3999.0</span> <span class="old-price">5888</span> </div> <div class="line"> <span class="manji...
卫班科技---HTML+CSS遮罩层实现案例
02-18
良好的注释习惯可以使代码更易读，帮助其他开发者快速理解代码的意图和工作原理。 同时，压缩包中的`jquery-3.3.1.min.js`文件可能暗示了此案例还涉及到了JavaScript的使用。jQuery是一个流行的JavaScript库，简化...
Java毕业设计--基于SpringBoot+Vue+MySql的闲置物品交易网站设计与实现（附源码，数据库,教程）.zip
02-20
Java 毕业设计，Java 课程设计，基于 SpringBoot +Vue 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具...
java代码-正则去除HTML代码中的注释信息
07-15
以下是一个简单的Java代码示例，展示了如何使用正则表达式去除HTML代码中的注释： ```java import java.util.regex.Matcher; import java.util.regex.Pattern; public class HtmlCommentRemover { public static ...
Java毕业设计-SSM+JSP+HTML的邮票鉴赏系统及实现(附源码，数据库，教程）.zip
02-07
Java 毕业设计，Java 课程设计，基于SSM开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，该项目可以...
HTML的代码注释
sarycai的博客
12-05 1152
什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。语法：<!--注释文字 -->注释代码是不会在结果窗口中显示出来的。
用javascript动态注释掉HTML代码
12-10
用javascript动态注释掉HTML代码 – 51windows.Net 1 2 3 4 5 6 7 8 你没有看到34单元格吧，因为他用javascript注释掉了，怎么做的？看源文件！源文件怎么看？点右键，选择”查看源文件(V)”… 注意：动态注释的html中不能再有html注释代码”<!– –>”，[removed]与</ script>之间，不要有”<!–“和”//–>” 除了这个方法，你还可以用document.getElementById(“xx”).style=”none”;这种方法动态显示或隐藏某段区域 [Ctrl+A 全选 注:如需引入外部J
500多个html网页格式的各种源代码
10-27
C01-C23 C01文件夹中内容： 1.1 HTML页面反向显示.htm 1.2 页面自动最大化.htm 1.3 页面自动刷新.htm 1.4 页面的后退、刷新、前进.htm 1.5 保护网页源代码.htm 1.6 保护自己的网页不被放入框架.htm 1.7 打印页面的出错原因.htm 1.8 当前网页调用其他网页.htm 1.9 倒计时载入页面.htm 1.10 定义网页的关键字.htm 1.11 进入页面同时弹出欢迎对话框.htm 1.12 禁止网页另存.htm 1.13 禁止页面加入缓存.htm 1.14 离开页面时弹出对话框.htm 1.15 判断页面是否添加了W3C声明.htm 1.16 屏蔽网页中的脚本.htm 1.17 以频道模式打开页面.htm 1.18 自动识别网页类型.htm 1.19 在网页中动态添加Script脚本.htm 1.20 用JavaScript随机修改页面的标题.htm 1.21 判断网页加载完毕.htm 1.22 嵌入网页的播放器.htm 1.23 设置指定网页为主页.htm 1.24 使用JavaScript传递页面参数.htm 1.25 页面被冻结.htm 1.26 页面的地震效果.htm 1.28 页面逐渐缩小.htm 1.29 页内跳转.htm 1.30 代码测试页面.htm 1.31 屏幕式左右拉开页面的效果.htm 1.32 下雨的页面.htm 1.33 页面背景颜色渐变.htm 1.34 自动滚屏.htm 1.35 在页面中画点.htm 1.36 页面顶部颜色渐变特效.htm 1.37 页面打开时的百叶窗效果.htm 1.38 页面源代码的加密.htm
html基础代码实现,HTML基础
weixin_35600835的博客
06-09 260
作为一名前端小白，我在此记录下学习前端的过程。总的来说，这个 html 学习了 2 天左右，这个文章写了1 天左右，下一步计划准备学习 css，每天都过的很充实，每天都在成长的路上飞快奔跑。虽然在前端浩瀚的大海里边学到了一点点，但与昨天的自己相比，是一大步。html在前端开发里面扮演基层的岗位，正是有了html，前端才有了骨架。再经过CSS的加工，才能成为我们熟悉的页面。接下来我们一起来学习前端第...
HTML 注释 与 水平线
Kiddie_Lu的博客
05-01 213
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。&lt;hr&gt; 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;luxuze.com&
html实现浪漫的爱情日记（附源码）
xcLeigh
02-28 8745
html实现浪漫的爱情日记（附源码），html实现爱情表白,html实现爱情浪漫，html实现甜蜜爱情，可以配置以爱情的相遇，相熟，相知，相爱的四个主题，然后以对话的方式记录下来，支持调整主题音乐，可以自动配置背景图片，改成自己的爱情背景图片 ，基于html5开发的，直接浏览器打开使用。兼容手机端和电脑web端。
使用html与css实现一个漂亮的网页
代码海中一粒米
03-20 6307
效果图： 实现的代码： html代码： <!DOCTYPE > <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Html中各种表格的实现
寻箫之音
03-12 1113
各种表格的实现： 表格的使用 表格的基本应用 基本表格： 1.1 1.2 1.3 2.1 2.2 2.3 3.1 3.2 3.3
html之添加注释
dreamzuora的博客
12-19 1296
为文档添加注释 或者 并且可以分为多行-->
html注释图案,jQuery图片点击弹出遮罩层标记注释特效
weixin_36377635的博客
06-21 250
这是一款简单的、非常实用的jQuery图片点击弹出遮罩层标记注释特效。HTMLhtml结构非常简单。使用一个portfolio作为wrapper，在里面可以添加多个portfolio_item。 ...JAVASCRIPT首先将wrapper保存为一个jquery变量。var $portfolio = $('#portfolio');然后定义当图片被点击时发生的事件。我们将...
html实现图片轮播（含代码和注释）
最新发布
07-02
HTML实现图片轮播可以通过JavaScript配合CSS和HTML基本结构来完成，这里提供一个简单的基于JavaScript的轮播图示例。这个例子中我们将使用`<img>`元素、一些CSS样式以及JavaScript事件处理。 首先，创建HTML结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入CSS文件 --> <title>图片轮播</title> </head> <body> <div class="slider-container"> <div class="slider"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div> <a class="prev-btn" onclick="prevSlide()">上一张</a> <a class="next-btn" onclick="nextSlide()">下一张</a> </div> <script src="scripts.js"></script> <!-- 引入JavaScript文件 --> </body> </html> ``` 接下来，创建一个简单的CSS文件（styles.css）: ```css .slider-container { position: relative; width: 600px; height: 400px; } .slider { overflow: hidden; display: flex; transition: transform 0.6s ease; } .slider img { width: 100%; height: auto; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } ``` 最后，编写JavaScript脚本（scripts.js），用于控制图片切换： ```javascript let slideIndex = 1; // 初始索引为1 function showSlides(n) { let i; const slides = document.querySelectorAll('.slider img'); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; // 隐藏所有图片 } slides[slideIndex - 1].style.display = "block"; // 显示当前索引的图片 } function prevSlide() { showSlides(slideIndex -= 1); } function nextSlide() { showSlides(slideIndex += 1); } ``` 现在，当你点击“上一张”或“下一张”按钮时，图片就会按照顺序切换。这只是一个基础的例子，实际应用可能还需要考虑更多因素，比如动画效果、鼠标悬停暂停等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值