前端页面之HTML

最新推荐文章于 2022-07-31 00:18:58 发布
最新推荐文章于 2022-07-31 00:18:58 发布
阅读量207 收藏
点赞数
分类专栏： 学习HTML 学习java 小白学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45277752/article/details/104384353
版权

HTML(超文本标记语言)

1.前端的组成:内容(HTML)+样式(CSS)+页面交互特效(javascript);

2.前端编译(解析)器:浏览器.(浏览没有统一,所以每个浏览内核不同,导致同一个页面用不同	浏览器解析出效果不同(兼容性).)

3.前端开发工具:记事本,nodepad++,HBuilder,Dreamweaver,WebStorm,eclips,myeclips,idea.

4.html:超文本标记语言.后缀名:.htm 或.html.
	(html由标签组成一种语言,每个标签都有自己的意义)

5.html规范:
	5.1:html不区分大小写,但是W3C提倡标签名和属性名全用小写.
	5.2:html页面必须有根标签,根标签必须是<html></html>
	5.3:html标签必须关闭:
			单标签:<标签名 属性名1="值1" 属性名2="值2" />
			双标签:<标签名 属性名1="值1" 属性名2="值2"></标签名>
	5.4:html的标签的属性值一定要写在引号中.
	5.5:html的标签都已经定义好了,每个标签都有独特含义,不能自定义.
	5.6:html的标签可以嵌套,嵌套要正确.<标签名1><标签名2></标签名2></标签名1>

6.html组成:文档声明+html基本结构.

7.html的文档声明:
	7.1:STRICT（严格类型）:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 					Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
	7.2:TRANSITIONAL（过渡类型):<!DOCTYPE html
					PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
					"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	7.3:FRAMESET（框架类型):<!DOCTYPE html
					PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
					"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

8.html基本结构
	<html>
		<head>
			<title>页面标题</title>
		</head>
		<body></body>
	</html>

9.html注释:<!--注释内容-->

10.html中头部常用标签:
	10.1:页面标题标签:<title></title>
	10.2:设置页面字符编码:<meta http-equiv="charset" content="gb2312"/>
			<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
	10.3:网页描述:<meta name="description" content="描述内容"/>
	10.4:设置搜索关键字:<meta name="keywords" content="搜索关键字"/>
	10.5:设置当前页面几秒后跳转到另一个页面:
		 <meta http-equiv="refresh" content="3;url=跳转页面地址"/>

11.html中body常用标签:
	11.1:块级标签:标签要独占一行.
		11.1.1:标题标签:<h1>~<h6>字体由大到小.
		11.1.2:段落标签:<p></p>
		11.1.3:水平线标签:<hr/>
		11.1.4:无序列表
		<!--无序列表-->
		<ul type="square">
			<li>面条</li>
			<li>泡面</li>
			<li>燕窝</li>
			<li>空气</li>
		</ul>
		11.1.5:有序列表
		<!--有序列表-->
		<ol type="I">
			<li>有钱的</li>
			<li>女的</li>
			<li>肤白貌美</li>
			<li>活的</li>
		</ol>
		
		11.1.6:自定义列表
		<!--自定义列表:用于对概念的解释说明,或图文混排-->
		<dl>
			<!--dt中存放的要解释的概念或图片-->
			<dt>java</dt>
			<!--dd中存放的对dt的说明文字-->
			<dd>java是一种纯面向对象的语言</dd>
			<dd>java是一种跨平台的语言</dd>
		</dl>
		
		11.1.7:表格:跨行rowspan="行数"    跨列:colspan="列数"
			 注意:拿到表格的题目,先按最细的行和列来写好,再一行一行找到那些列要跨					行和跨列,找到后再跨行跨列,跨完后将对应的列删除.
		 	<!--表格-->
		<table border="1" width="400" height="300">
			<!--行-->
			<tr>
				<!--列-->
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<!--行-->
			<tr>
				<!--列-->
				<td>赵公子</td>
				<td>20</td>
				<td>男</td>
			</tr>
			<!--行-->
			<tr>
				<!--列-->
				<!--跨行-->
				<td rowspan="2">赵公子2</td>
				<!--跨列-->
				<td colspan="2">21</td>
			</tr>
			<!--行-->
			<tr>
				<!--列-->
				<td>22</td>
				<td>男</td>
			</tr>
		</table>

		功能表格:
			<!--功能表格-->
		<table border="1" width="600" height="300px">
			<!--表的标题-->
			<caption>年中宿舍报表</caption>
			<!--表头-->
			<thead>
				<!--行-->
				<tr>
					<!--列-->
					<th>宿舍号</th>
					<th>水费</th>
					<th>电费</th>
				</tr>
			</thead>
			<!--表的主体-->
			<tbody>
				<!--行-->
				<tr>
					<!--列-->
					<td>101</td>
					<td>50</td>
					<td>1000</td>
				</tr>
				<tr>
					<!--列-->
					<td>102</td>
					<td>70</td>
					<td>800</td>
				</tr>
				<tr>
					<!--列-->
					<td>103</td>
					<td>60</td>
					<td>1200</td>
				</tr>
			</tbody>
			<!--表尾-->
			<tfoot>
				<!--行-->
				<tr>
					<!--列-->
					<th>总计</th>
					<th>180</th>
					<th>3000</th>
				</tr>
			</tfoot>
		</table>	
	
		11.1.8:表单:整个表单是块级标签,表单中每个元素是等级标签.
			<!--表单-->
		<form method="get/post" action="5.特殊表格.html" enctype="application/x-www-form-urlencoded">
			<!--文本框--><!--placeholder:在框中显示提示语-->
			用户名:<input type="text" name="" value="" 
						placeholder="用户名"/><br/>
			<!--密码框--><!--只读属性:readonly-->
			密码:<input type="password" name="" value="123456" 
					readonly="readonly"/><br/>
			<!--单选按纽:同一组单选按纽的name属性值相同-->
			性别:<input type="radio" name="sex" value="man" checked="checked"/>男
				 <input type="radio" name="sex" value="woman" checked="checked"/>女<br/>
			<!--多选按纽:同一级多选按纽的name属性值相同-->
			爱好:<input type="checkbox" name="hobby" value="sing" checked="checked"/>sing
				<input type="checkbox" name="hobby" value="dance"/>dance
				<input type="checkbox" name="hobby" value="rap" checked="checked"/>rap
				<input type="checkbox" name="hobby" value="sleep"/>sleep
				<input type="checkbox" name="hobby" value="study"/>study
				<input type="checkbox" name="hobby" value="basketball"/>basketball<br/>
			<!--下拉列表框-->
			出生城市:<select name="">
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option value="shengzhen" selected="selected">深圳</option>
					</select><br/>
			<!--文件域-->
			头像:<input type="file" name=""/><br/>
			<!--多行文本(文本域)-->
			协议:<textarea rows="6" cols="20">
					请阅读以下协议
						dfeifiefefefeffefe,fefefefefefefefefefefefefefefef
				</textarea>
				<input type="checkbox" name=""/>同意协议<br/>
			<!--普通按纽--><!--禁用disabled-->
			<input type="button" value="普通按纽" 
					disabled="disabled"/>
			<!--提交按纽-->
			<input type="submit" value="提交"/>
			<!--图片按纽,也有提交功能-->
			<input type="image" src="image/btnLogin.jpg"/>
			<!--重置按纽-->
			<input type="reset" value="重置"/>
		</form>

		11.1.9:容器标签:<div></div>

	11.2:行级标签(内联标签):内容有多大占多大的位置.
		11.2.1:换行标签:<br/>
		11.2.2:<img src="图片路径" title="鼠标止悬停文字" 
						alt="图片加载失败提示文字"/>
		11.2.3:超链接:
				11.2.3.1:页面间链接:<a href="跳转的地址">内容</a>
				11.2.3.2:锚链接:跳转到指定页面的指定位置.
						页面内锚链接:
								在目标地方作标记:<a name="标记名">内容</a>
								跳转地方:<a href="#标记名"></a>
									
						页面间锚链接:
								在目标地方作标记:<a name="标记名">内容</a>
								跳转地方:<a href="页面地址#标记名"></a>

				11.2.3.3:功能性链接:<a href="mailTo:邮箱地址"></a>
		11.2.4:范围标签:<span></span>

12.框架集:框架集与<body>标签不共存.页面要么不用框架集,要用框架集,整个页面必须全				用.
	作用:用于将页面划分几个模块来布局.
	优点:方便布局.
	缺点:加载速度慢;灵活性差.
	<html>
	<head>
		<!--页面标题标签-->
		<title>框架集的使用</title>
		<!--设置页面的字符编码-->
		<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
		<!--页面描述-->
		<meta name="description" content="这是我们写的第二个页面"/>
	    <!--搜索关键字-->
		<meta name="keywords" content="html,second"/>
	</head>
	<frameset rows="25%,50%,*" frameborder="0">
		<frame src="2.html的头部常用标签.html"/>
		<frameset cols="20%,60%,*" frameborder="0">
			<frame src="6.表单.html" />
			<frame src="5.特殊表格.html"/>
			<frame src="6.表单.html"/>
		</frameset>
		<frame src="2.html的头部常用标签.html" />
	</frameset>
</html>

13.内联框架:可以在页面上任意地方引入其他页面.优点:灵活性高.
	<!--内联框架-->
		<iframe src="6.表单.html" frameborder="0" width="100%"></iframe>

14.特殊符号
	< 小于号          
	 > 大于号       
	 & 与字符        
	 " 引号         
	 ® 己注册        
	© 版权        
	™ 商标        
	  空格
随风者1997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端~html页面
qq_34590512的博客
04-12 299
HTML课堂笔记 1. HTML基本结构 <!DOCTYPE html> <html> <!-- 根元素 --> <head> <!-- 头元素，用于指定HTML文章中的一些元数据：meta：定义页面的编码格式；title:定义页面的标题--> <meta charset="utf-8"> <title></title> <!-- 页面标题格式 --> </head> &l
【前端静态页面HTML】
Zhangyongqi77的博客
09-20 3363
HTML基础教程
前端之HTML
m0_62697087的博客
01-16 782
HTML语法规范 1.HTML标签是由尖括号包围的关键词1，例如,HTML标签通常是成对出现的，例如和,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊标签必须是单个标签（极少情况），例如br/，我们称为单标签。 2.双标签关系有两类：包含关系和并列关系 包含关系：<head> <title></title> </head> 并列关系：<head></head> <body></body&
HTML 链接
weixin_43006131的博客
10-06 265
HTML 超链接（链接） HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问...
前端网页HTML
12-08
前端网页开发代码，包含HTML和css等脚本语言。
网页前端模板html
12-27
网页前端模板，可以转化成jsp进行搭建框架，写后台代码，也可以作为前端页面学习，欢迎下载，谢谢
饿了么项目+前端页面+HTML+js+vue
12-28
一个饿了么手机页面的前端效果。 项目展示： 1. 运行 “饿了么项目” ，演示应用程序效果，演示 “点餐业务线” 整体流程。 2. 本项目参照 “饿了么官网网页版”制作，演示饿了么官网效果。饿了么网页版：...
电商网站前端页面
11-21
在电商网站的前端页面开发中，HTML（HyperText Markup Language）是构建网页内容的基础语言，它定义了网页的结构和布局。在这个项目中，我们将会深入探讨如何利用HTML来创建一个功能完备的电商网站前端。 首先，让...
java-前端页面模板
03-04
Java 前端页面模板是为开发者提供的一种基础架构，旨在简化前端开发流程，尤其适合初学者或希望快速搭建项目原型的团队。该模板没有采用复杂的前端框架，如React、Vue或Angular，而是以更轻量级的方式构建，使得理解...
html5,bootstrap实现博客系统前端页面
01-11
html5实现的博客主页面index.html，article.html,tags.html,list_xwzj.html,index_lyb.html,index_awy.html等等，包括css,amages,js等，是静态页面，拿来就可以直接用
web前端页面
07-29
html css
前端 HTML （简单了解）
qq_64121593的博客
07-30 1310
新手小白简单了解HTML~
【web前端基础 | H5】HTML简介
小赵不忙的博客
10-13 982
思维导图 一： 网页（重点） 1：什么是网站？ 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页。 常见以*.htm或.html后缀*结尾的文件，因此将其俗称为HTML文件。 2：什么是html? HTML 指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述
前端页面追加html
qq_39654482的博客
07-30 2039
$("#tab_btn_right").empty(); var html = "&lt;span class='tab_title_next'&gt;"; html += "网络类型:"; html += "&lt;/span&gt;"; for ( var i = 0; i &lt; rawData.length; i++) { if (i == 1) { ht
前端页面HTML总结
qq_30505673的博客
09-19 1196
在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能. 表单包含很多内容, 例如: 单选: radio 多选: checkbox 密码: password 文本: text 按钮: reset, submit, file 多行文本输入: textarea 下拉菜单: select option 表单( form )可以直接提交: 提交方法包含 get ...
web前端的html部分
weixin_46503355的博客
09-09 606
web前端基础 1.相关介绍 前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 以前会 Photoshop 和 Dreamweaver 就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为 Web 前端开发。前端技术包括 4 个部分：前端页面设计师、浏览器兼容、CSS、HTML“传统”技术与 Adobe AIR、Go
HTML前端
shangxianjiao的博客
03-10 1507
1 介绍 HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有 很多网页。 这些都是网页展示出来的效果。而HTML也有专业的解释 HTML(HyperText Markup Language)：超文本标记语言： 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容 如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html仿京东商城前端页面
最新发布
04-21
HTML仿京东商城前端页面是指通过使用HTML、CSS和JavaScript等前端术，模仿京东商城的页面布局和样式，现一个类似京东商城的网页界面。以下是实现HTML仿京东商城前端页面的一般步骤： 1. 页面结构设计：根据京东商城...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值