快速上手之前端基本功·HTML+CSS+JS，基础牢固，新技术才能得心应手

本文链接：https://blog.csdn.net/junior5/article/details/120185559

爬虫系列：

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

上次写了一篇爬虫HTML的文章，很多小伙伴和我说，看完文章还是不太懂。
我想了想，只讲了数据在哪获取，不讲数据怎么产生的，是有点不好理解。
今天就来，带大家一起把整个前端知识进行一次梳理。

前端基础知识

在这里插入图片描述

HTML基础

·HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
在这里插入图片描述

1.HTML基本标签/结构

<html>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落。</p>
		<a href='#'>我是链接。</a>
		<img src='http://m.imeitou.com/uploads/allimg/2017092012/xtdpb1iua1f.png' />
	</body>
</html>

在这里插入图片描述

2.关联标签

·表格
到这里，才开始接触HTML层级关系，td必须写在tr里面才可以

<html>
	<body>
		<table style="border:1px  solid red;">
			<tbody>
				<tr>
					<td style="border:1px  solid red;" >
						第一行第一列
					</td>
					<td style="border:1px  solid red;">
						第一行第二列
					</td>
				</tr>
				<tr>
					<td style="border:1px  solid red;">
						第二行第一列
					</td>
					<td style="border:1px  solid red;">
						第二行第二列
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

·列表
·略，表格层级关系弄懂了，这个也很容易理解。

3.form表单

·form表单是HTML（不依靠js）做服务器做交互的！！！

·基本格式：

<form action="form_action.asp" method="get">
  <!-- action 访问/提交的网页
     Method 提交方法
 -->
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="提交" />
</form>

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

button
checkbox
file
hidden
image
password
radio
reset
submit
text
在这里插入图片描述

css样式

·CSS 指层叠样式表 (Cascading Style Sheets)
·样式定义如何显示 HTML 元素。
在这里插入图片描述

1.样式表引用

·外部引用
使用link标签，建议写在头部里面
在这里插入图片描述

·内部引用
使用style标签，写在头部标签里面
在这里插入图片描述

·内敛引用
在标签内部，使用style属性。
在这里插入图片描述

2.样式表

·常用的
上面简单演示了边框效果，内容太多，就不进行展开演示了。
在这里插入图片描述

·a标签链接
这里就偏向于css3标准了，非前端工作，了解一下就可以了。
在这里插入图片描述

·3.边框类

在这里插入图片描述

这个模块，用来解决页面布局和变形的问题。
在这里插入图片描述

··调试方法
F12开发者模式里面，查看每个边距值，在进行调整。
这里我们可以很清楚的看到，它没有指定长度。

在这里插入图片描述

3.选择器

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

在这里插入图片描述

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

在这里插入图片描述

第一个span是元素选择器
背景色变成蓝色了
第二个id选择器，字体颜色变成红色了。
CSS中用“#”号表示
HTML中用id取值
对应上就可以了
第三个class选择器
CSS中用“.”号表示
HTML中用class取值
新手掌握这3中已经够用了，想成为前端大牛，需要自己不断尝试。

JavaScript

JavaScript 能够动态改变 HTML 内容。
效果演示：
在这里插入图片描述
知识点整理：

基础语法

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

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

DOM

·获取dom
三种获取方式
·操作dom
可以改变样式，添加节点，等等
·绑定事件
可以在HTML标签添加function调用，
也可以在dom对象中绑定
var container=document.getElementById(“container”).οnclick=function(){}
在这里插入图片描述

前面效果图源码。

<div id="div-input">
	<button onclick=change()>
		变色
	</button>
	<button onclick=add()>
		添加
	</button>
	<button onclick=rom()>
		删除
	</button>
</div>
<div id="container">
 <p>1</p>
 <p>2</p>
 <p>3</p>
</div>
 <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>