HTML 入门第一课

最新推荐文章于 2023-08-05 21:55:34 发布
最新推荐文章于 2023-08-05 21:55:34 发布
阅读量176 收藏
点赞数 1
分类专栏： HTML入门 文章标签： HTML入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37347413/article/details/83020202
版权

HTML学习

Html是一种超文本标记语言，用于网页编程。

1. html的学习思想：

html都是标记性语言，中间写入数据，操作（丰富）数据需要更改标签的属性。

2. html的特点：

  1. 大多数都有开始和结束标记。例如：<html></html> ,<head></head>
  2. 少数只有单个标记。<br/><hr/>
  3. 标签必须要有结束标签 一对的{ }
    单个的{
    }

3.基本的格式

<标签 属性名=属性值 属性名=属性值>数据内容</标签>

一.字体的练习

<html>
	<head>
		<title>字体的基本使用</title>
	</head>
	<body>
		<p>今天首先学习<font color=#CB080B size="+6">HTMl</font>的基本使用</p>
		我<br/>爱<br/>你
		<h1>我爱你<h1><hr/>
		<h2>我爱你</h2>
		<h3>我爱你</h3>
		<h4>我爱你</h4>
		<h5>我爱你</h5>
		c<a b>d   
		5<7 5>2 <br/>
		c&lt;a &nbsp;&nbsp;&nbsp; b&gt;d
<!--
	浏览器中显示为：cd 5<7 5>2   
	原因： html为强标签性语言，html没有数字标签
			会自动识别<ab>为标签，但是又解析不了，所以没有显示。
-->
<!--
特殊符号用：&lt; 小于号
			&nbsp;   空格	
-->
			
	</body>
</html>

字体练习的输出结果

二、列表的学习

<html>
	<head><title>列表的学习</title></head>
	<body>
	<!--列表-->
	<dl>
		<dt>技术部门</dt><!--dt是上层列表，dd列表相对于dt要缩进2个&nbsp；的-->
		<dd>java部</dd>
		<dd>C++部</dd>
		<dd>VB部</dd>	
	</dl><hr/>
	<!--无序列表-->
	<ul type="square">
		<li>技术部门</li>
		<li>java部</li>
		<li>c++部</li>
	</ul><hr/>
	<!--有序列表-->
	<ol type="A">
		<li>技术部门</li>
		<li>java部</li>
		<li>c++</li>
	</ol>	
	
	</body>
</html>

演示效果在这里插入图片描述

三、图像标签

<html>
	<head><title>图像标签的学习</title></head>
	<body>
	<!--列表-->
	<img alt="哇塞，桌面图标" src="1.png" width="900" height="800" border=15>
	
	</body>
</html>

四、表格学习

<html>
	<head><title>表格的学习</title></head>
	<body>
	<!--表格
	cellpadding="0"  内边距   字体靠表格最里面的框线距离为0
	cellspacing="0"  单元格边距
    colspan   单元格合并
	rowspan="2"  行单元格合并
	colspan="2"	列单元格合并
表格的下一级标签： 即使不定义也存在。<thead></thead> <tbody></tbody> <tfoot></tfoot> 可以分一段一段的下载，方便解析。

	-->
	<table width="200" height="300" border="2" bordercolor="#05AA37" cellpadding="100" cellspacing="
																									0">
		<caption>表格的学习</caption>
		<tr><!-- 表示行-->
			<td>张三</td><!--单元格-->
			<td>23</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>23</td>
		</tr>
	</table><br/>
		
	<table width="200" border="1" bordercolor=#000000 cellpadding=0 cellspacing="0">
		<tr >
		<td colspan="2">张三是大帅哥</td>
		</tr>	
		<tr>
		<td>李四也是</td>
		<td>王五也是</td>
		</tr>
	</table><br/>
		
	<table width="400" border="1" bordercolor="#09EB77" cellpadding="0" cellspacing="0">
		<tr>
			<td rowspan="2">张三是大帅哥</td>	
			<td>李四也是</td>
		</tr>
		<tr>
			<td>王五也是</td>	
		</tr>
	</table>
		
	
	</body>
</html>

在这里插入图片描述
五、超链接学习
1.超链接的第一个作用：链接资源

<html>
	<head><title>链接的学习</title></head>
	<body>
	<!--
	1.连接资源
	href 的属性值不同，解析方式不同。
		如果没有指定，则是file解析方式，打开一个文件。
		如果是指定是http  则是打开网页。
		thunder: 启动迅雷。

		target="_blank 新窗口打开
		target="_parent  在本页内打开
	-->
	<a href="www.baidu.com" target="_blank">百度一下</a><br/> <!--在新选项卡打开-->
	<a href="http://xinlang.com" target="_parent">新浪</a><br/><!--在本页打开-->
	<a href="1.png" target="_self">打开一个图片</a><br/><!--在本页的视图中打开-->
	<a href="thunder://lsfjkls " target="_blank">启动迅雷</a><br/>
	<a href="javascript: void(0)" onClick="alert('我弹')">点击无反应，可以自定效果  我弹为效果</a><!--字体必须为单引号-->
	</body>
</html>

2.超链接的第二个作用：做标记，俗称锚
主页的代码

<html>
	<head><title>链接的学习</title></head>
	<body>
	<!--
	<a name=top></a>  必须取一个名字作为一个标示
	<a href=#top>回到顶部</a>   必须带有#  不然以默认file解析
	-->
	<a name=top></a>
	<img src="1.png" width=800 height=900 border=10>
	<a name=center></a>
	<img src="1.png" width=800 height="900" border=1>
	<a href=#top>回到顶部</a>
	<a href=#center>回到中部</a>
	</body>
</html>

六、框架的学习

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架的学习</title>
</head>
<!--
框架的好处：可以把固定的页面写在一个框架里，增加代码复用性。
框架的写法： 在</head>和<body>的开始中间。
		框架的标签的标示：frameset  里面的框架标示： frame

<frame src="1.png"></frame>  框架里的内容是Src连接



下面实现的是一个 在本窗口内点击一个文件，显示在另一个窗口。
-->
	
	
<frameset rows="40%,*">
	<frame src="day-1.html"></frame>
	<frameset cols=40%,*>
		<frame src="day-2.html" name=left></frame>
	
		<frame marginwidth="300" marginheight="300" name=right></frame>
	</frameset>
	
</frameset>
<body>
	
	
</body>
</html>

重点是day-2的代码如下：

<!doctype html>
<html>
	<head><title>链接的学习</title></head>
	<body>
	<!--
	1.连接资源
	href 的属性值不同，解析方式不同。
		如果没有指定，则是file解析方式，打开一个文件。
		如果是指定是http  则是打开网页。
		thunder: 启动迅雷。

		target="_blank 新窗口打开
		target="_parent  在本页内打开
	-->
	<h1>左边的页面</h1>
	<hr/>
		
		
	<a href="1.png"       target="right"                                  >打开图片</a><br/> 
		
		
		
	<a href="http://xinlang.com" target="_parent">新浪</a><br/>
	<a href="1.png" target="_self">打开一个图片</a><br/>
	<a href="thunder://lsfjkls " target="_blank">启动迅雷</a><br/>
	<a href="javascript: void(0)" onClick="alert('我弹')">点击无反应，可以自定效果  我弹为效果</a><!--字体必须为单引号-->
	</body>
</html>

day-1的代码

<html>
	<head><title>链接的学习</title></head>
	<body>
	<!--
	<a name=top></a>  必须取一个名字作为一个标示
	<a href=#top>回到顶部</a>   必须带有#  不然以默认file解析
	-->
	<font color=#F3090D size="18"> 我的小可爱董宝宝</font>
	</body>
</html>

七画中画

day-1的代码同上。

<!doctype html>
<html>
	<head><title>链接的学习</title></head>
	<body>
	<!--
	画中画标签： <iframe></iframe>
	用处：可以在一个网页中显示多个网页，分开开发，高效。
	-->
	<iframe src="day-1.html">对不起您的浏览器不支持</iframe>
	</body>
</html>

八、表单组件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<!--
表单属性必须有  name和value 属性 
-->
<body>
	<form>
		输入名称:<input type="text" name="user" value=""><br/>
		输入密码:<input type="password" name="password" value=""><br/>
		性别:<input type="radio" name=sex  value="men">男<input type="radio" name="sex" value="women" checked>女<br/>
		学科：<input type="checkbox" name="subject" value="java">Java<input type=checkbox name="subject" value="mysql">MYSQL<input type="checkbox" name="subject" value="html">HTML<br/>
		文件：<input type="file" name="file" value=""><br/>
		图片：<input type="image" src="1.png" name="image" value="" width="80" height="80"><br/>
		隐藏组件<input type="hidden" name="hidden" value="hi"><br/><!--数据不需要客户知道，需要上传到服务器-->
		按钮：<input type="button" name="but" value=么么哒 onClick="alert('我爱你董宝宝')"><br/>
		
		国家：<select name="country">
		
			<option value="none">选择国家</option>
			<option value="cn">中国</option>
			<option value=am>美国</option>
			<option value=yingguo>英国</option>
		</select><br/>
		
		个人介绍：<textArea name="txt" ></textArea><br/><!--大量文本输入-->
		
		
		
		
		
		
		<input type="reset" value="重置数据" name=reset>&nbsp;&nbsp; <input type=submit  name="submit" value=提交数据>
		
		
		
	</form>
</body>
</html>

显示如下
在这里插入图片描述

九、表单提交到服务器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单学习</title>
</head>
<!--
<form action="http://127.168.1.1:8000" method="get">
		1.get的方法：
		GET /?user=4564&pass=46546&pass=5464&sex=men&technology=java&country=null HTTP/1.1 请求头
		Host: 127.168.1.1:8000
		Connection: keep-alive
		Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
		Upgrade-Insecure-Requests: 1
		User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.7 Safari/537.36
		Accept-Encoding: gzip, deflate
		Accept-Language: zh-CN,zh;q=0.8
		DNT: 1

请求体与请求行间隔为一行。
	2.post方法
	
		POST / HTTP/1.1  请求行
		Host: 127.168.1.1:8000
		Connection: keep-alive
		Content-Length: 63
		Cache-Control: max-age=0
		Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
		Origin: null
		Upgrade-Insecure-Requests: 1
		User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.7 Safari/537.36
		Content-Type: application/x-www-form-urlencoded
		Accept-Encoding: gzip, deflate
		Accept-Language: zh-CN,zh;q=0.8
		DNT: 1

		user=45&pass=45&pass=45&sex=women&technology=mysql&country=null 请求体

-->
<body>
<form action="http://127.168.1.1:8000" method="put">
<table border="1" bordercolor="#000000" cellpadding="6" cellspacing="0" width=800 height="600">
  <tr>
    <td align="center" colspan="2">注册表单</td>
  </tr>
  <tr>
    <td>输入名称</td>
	  <td><input type="txt" name="user" ></td>
  </tr>
  <tr>
    <td>输入密码</td>
	  <td><input type="password" name="pass"></td>
  </tr>
  <tr>
    <td> 确认密码</td>
	  <td><Input type="password" name=pass ></td>
  </tr>
  <tr>
    <td> 性别</td>
	  <td>男<input type="radio" name=sex value="men" checked> 女<input type="radio" name="sex" value="women"> </td>
  </tr>
  <tr>
    <td>技术</td>
	  <td>JAVA<input type="checkbox" name="technology" value="java"> MYSQL<Input type="checkbox" name="technology" value=mysql></td>
  </tr>
  <tr>
    <td>选择国家</td>
	  <td><select name="country">
		  <option value=null>-选择国家-</option>
		  <option value=zh>中国</option>
		  <option value="am">美国</option>
		  <option value="yg">英国</option>
		  </select></td>
  </tr>
  <tr>
    <td align="center" colspan="2"><input type="reset"  value="清除数据"> <Input type="submit" value="提交数据"></td>
  </tr>
</table>
	</form>
</body>
</html>

1.get提交和post提交的区别：

get提交： 信息显示在地址栏中，不安全。
get将数据封装在请求头中。
post提交： 信息在请求体中，比较安全。

在服务端的区别： 提交中文后，服务器会用iso8859-1进行解码，会出现乱码。
之后再用iso8859-1进行重新编码，然后再用指定的编码进行解码。
这种方法对get和post方法都适用。

						post方法提交的数据，在服务器端有个request对象中setcharacterEncoding方法可以直接传入中文码表，就可以解码。
						**只对请求体中的数据管用。**

十、头部标签的学习

<!doctype html>

表单学习

–>

我想飞起来 
<b>今天</b>我在学习<u>java</u>，<i>有你很开心</i>。
<pre>可以将文本按代码的格式
显示在浏览器中。</pre>

十一、区域标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>区域标签学习</title>
</head>
<!--
<p>标签结束后，空一行。
<div>相当于行标签
<span>相当于单元格标签
-->
<body>
	<div>区域1</div>
	<div>区域二</div>
	<span>区域1</span>
	<span>区域2</span>
	<p>区域1</p>
	<p>区域2</p>
</body>
</html>

在这里插入图片描述

m0_37347413
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML前端入门第一课.pptx
11-20
简单介绍html中的一些主要的标签（元素），例如：,,,,等标签
html5页面post数据后获得响应值,GET POST
weixin_31894867的博客
06-04 867
一.get和post区别1.get时从服务器上获取数据,post是向服务器提交数据2. get是吧参数数队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTTP HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程.3. 对于get方式,服务器端用Reque...
Promise封装前端接口
个人工作学习内容总结
04-10 506
什么是Promise Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 如何利用Promise进行类似同步操作 test(index){ return new Promise((resolve, reject) => { //逻辑处理 if ( index*10>100 ) { //执行通过返回参数 reject(index*10) }else{ //执行错误返回参数 resolve("数据小于10") } }) },.
HTML5表单--get和post
lilshork的博客
09-22 1923
HTML get和post的区别
html引入vue,封装axios请求
lbx
03-07 5868
html引用vue封装axios请求，页面调用请求
html+Vue+封装axios实现发送请求
aybaiwan的博客
08-05 1668
在html中使用Vue和Axios时，可以在HTML中引入Vue库和Axios库，然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中，你可以使用Axios发送HTTP请求来获取数据，并将数据绑定到Vue模板中进行展示。生命周期钩子中，我们使用Axios发送了一个GET请求来获取数据，并将返回的数据赋值给Vue实例的。然后，Vue将数据绑定到模板中，实现了动态展示数据的效果。在这个例子中，我们首先在头部引入了Vue和Axios的库文件。最后，我们在模板中使用Vue的。例如，可以使用Vue的。
简单封装 HTTP 请求
zhangxin09的专栏
07-06 6592
简单封装 Java 类库里面的 HttpURLConnection 来完成日常的 HTTP 请求，如 GET、HEAD、POST 等的请求。
HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件
weixin_44867717的博客
12-08 1152
HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件 发送http请求 Egret 中封装了 XMLHttpRequest 进行异步的数据交互。 GET 方法 GET 方法是 HTTP　请求的默认方法，数据经过简单的编码发送出去，并作为 URL 的一部分发送到服务器。由于浏览器对 URL 长度的限制，提交的数据长度也有限制。 POST 方法 POST 方法克服了 GET 方法的一些缺点，可以发送
html5中get post,jQuery AJAX get() 和 post() 方法
weixin_28972455的博客
06-15 243
jQuery - AJAX get() 和 post() 方法jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。HTTP 请求：GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据GET 基本上用于从服务器获得(取回)数...
Ajax请求GET/POST方法的封装
yihuoZhou的博客
05-26 3970
Ajax请求GET方法的封装，网易微专业上的一道GET方法封装练习题，下面是我的设计实现。 方法:get(url, options, callback) 参数 url {String} 请求资源的url options {Object} 请求的查询参数 callback {Function} 请求的回调函数，接收XMLH
thinkphp5模拟post请求_thinkphp5的get和post数据封装的方法介绍（代码）
weixin_39595430的博客
12-21 1333
本篇文章给大家带来的内容是关于thinkphp5的get和post数据封装的方法介绍(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。thinkphp5的get和post数据封装一、view(html页面获取数据)二、控制器一、view(html页面获取数据) 搜索二、控制器1、正常情况下我们是这样操作的public function index(){$where['stat...
jQuery入门第一课 jQuery选择符
12-09
getElementById方法返回的是一个HTML元素，jQuery选择符返回的是HTML元素的一个包装。利用这个包装集，jQuery赋予了HTML元素更多的可以操作的方法。在JQuery中，处于核心地位的一个函数就是$。对，它就是一个函数，...
andriod开发入门第一课
08-14
经典的andriod入门必学一，课堂复习 1,什么是安卓？ 一款开源的基于linux的操作系统 2，安卓的体系结构 上层:基于java的应用程序开发 中间层：虚拟机Dalvik 底层：基于linux的C++编程 3，安卓的开发环境（IDE） 1，...
web入门第一课--建造网页的房子HTML+ 搞装修CSS.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html第一堂课的第一个html.html
03-27
html入门学习，一些基本的标签运用，标题标签，h1-h6,字体大小，表格，嵌入链接 图像。因为图片不能够同时上传，故无法显示，请谅解。方法介绍是可以的。
原生js创建get/post请求以及封装方式、axios的基本使用
tangtanglinli的博客
03-11 3587
原生js创建get/post请求以及封装方式、axios的基本使用
html中使用js将axios请求封装
热门推荐
chenguixu的博客
10-29 1万+
百度中全是vue-cli中使用axios的方式，我需要用的是在html中引入axios.js 1、新建 httpRequest.js 文件，定义如下方法： //axios封装post请求 function axiosPostRequst(url,data) { let result = axios({ method: 'post', url: ur...
在HTML表单中关于get和post,IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法...
weixin_35348182的博客
06-29 473
指引表单在网页应用中十分重要，基本上任何一个网站都必须使用到表单元素，所以表单的美观和易于交互对于网站设计就变得十分重要。HTML5对目前Web表单进行了全面提升，使得我们使用表单更加智能。它在保持了简单易用的特性的同时，还增加了许多内置的控件或者控件属性来满足用户的需求，提升用户体验，并且同时减少了开发人员的编程。HTML5主要对表单的一下方面进行了改进：更自由的表单结构、多样的输入类型、新增...
网络编程——Http请求方式Get与Post
甜筒八部 的专栏
10-01 3494
请求报文 请求行 请求行由方法字段、URL 字段 和HTTP 协议版本字段 3 个部分组成，使用空格隔开。 常用的 HTTP 请求方法有 GET、POST。 GET 当客户端要从服务器中读取某个资源时，使用GET 方法。 GET 方法要求服务器将URL 定位的资源放在响应报文的数据部分，回送给客户端，即向服务器请求某个资源。 使用GET方法时，请求参数和对应的值附加在 URL 后面，利用一个问号(“?”)代表URL 的结尾与请求参数的开始，传递参数长度受限制，因此GET方法不适合用于上传数据..
python第一课教案
最新发布
04-16
当然，我可以为您介绍一下Python第一课的教案。以下是一个简单的Python第一课教案示例： 主题：Python基础入门 目标： - 了解Python编程语言的基本概念和特点 - 学习如何安装和配置Python环境 - 掌握Python的基本语法和常用数据类型 - 能够编写简单的Python程序 教学内容： 1. Python简介 - 介绍Python的历史和应用领域 - 强调Python的简洁性和易读性 2. 安装和配置Python环境 - 下载并安装Python解释器 - 配置环境变量 - 验证安装是否成功 3. Python基本语法 - 注释：单行注释和多行注释 - 变量：命名规则和数据类型 - 输出：print()函数的使用 - 输入：input()函数的使用 4. 常用数据类型 - 数字类型：整数、浮点数、复数 - 字符串类型：定义、拼接、索引和切片 - 列表类型：定义、索引和切片、常用操作方法 - 元组类型：定义、索引和切片、不可变性 - 字典类型：定义、添加和访问元素、常用操作方法 5. 编写简单的Python程序 - 计算两个数的和并输出结果 - 判断一个数是否为偶数并输出结果

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值