web前端知识之html

最新推荐文章于 2024-05-02 15:42:51 发布
最新推荐文章于 2024-05-02 15:42:51 发布
阅读量244 收藏 2
点赞数 1
分类专栏： 前端 文章标签： html frame 表单 前端 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monaup/article/details/84570106
版权

html


html – 超文本标记语言（hypertext markup language）

  • 决定网络的骨架

工具

HbuilderX
常用快捷键
ctrl+D :删除当前定位行
ctrl+shift+R:复制当前行到下行
ctrl+enter:将光标移动到下一行
ctrl+shift+enter:将光标定位在上一行
ctrl+shift+/:注释当前行
ctrl+R:运行或刷新当前网页

语法规范

1.开头是文档声明

<!DOCTYPE html>  <!--为html5的声明-->

2.根标签 html
3.html文件主要包含两部分

  • 头部分：主要是用来放置一些页面信息
<meta charset="utf-8">
	<!-- 页面的配置信息 -->
	<!-- 指定浏览器打开网页的编码方式 -->
<title>页面标题</title>
  • 体部分：主要来放置HTML页面内容
    在head中写的页面展示内容，浏览器往往自动将其处理到body中

4.开始标签+结束标签
5.标签不区分大小写，官方建议使用小写

基础标签

标题

<h1>标题1</h1>
<h2>标题2</h2>
……
<!-- 标题标签的数字取值范围：1-6，
其他数字时无效并以普通文本形式显示 -->

分割线

<hr/>
------------------------<!--水平分割线-->

段落

<p>段落内容</p>

字体

<font color="red" size="1" face="仿宋"></font>
<!--常用用属性颜色、字体大小和字体设置-->
<!--字体大小范围1~7-->

<b>加粗</b>
<i>斜体</i>

<!-- 包含语义标签，建议使用 -->
<strong>加粗</strong>
<em>斜体</em>

图片

<img src="图片路径" width="100px" height="200px" alt="这张图片无法加载的提示信息"></img>
<!-- 绝对路径，盘符开始 -->
<!-- 相对路径：
	./  当前路径，可省
	../ 上一级路径
	../../ 上上级路径
-->

列表

<!-- 无序列表:
常用属性:type
 -->
<ul>
	<li>列表项1</li>
	<li>列表项2</li>
</ul>
<!-- 有序列表:
常用属性：type,start -->
<ol>
	<li>列表项1</li>
	<li>列表项2</li>
</ol>

超链接

<!-- 超链接:
常用属性:
	href 链接地址，需带上HTTP协议
	target 打开方式
		-self 当前页面打开
		-blank 另起一个标签页打开页面
 -->
<a href=" https://www.baidu.com/" target="_self"></a>

表格

<!-- 表格:
常用属性:boder 边框，width，height，bgcolor，align 对齐方式
 -->
<table>
	<tr <!-- 行 -->
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
<!-- 
表格合并:colspan 跨过竖线，横向合并；rowspan 跨过横线，纵向合并
 -->
<table>
	<tr
		<td>11</td>
		<td colspan="2" rowspan="2">12</td> <!-- 合并四格-->
		<!-- 13被合并-->
		<td>14</td>
	</tr>
	<tr
		<td>21</td>
		<!-- 22,23被合并-->
		<td>24</td>
	</tr>
</table>
<!-- 另外，可嵌套表格-->

表单标签

form, input, select, button

<!-- 表单域 -->
	<form action="直接提交的地址" method="get/post">
		<!-- input属性：type  输入项类型， name  表单提交时作为参数名-->
		<!-- 隐藏域，主要用来存放页面上的id等信息 -->
		<input type="hidden" value="值" name="id(键)"/>
		<!-- 文本輸入框 -->
		用户名：<input type="text" />
		<!-- 密码框 -->
		密码：<input type="password" />
		<!-- 文件选择 -->
		靓照：<input type="file" />
		<!-- 单选框 -->
		性别：
			<input type="radio" name="sex" />男
			<input type="radio" name="sex" />女
		<!-- 多选框 -->	
		爱好：
			<input type="checkbox" />唱歌
			<input type="checkbox" />跳舞
			<input type="checkbox" />看剧
		<!-- 下拉框 -->
		籍贯:
			<select>
				<option>---请选择</option>
				<option>浙江</option>
				<option>上海</option>
				<option>江苏</option>
			</select>
		<!-- 文本域， cols列 rows行 -->
		备注：<textarea cols="40" rows="4"></textarea>
		<!-- 按钮 -->
		<button type="submit" value="提交按钮"></button>
		<button type="reset" value="重置按钮"></button>
		<button type="button" value="普通按钮"></button>
	</form>

得到效果：
在这里插入图片描述
**get和post的区别**
get 默认提交方式，会将参数拼接在连接后面，有大小限制，4k
post 会将参数封装在请求体中，没有大小限制

html 5 新增

<form>
	<!-- 日期 -->
	生日：<input type="date" /><br/>
	<!-- 时间 -->
	闹钟：<input type="datetime-local" /><br/>
	<!-- 手机号码，手机上显示只出现数字键盘 -->
	<!-- placeholder框内显示默认的提示信息 -->
	手机号码：<input type="tel" placeholder="默认的提示信息"/><br/>
	价格：<input type="num" placeholder="只能输入数字"/>元<br/>
	<button type="submit" value="提交按钮">提交</button><br/>
</form>

得到效果：

更多标签，参见HTML 5手册

frame

静态拼接

通过frame将几个html文件的body拼接在一个页面中。
目录结构如下：
在这里插入图片描述
具体代码如下：

<!--aa.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aa</title>
	</head>
	<body bgcolor="red">
		<h1>aa</h1>
	</body>
</html>

<!--bb.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bb</title>
	</head>
	<body bgcolor="red">
		<h1>bb</h1>
	</body>
</html>

<!--cc.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cc</title>
	</head>
	<body bgcolor="yellow">
		<h1>cc</h1>
	</body>
</html>
</html>

<!--dd.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dd</title>
	</head>
	<body bgcolor="red">
		<h1>dd</h1>
	</body>
</html>

<!--main.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="10%,10%,*">
		<frame src="aa.html" >
		<frame src="bb.html" >
			<frameset cols ="30%,*">
				<frame src="cc.html">
				<frame src="dd.html">
			</frameset>
	</frameset>
</html>

得到效果：
在这里插入图片描述

跳转效果

在上述基础上，做以下改变：
1.增加dd.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dd</title>
	</head>
	<body bgcolor="blue">
		<h1>这是数据细节展示区</h1>
	</body>
</html>

2.修改main.html(给dd.html对应的frame增加name属性值)

<frame src="dd.html" name="rightFrame" >

3.修改cc.html(增加跳转超链接)

<!DOCTYPE html>
<body bgcolor="yellow">
	<h1>cc</h1>
	<!-- target指定打开方式，此处指向main.html中name="rightFrame"的frame -->
	<a href="data.html" target="rightFrame">显示细节</a>
</body>

得到效果：
在这里插入图片描述
点击 显示细节 超链接，得到：
在这里插入图片描述

块标签

div标签：默认占一行，自动换行
span标签：内容显示在同一行

心得：陌生领域总是被想得太难。最早接触html时有点蒙圈，如今再来回顾就感觉套路很明了了。不要畏惧新事物，并没有那么难。

mona789
关注
专栏目录
web前端入门知识大全：系统路线，各类要点解析
web前端入门基础进阶教程-htmlcssjs
05-14 3958
一、WEB前端是什么？ 使用HTML/CSS/JS以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开发工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口；也可以独立工作，完成强用户交互的各类应用。 二、WEB前端可以做什么？ 最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等； 目前也是移动领域首选技术：WebApp、混编App、手机游戏、微信
web前端知识概况
11-03
几年前自己总结的前端岗位所需要的技术和工具，有需要的自行下载
web前端知识
m0_58391360的博客
10-20 101
1.Web前端技术由html、css和java三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 Java基础篇 2.Java基础语法包括:变量定义、数据类型、循环、选择、内置对象等。 数据类型有stri
web前端知识1
qiaosheng blog
04-06 289
1.页面画一条横线：border: 1px solid #e1e1e1; 2.调整button按钮：border-radius:3px; 3.界面跳转到顶部：//跳转到顶部 $("#rightBackTop").click(function(){   $('html, body', window.parent.document).animate({scrollTop:"0px"}); }
Web前端基础知识
天宇龙腾的博客
02-07 501
页面作为对象----文档对象模型（Document Object Model .  DOM），现如今完全属于页面，可使用JavaScript对其进行修改 GET与POST GET的地址可以使用浏览器进行手动输入，也可以被存放在书签或快速的分享给别人。 ...
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
### HTML5及CSS3 Web前端...以上就是关于HTML5及CSS3 Web前端开发技术的一些关键知识点和习题解析。这些内容不仅涵盖了HTML5的新特性，还包括了如何利用这些特性来改善Web应用的功能性和用户体验。希望对你有所帮助！
HTML5与CSS3web前端开发技术习题答案.pdf
01-07
### HTML5与CSS3 Web前端开发技术习题...以上内容概述了HTML5与CSS3 Web前端开发技术的一些核心知识点，涵盖了从基本概念到高级特性的各个方面。希望这些信息能够帮助你更好地理解并掌握HTML5与CSS3的关键技术要点。
大学生Web前端期末静态网页设计作业html源代码
12-25
这个项目是学习Web前端开发基础的绝佳实例，让我们一起深入探讨其中蕴含的知识点。 1. **HTML**：HTML（HyperText Markup Language）是构建网页的基础，用于定义网页的结构和内容。在这个作业中，我们可以看到`...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
web前端基础知识
早睡早起长头发的博客
07-11 7140
一、网页、静态网页、动态网页 二、网页名词解释 三、Web标准 四、Web页面的组成
Web前端基础知识(一)
Ace_Arm的博客
08-07 899
HTML、XML、XHTML 有什么区别要分清三者的区别，首先我们要知道它们的概念。HTML的定义XML的定义XHTML的定义从概念上来看，我们大概能理解它们的区别，但是我们需要进一步的分析它们，就需要从代码方面来看了。 HTML的代码如下所示 XML的代码如下所示 XHTML的代码如下所示 总结：        XHTML被发明出来
Web前端基础知识整理
jinmu520的博客
08-10 839
1、 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确的嵌套顺序,只有一个根标签 标签属性的语法:属性名=”值”,写在头上,空格隔开 格式: <?xml version="1.0" encoding="UTF-8"> - 首行 <class> ... </class> - 标签 <!--
WEB前端知识总结
12-01 775
1、CSS3中设置max-width:为让图片更好适应屏幕；2、position: absolute;让元素脱离，z-index属性可以改变图片堆叠顺序3、如何让元素透明；background-color:transparent4、设置透明度：opacity: 0.5; 5、后台页面可以使用Bootstrap、JS、JQuery、Swal（弹出框）、Bootstrap时间控件、Cropper（图片裁
web前端小知识和小技巧
霸霸霸霸天虎丶的博客
09-25 591
目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义。 1.回到顶部按钮
web前端部分知识点总结
m0_72700495的博客
07-19 327
/*16pxx0.5=8px*/px用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位一般来说1em=1rem=16px。px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。...
Web前端必备基础知识点
qf2019的博客
04-14 908
1、Web中的常见攻击方式 1.SQL注入------常见的安全性问题。 解决方案：前端页面需要校验用户的输入数据（限制用户输入的类型、范围、格式、长度），不能只靠后端去校验用户数据。一来可以提高后端处理的效率，二来可以提高后端数据的安全。 后端不要动态sql语句，使用存储过程查询语句。限制用户访问数据库权限。后端接受前端的数据时要过滤一些特殊字符（如：“–”等字符） 后端如果出现异常的话，要使用自定义错误页，防止用户通过服务器默认的错误页面找到服务器漏洞。 2.XSS攻击------相对复杂的安全性问题
前端Web开发基础知识
最新发布
2301_77599154的博客
05-02 2096
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
Web前端项目开发基础性知识总结
red_apple53的博客
12-21 1589
要进行前端项目的开发，就需要具备这些基础知识，还包括Java语言基础（基本语法、逻辑控制、面向对象、集合），数据库（管理工具、数据库表列主键外键等概念、查询语句、导入导出、ER图等），SpringBoot相关知识（依赖管理、ORM、切面、DAO→service→controller开发流程）等等...总之，Spring Boot项目异常报错的处理需要综合考虑项目的实际情况和需求，灵活运用日志记录、异常处理器、自定义异常等手段，以及结合测试和监控等措施，全面提升项目的异常处理能力和稳定性。
构建Web前端全栈知识体系
"自己总结的web前端知识体系大全【欢迎补充】" 在深入探讨Web前端开发的知识体系之前，让我们首先理解这个领域所涵盖的广度。Web前端开发并不仅仅是HTML、CSS和JavaScript的组合，它是一个复杂的系统，包含了多个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值