快速入门前端基础技能·HTML+CSS+JS。只有基础扎实，才能驾驭新技术。

2024-03-20 01:17:22 阅读 0

爬行动物系列：

实操续：HTML基本结构、数据来源、网页获取

上次写了一篇关于爬取HTML的文章，很多朋友告诉我，看完文章后还是不太明白。

想了想，我只讲了数据是从哪里获取的，没有讲数据是如何生成的，有点难以理解。今天就来带大家梳理一下整个前端知识。

前端基础知识

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用

HTML 基础知识

· HTML：超文本标记语言（英文：，缩写为：HTML）是一种用于创建网页的标准标记语言。

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

1.HTML基本标签/结构


	<body>
		我的第一个标题
		我的第一个段落。
		我是链接。

2.关联标签

·床单

至此，我开始接触HTML层次关系。 td必须写成tr。


	<body>
		
			
				
					
						第一行第一列
					
					
						第一行第二列
					
				
				
					
						第二行第一列
					
					
						第二行第二列

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用

·列表·省略，表的层次关系就明白了，这个也容易理解。

3.表格形式

·表单为HTML（不依赖js）进行服务器交互！！！

·基本格式：


  
  First name: 
  Last name:

·输入标签，vlue为默认值，name为提交名称，type为类型，有以下几种：

文件

图像

收音机

重置

文本

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用

CSS样式

·CSS指层叠样式表（Style）

·样式定义 HTML 元素的显示方式。

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

1. 样式表参考

·外部参考

使用链接标签，建议写在中

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

·内部参考文献

使用style标签并写在head标签中

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

·内含引文

在标签内，使用 style 属性。

2. 样式表

·常见的

上面简单演示了边框效果。内容太多，就不展开演示了。

html中onclick不好用_好用中性笔推荐_好用中性笔推荐学生党

·标签链接

这是偏向CSS3标准的。对于非前端工作，了解一下就可以了。

html中onclick不好用_好用中性笔推荐学生党_好用中性笔推荐

·3.边界类

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

该模块用于解决页面布局和变形问题。

好用中性笔推荐_html中onclick不好用_好用中性笔推荐学生党

··调试方法

在F12开发者模式下，检查每个边距值并进行调整。这里我们可以清楚地看到它没有指定长度。

3. 选择器

·选择器的作用是将引用的样式表与标签关联起来。

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用


	
		<link rel="stylesheet" type="text/css" href="theme.css">
		<style>
			span{
				background:blue;
			}
			#id1{
				color:red;
			}
			.class1{
				color:green;
			}
		</style>
	
	<body>
		
			id选择器
			
				span标签
			
		
		

		
			class选择器
			
				span标签

html中onclick不好用_好用中性笔推荐_好用中性笔推荐学生党

第一个跨度是元素选择器

背景颜色变成蓝色

对于第二个 id 选择器，字体颜色更改为红色。

CSS中用“#”符号表示

使用 id 获取 HTML 中的值

匹配一下就可以了

第三类选择器

用“.”表示。在CSS中

使用类获取 HTML 中的值

新手掌握这3个就够了，想要成为前端高手还需要不断尝试。

能够动态更改 HTML 内容。

效果演示：

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用

知识点总结：

好用中性笔推荐_好用中性笔推荐学生党_html中onclick不好用

基本语法

·与大多数编程语言类似。

var i=0;
var str="";
var arr=[];
var obj={};
if (prompt("请输入")==1){
	alert(1);
}

DOM

·获取dom

三种获取方式

·操作dom

可以更改样式、添加节点等。

·绑定事件

您可以在 HTML 标签中添加调用，

也可以将其绑定在dom对象中

var =.("").ο=(){}

好用中性笔推荐学生党_好用中性笔推荐_html中onclick不好用

之前效果图的源代码。


	
	
	


 1
 2
 3

 <script>
	function change(){
		var container=document.getElementById("container");
		if(container.style.color=='blue'){
			container.style.color='green';
		}else{
			container.style.color='blue';
		}
	}
	 function add(){
		var container=document.getElementById("container");
		var p = document.createElement('p');
		p.innerHTML="p";
		container.appendChild(p);
	 }
	 function rom(){
		var container=document.getElementsByTagName("p");
		container[container.length-1].remove();
	 }
	 
 </script>

框架

该库为 Web 脚本提供了一个通用抽象层，使其适用于几乎任何编程情况。由于它很容易扩展，并且不断发布新的插件来增强其功能，因此不可能在此涵盖其所有可能的用途和功能。

Vue（发音为 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue 被设计为自下而上逐层应用。 Vue的核心库只关注视图层，不仅易于上手，而且易于与第三方库或现有项目集成。

结论

对于每个人来说，并不需要什么都知道才能完成指定的工作内容。同时，如果没有明确的规划和对工作方向的具体了解，一路上也会有很多坎坷和碰伤。

幸运的是，路上有很多新奇有趣的事情，所以加油吧！

随附的：

我用浏览器做了一个3D旋转相册，学姐说好漂亮。

本文使用文章同步助手进行同步

上一篇： Java你需要了解的基础知识点（一）面向对象的三大特点

下一篇：本文带你从零开始玩转mysql触发器 | 超级有用的信息，建议收藏

标签： html语言