HTML学习笔记

最新推荐文章于 2024-08-13 10:10:57 发布
最新推荐文章于 2024-08-13 10:10:57 发布
阅读量202 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TDOA1024/article/details/83032704
版权

图片标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 演示图片标签 -->

<img src="imgs\\1.jpg" height=200 width=100 border=10 alt="西城男孩" />

</body>
</html>

表格标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border=1 bordercolor="#0000EE" ceelpadding=10 cellspacing=0 width=500>
	<tbody><!-- 表格的下一个标签是tbody，不定义也存在 -->
	<tr>
		<th rowspan=2>个人信息</th>
		<th>张三</th>
	</tr>
	<tr>
		
		<td>李四</td>
	</tr>
	</tbody>
</table>

<hr/>
<table border=1 bordercolor="#0000EE" ceelpadding=10 cellspacing=0 width=500>
	<tr>
		<th colspan=2>个人信息</th>
	
	</tr>
	<tr>
		<td>张三</td>
		<td>李四</td>
	</tr>
</table>

<hr/>
	<table>
		<caption> 表格标题 </caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>30</td>
		</tr>
	
	
	</table>


</body>
</html>

列表标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 	<!--HTML注释： 演示标签 。
 	列表标签：<dl>
 	上层项目：<dt>
 	下层项目: <dd>:有自动缩进的效果
 	
 	-->
 	<dl>
 		<dt> 上层项目 </dt>
 		<dd> 下层项目</dd>
 		<dd> 下层项目</dd>
 		<dd> 下层项目</dd>
 		<dd> 下层项目</dd>
 	</dl>
 	
 	<hr/>
 	<!-- 有序和无序的项目列表
 	有序：<ol>
 	无序：<ul>
 	条目封装都用<li>
	
 	 -->
 	
 	<ol type="a">
 		<li>有序</li>
	 	<li>有序</li>
	 	<li>有序</li>
	 	<li>有序</li>
 	</ol>
 	
 	<ul>
 		<li>无序</li>
 		<li>无序</li>
 		<li>无序</li>
 		<li>无序</li>
 	
 	</ul>
 	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 
定位标签 -->

<a name=top>顶部位置</a>
<hr/>
<img src="11.jpg" height=900 width=400 border=10/>
<hr/>
<a name=center>中间位置</a>
<hr/>

<img src="11.jpg" height=900 width=400 border=10/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>
</body>
</html>

超连接：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
	超链接：
	作用：连接资源
	当有了href属性才有了点击效果，属性不同，解析方式不同
	
	如果在该值中没有指定任何协议，解析时，是按照默认的协议来解析的，默认协议是file协议
	 -->
	 
	 <a href="http://www.sina.com" target="_blank">点击</a>
	 <hr/>
	 
	 <a href="javascript:void(0)"onclick="alert{'我谈'})">这是一个超链接</a>

</body>
</html>

框架：

framedemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
	
	<!-- 定义框架，使用标签 frameset-->
	
	
	<frameset rows="30%,*">
		<frame src="top.html" name="top""/>
		
	<frameset cols="30%,*">		
		<frame src="left.html" name="left"/>
		<frame src="right.html" name="right"/>
	</frameset>
	
	
	</frameset>


<body>

</body>
</html>

left.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>左边栏连接</h3>
	<a href="../img.html" target="right"> 连接一 </a>
	<a href="../link.html" target="right"> 连接二</a>
	<a href="../table.html" target="right"> 连接三 </a>
	
</body>
</html>

right.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>内容显示区域</h2>
</body>
</html>

top.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>这是我的网站logo</h1>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <iframe src="../img.html" height=500 width=400> 这是一个画中画标签 </iframe>
</body>
</html>

表单：


           get和post提交的区别：
           1.get：提交的信息都放到地址栏中
             post：提交的信息不放到地址栏中
           2.get:对于敏感信息不安全
             post：对于敏感信息安全       
           3.get:对于大数据不行
             post:大数据可以
           4.get:将消息封装到了请求行中
             post：将消息封装到了请求体中
           
           在服务端的一个区别：
           如果出现将中文提交到Tomcat服务器，服务器会默认用ISO8859-1进行解码会出现乱码。
           解决方式是用ISO8859-1进行编码，在用指定的中文码表解码即可。
           这种方法对get和post提交都有效。
           
           但是对于post提交方式中的中文，还有另外一种解决方式，就是直接使用服务器端的一个对象
           request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
           这个方法只对请求体中的数据进行解码。
           
           综上所述：表单提交，建议用psot。
           
           和服务端交互的三种方式：
           1.地址栏输入url地址：get
           2.超链接：get
           3.提交表单：get和post
           
           如果在客户端做了进行增强型的校验（只要有一个组件的内容是错误的，是无法继续提交的，只有全队才可以提交，
           问：服务端接受到数据后，还需要校验，吗？
           
           需要：为了安全。如果服务端做了增强型的校验，客户端还需要检验吗？
           需要：因为要提高用户的上网体验效果，减轻服务器的压力。

form 标签就是表单
input type=text 是文件输入框value 设置默认显示内容
input type=password 是密码输入框value 设置默认显示内容
input type=radio 是单选框name 属性可以对其进行分组checked="checked"表示默认选中
input type=checkbox 是复选框checked="checked"表示默认选中
input type=reset 是重置按钮value 属性修改按钮上的文本
input type=submit 是提交按钮value 属性修改按钮上的文本
input type=button 是按钮value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的
时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项selected="selected"设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 如果给服务器端提交数据，表单组件中必须有name和value属性，用于数据端获取数据方便 -->
	
	<form>
	
		输入名称：<input type="text" name="user" value=""/><br/>
		输入密码：<input type="password" name="psw"/><br/>
		性别选择：<input type="radio" name="sex" value="nan">男
				 <input type="radio" name="sex" value="nv" checked="checked"/>女<br/>
		选择技术：<input type="checkbox" name="tec" value="java"/>JAVA
				<input type="checkbox" name="tec" value="heml"/>HTML
				<input type="checkbox" name="tec" value="css"/>CSS<br/>
		选择文件：<input type="file" name="file"/><br/>	
		一个图片：<input type="image" src="11.jpg"/><br/>
		<!-- 数据不需要客户端知道，但是可以将其提交服务端。 -->	
		隐藏组件：<input type="hidden" name="myke" value="myvalue"/><br/>
		一个按钮：<input type="button" value="有个按钮" onclick="alert('有个按钮')"/><br/>
		
		<select name="country">
			<option value="non">选择国家</option>
			<option value="cn" selected="selected">中国</option>
			<option value="us">美国</option>
			<option value="ff">法国</option>
		</select><br/>
		
		<textarea rows="10" cols="10" name="text"></textarea>	
		<br/>	
					
		<input type="reset" value="清除数据"/><input type="submit" value="提交数据"/>
		
	</form>
	
</body>
</html>

格式化表单：

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>Insert title here</title>
</head>
<body>
   		<!-- 表单格式化 -->
   		
   		
   		
	<form action="http://192.168.1.205:9090" method="post">
		<table  border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="0" width="500">
	 			<tr>
	 				<th colspan=2> 注册表单 </th>	
	 			</tr>
	 			<tr>
	 				<td> 输入名称:</td>
	 				<td> <input type="text" name="use"/> </td>		
	 			</tr>
	 			<tr>
	 				<td> 输入密码： </td>
	 				<td> <input type="password" name="psw"/> </td>		
	 			</tr>
	 			<tr>
	 				<td> 性别选择： </td>
	 				<td> <input type="radio" name="sex" value="nan"/>男 </td>		
	 				<td> <input type="radio" name="sex" value="nv" checked="checked"/>女</td>		
	 			</tr>
	 			<tr>
	 				<td> 选择技术： </td>
	 				<td> <input type="checkbox" name="tec" value="java"/> JAVA </td>		
	 				<td> <input type="checkbox" name="tec" value="heml"/> HTML </td>		
	 				<td> <input type="checkbox" name="tec" value="css"/> CSS </td>		
	 			</tr>
	 			<tr>
	 				<td> 选择文件 </td>
	 				<td> <input type="file" name="file"/> </td>		
	 			</tr>
	 			<tr>
	 				<td> 选择国家 </td>
	 				<td> 
	 					<select name="country">
	 						<option value="cn" selected="selected">中国 </option>
	 						<option value="us">美国</option>
	 						<option value="uk">英国</option>
		
	 					</select>	
	 				 </td>		
	 			</tr>
	 			<tr>
	 				<th colspan=2> 
	 				<input type="reset" value="清除数据"/>
	 				<input type="submit" value="提交数据"/>
	 				 </th>
	 				<td>  </td>		
	 			</tr>
		
	 	</table>	
	</form>
		
</body>
</html>

服务端：

package cn.itcast.server;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintStream;
import java.net.ServerSocket;
import java.net.Socket;

public class RegServer {

	public static void main(String[] args) throws IOException {
		// TODO Auto-generated method stub
		ServerSocket ss=new ServerSocket(9090);
		Socket s=ss.accept();
		System.out.println(s.getInetAddress().getHostAddress());
		InputStream ins=s.getInputStream();
		byte[]buff=new byte[1024];
		int len=ins.read(buff);
		System.out.println(new String(buff, 0, len));
		
		PrintStream out=new PrintStream(s.getOutputStream());
		out.print("<font color='red' size='7' >okkkk</font>");
		ss.close();
		out.close();
		
	}

}

 

其他标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
     	<pre>
     	class Demo
     	{
     	 	public static void main(String[] args)
     	 	{
     	 	System.out.println("hello");
     	 	}    	
     	}
     	</pre>
     	
     	<hr/>
     	
     	<marquee direction="down" behavior="slide">   飞飞飞</marquee>
     	
     	<b>这是</b><i>演示</i><u>其他</u>标签
     	x<sub>2</sub>x<sup>2</sup>
</body>
</html>

end.........

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>这是一个div区域1</div>
	<div>这是一个div区域2</div>
	
	<span>这是一个span区域1</span>
	<span>这是一个span区域2</span>

	<p>这是一个段落1</p>
	<p>这是一个段落2</p>
    
    <!--
    div 标签默认独占一行
    span 标签它的长度是封装数据的长度
    p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）
    -->

 	<!-- 
 	标签分为两大类：
 	1.块级标签（元素）：标签结束后都有换行。div p dl table title ol ul
 	2.行内标签（元素）：标签结束后没有换行。font span img input select a
 	 -->
 
 
</body>
</html>

 

Wnlife
关注
专栏目录
HTML5学习笔记
m0_61721166的博客
03-08 9021
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML学习笔记(全)
weixin_63676550的博客
01-12 5864
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
前端之HTML学习笔记一
m0_53211178的博客
02-28 8239
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2330
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
HTML 学习笔记——插入音频、视频标签
m0_55394328的博客
08-04 7631
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。html中插入音频和视频的方法基本相同，这里以音频为例进行演示音频格式：mp3、ogg、wav视频格式：mp4、ogv、webmaudio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。以上就是今天的学习笔记啦，希望对大家有帮助~...
html学习笔记（二）
m0_51684016的博客
03-24 4847
文章目录一、表格二、语义标签三、特殊符号四、总结 今天学完了html的大部分知识点，剩下了一些较难的知识点如svg等内容，留在以后学vue3、react的时候回过头来学；后续的话要学习css和JavaScript（重点）。这两三天的事情也比较多，今天将Django项目部署在服务器上了，并且成功跑起来了传送门,后续将持续更新该项目。 一、表格 随着框架的发展，table使用的频率越来越低了，现在可能只有真的想实现一个表格时才会使用table。 caption：标题 table  &nbsp
HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置
热门推荐
m0_74282485的博客
12-28 1万+
HBuilderX外部web服务支撑配置 在HBuilderX写的HTML代码无法在浏览器上运行怎么办？ 那是因为你的HBuilderX外部web服务没有
如何高效记录并整理编程学习笔记
vvvae1234的博客
08-13 1402
在编程学习的旅程中，好的笔记记录和整理方法不仅能帮助我们更有效地吸收知识，还能在复习时提供清晰的参考。下面，我将为您提供一些建立高效笔记系统的建议，以帮助您在繁忙学习中保持笔记的条理性，从而打造属于自己的编程学习“知识宝库”。方向一：笔记工具选择方向二：笔记结构设计方向三：实践与复习策略
HTML学习笔记.md
08-01
HTML学习笔记
基于Dockerfile构建的HTML学习笔记设计源码
10-03
本项目是一个基于Dockerfile构建的HTML学习笔记设计源码集合，包含204个文件，涵盖85个Markdown文件、37个PNG图片、31个JPG图片、18个Xmind思维导图、14个draw.io图表、4个JSON文件、2个XML文件、2个CMD脚本和2个...
HTML学习笔记–HTML的语法详解(必看)
12-14
... ...格式：<标记>内容</标记> 3.标记的属性（用来控制图像、文本等如何的显示）格式：<标记 属性1=属性值 属性2=属性值…>内容<...都是定义相同的标记，但是在编写网页的使用尽量...以上这篇HTML学习笔记–HT
卷积神经网络程序-matlab
10-03
卷积神经网络程序-matlab-设置基本参数规格，卷积，降采样层，卷积核的大小
利用神经网络实现DNN信号均衡.zip
最新发布
10-03
利用神经网络实现DNN信号均衡
基于文本增强与争议融合的虚假信息检测模型设计源码
10-03
该项目为吉大毕业论文设计源码，主题为基于文本增强与争议融合的虚假信息检测模型。项目包含20个文件，主要包括14个Python源代码文件、2个文本文件、1个Git忽略文件、1个许可证文件、1个Markdown文件、1个JSON文件。该模型旨在提高虚假信息检测的准确性，适用于相关研究与应用场景。
MATLAB 实现的蜜蜂算法优化卷积神经网络（Bee-CNN）进行图像分类预测的详细实例（包含详细的完整的程序和数据）
10-03
内容概要：本文提供了一个基于MATLAB的应用案例来演示蜜蜂算法优化卷积神经网络进行图像识别的具体流程，具体步骤从数据准备、CNN模型构建开始，到用蜜蜂算法优化权值参数、最后是模型训练以及效果评测。附带详尽完整且可以立即使用的源码与实验数据。 适用人群：熟悉 MATLAB 开发环境的基础用户，对图像分类、卷积神经网络及其改进方法有一定理论了解的工程技术人员。 使用场景及目标：该示例适用于初学者掌握MATLAB环境中结合蜜蜂算法改进的卷积神经网路设计技巧、用于解决复杂的图像识别任务。 阅读建议：学习前先确保自己的MATLAB安装完毕并且对基本操作有了解。建议边学习理论边实践尝试修改部分实验参数以便深入了解各个阶段的效果变化。
HTML学习笔记：从基础到实践
本资源是一个个人编写的HTML学习笔记，涵盖了HTML的基本概念、历史演变、常用编辑器以及基本结构和标签。HTML，全称为超文本标记语言，是一种用于创建网页的标准标记语言，它能描述网页的结构并嵌入文字、图形、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值