day11-认识前端开发

最新推荐文章于 2024-08-06 18:58:51 发布

MbNexTime11

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量76

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45609321/article/details/129130231

版权

本文介绍了前端开发的基本概念，包括数据采集（爬虫）和网页内容的创建与交互。重点讲解了前端的三大核心技术：HTML用于提供网页内容，CSS用于设置样式和布局，JS则实现动态效果。此外，还详细阐述了HTML的各种标签，如标题、段落、图片、超链接及表单元素等，为初学者提供了全面的基础知识。

摘要由CSDN通过智能技术生成

day11-认识前端开发

01认识前端开发

0.什么是爬虫？ - 数据采集（获取互联网产品页面上公开的数据）

1.认识前端开发 - 写界面的（数据展示\用户交互）

2.前端三大核心技术：html、css、js

1）html - 给网页提供内容（通过不同的标签给网页提供不同的内容）

2）css - 设置网页内容的样式和布局

3）js - 让网页内容变化

02HTML常用标签

html是用来给网页提供内容（不同的标签提供不同的内容）

1.标签 - html核心元素

2.网页基本结构
一个html文件就是一个网页
1）DOCTYPE - html版本说明
2）整个网页对应的是html标签，html标签中有一个head标签（代表网页头部）和body标签（代表网页部分内容）

3.标签的分类
1）双标签：<标签名属性名1=属性值1 属性名2=属性值2 …></标签名>
2）单标签：<标签名属性名1=属性值1 属性名2=属性值2 …>或者<标签名属性名1=属性值1 属性名2=属性值2 …/>

html版本说明，html - 最新版本html5

	<!-- 设置网页标签 -->
	<title>百度一下，你就知道</title>
	
	<!-- 设置网页图标 -->
	<link rel="icon" href="img/icon_百度.jpg">
</head>

<body id='b1'>
	<!-- 1.标题：h1 ~ h6 -->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h1> 秃驴教授中学演讲, 鼓励学生和美国人"杂交", 牛逼少年上台抽丫脸!</h1>
	
	<!-- 2.段落标签：p -->
	<!-- 注意：html代码中的换行和空格无效
	     换行标签	-	换行标签<br>
		 空格	-	&nbsp;&emsp;
	 -->
	<p>
		&emsp;&emsp;床前明月光，<br>
		&emsp;&emsp;疑是地上霜。<br>
		&emsp;&emsp;举头望明月，<br />
		&emsp;&emsp;低头思故乡。<br />
	</p>
	<p>此后如竟没有炬火，他便是唯一的光。</p>
	<!-- 3.行内文字标签：span -->
	<span>阅读 2.6万</span>
	<span>|</span>
	<span>猿猿球鞋视角</span>
	
	<!-- 4.特殊效果文字标签：b、i
		文字加粗标签：b
		文字倾斜标签：i
	 -->
	 <b>python</b>
	 <i>python</i>
	 <p><b>“为中华之崛起而读书”</b>，“为中华民族伟大复兴而读书”，这就是我们的年轻一代，这就是觉醒的一代！</p>
	 
	 <!-- 5.图片标签：img
	 src属性：图片地址（决定网页上到底显示哪张图）
	 title属性:设置图片标题（鼠标悬停在图片上的时候才显示）
	 -->
	 <img title ="百度" src="img/百度.jpg"/>
	 <br>
	 <img title = "一人之下" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201908%2F11%2F20190811122844_urJfH.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1679468568&t=b59e54451312c241c34abf62f4b45dc0"/>
	 <!-- 6.超链接：a 
		1）标签内容：超链接可见可点击的部分
		2）href属性：跳转地址
		3）target属性：打开方式，_self（默认，在当前窗口中打开新的页面），_blank（在新的窗口中打开页面）
		-->
	<!-- 文字超链接 -->
	 <a href="https://www.baidu.com/" target ="_blank">百度</a>
	 <!-- 图片超链接 -->
	 <a target="_blank" href="https://www.baidu.com/">
		<img src ="img/百度.jpg">
	 </a>
	 
</body>

03input标签

	 -->
	<form>
	<input type="text" placeholder="请输入手机号" value="110" maxlength="6">
	<br><br>
	
	<!-- 2.password：密码输入框
	 1）placeholder属性：输入中默认显示的输入提示信息
	 2）value属性：输入中输入的内容
	 3）maxlength属性：最大输入字符的个数
	 -->
	<input type="password" placeholder="密码" value="123456">
	<br><br>
	<!-- 3.radio：单选按钮
		1）name属性：同一组选项对应的单选按钮的name属性值必须一致
		2）checked属性：添加checked的选项默认处于选中状态
	 -->
	<input type="radio" name="gander"id="g1"><label for="g1">男</label>
	<input type="radio" name="gander"id="g2" checked><label for="g2">女</label>
	<input type="radio" name="gander"><span>保密</span>
	<br><br>
	<input type="radio" name="m"><span>已婚</span>
	<input type="radio" name="m" checked><span>未婚</span>
	
	<!-- 4.checkbox:复选按钮
	 
	 -->
	 <input type="checkbox" name="la" checked><label for ="">Python</label>
	 <input type="checkbox"><label for ="">Java</label>
	 <input type="checkbox"><label for ="">C</label>
	 <input type="checkbox"><label for ="">C#</label>
	 <input type="checkbox"><label for ="">Go</label>
	 <input type="checkbox" id "l6"><label for ="l6">JavaScript</label>
	 
	 <!-- 5.其他情况 -->
	 <input type="color">
	 <input type="time"/>
	 <input type="datetime-local"/>
	 <input type="file"/>
	 <input type="tel"/>
	 <input type="reset" name="" id="">
	 </form>
</body>

04其他常用标签

四川省河北省广东省山东省

	<select name="" id="">
		<optgroup label="四川省">
			<option value="">成都市</option>
			<option value="">绵阳市</option>
			<option value="">德阳市</option>
			<option value="">简阳市</option>
			<option value="">眉山市</option>
			<option value="">乐山市</option>
			<option value="">达州市</option>
		</optgroup>
		
		<optgroup label="广东省">
			<option value="">广州市</option>
			<option value="">东莞市</option>
			<option value="">深圳市</option>
			<option value="">佛山市</option>
		</optgroup>
		
	</select>
	
	<!-- 2.有序列表： ol、li-->
	<p>编程语言排行榜：</p>
	<ol>
		<li>
			<p>Python</p>
			<img src="https://img2.baidu.com/it/u=1966554570,3118150467&fm=253&fmt=auto&app=138&f=PNG?w=601&h=374" alt="">
			<p>Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构，还能简单有效地面向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应...</p>
		</li>
		
		<li>
			<p>Java</p>
			<img src="https://img2.baidu.com/it/u=3614450918,293031879&fm=253&fmt=auto&app=138&f=JPEG?w=484&h=300" alt="">
			<p>Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语...</p>
		</li>
		<li>C</li>
		<li>C++</li>
		<li>JavaScript</li>
		<li>C#</li>
	</ol>
	
	<!-- 3.无序列表：ul、li -->
	<p>千锋成都校区所有学科</p>
	<ul>
		<li>Python数据分析</li>
		<li>Java后端开发</li>
		<li>大前端</li>
		<li>UI、UE设计</li>
		<li>物联网</li>
	</ul>
	
	<!-- 4. -->
	<p>千锋成都校区所有学科</p>
	<div>
		<div>Python数据分析</div>
		<div>Java后端开发</div>
		<div>大前端</div>
	</div>
	
	<button>确定</button>
	<button>登录</button>
</body>