Day11_认识前端开发

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

?!*

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

阅读量44

点赞数

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51057765/article/details/129130177

版权

一、认识前端开发

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

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

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

html - 给网页提供内容（通过不同的标签给网页提供不同的内容）
css - （css是选择器） - 设置网页内容的样式和布局
js - 让网页内容变化

二、 html常用标签

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

标签 - html核心元素

网页基本结构

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

标签的分类

1)双标签：<标签名属性名1=属性值1 属性名2=属性值2 ···>标签内容</标签名>
2)单标签：<标签名属性名1=属性值1 属性名2=属性值2 ···>或者<标签名属性名1=属性值1 属性名2=属性值2 ···/>

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

<!DOCTYPE html>

<html>
	<head>
		<!-- 和网页有关的设置都在这里面，charset="utf-8"设置文本编码方式，防止乱码 -->
		<meta charset="utf-8">
		
		<!-- 设置网页标题 -->
		<title>百度一下，你就知道</title>
		
		<!-- 设置网页图标 -->
		<link rel="icon" href="img/car.jpg">
	</head>
    
	<body id="b1">
		<!-- 1.标题：h1~h6 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		
		<!-- 2.段落标签：p -->
		<!-- 注意：html代码中的换行和空格无效 
		<br> - 换行标签
		空格 - &nbsp；（空一个像素）&emsp；（一个tab键）
		-->
		<p>中国专业IT社区CSDN (Chinese Software Developer Network) 
		创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
		</p>
		<p> 窗前明月光</p>
		
		<!-- 3.行内文字标签：span ，使下面span标签显示在同一行-->
		<span>新华网</span>
		<span>|</span>
		<span>2023-02-20 11:40</span>
		
		<!-- 4.特殊效果文字标签：b、i
		 文字加粗标签：b
		 文字倾斜标签：i
		 -->
		 <i>pyhton</i>
		 <b>python</b>
		 <p>应美方请求，<b>中共中央政治局委员、</b>中央外事工作委员会办公室主任王毅出席<b><i>慕尼黑</i></b>安全会议期间，
		 <i>同美国国务卿布林肯非正式接触。</i>
		 </p>
		 
		 <!-- 7.图片标签：img 
		 src属性：图片地址，决定网页上到底显示哪张图
		 title属性：设置图片标题（鼠标悬停在图片上的时候才显示）
		 -->
		 <img src="img/car.jpg" title="汽车" alt="">
		
		 <img src="https://inews.gtimg.com/newsapp_bt/0/14297516724/641">
		 <img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
		 <!-- 6.超链接：a 
			1)标签内容：超链接可见可点击的部分
			2）href属性：跳转地址
			3）target属性：打开地址，self（默认，在当前窗口中打开新的页面）、_blank（在新的窗口中打开新的页面）
		 -->
		 <!-- 文字超链接 -->
		 <a href="https://news.baidu.com/" target="_blank">新闻</a>
		 
		 <!-- 图片超链接 -->
		 <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc" target="_blank">
			 <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
		 </a>
		 
		 
		 
	</body>
</html>

三、 input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- input会因为type属性值的不同表现出不同的功能 -->
		<!-- 1.text：普通的文本输入框
			1）placeholder属性：输入中默认显示的输入提示信息
			2)value属性：输入框输入的内容
			3)maxlength属性：最大输入字符的个数
		 -->
		<input type="text" placeholder="请输入手机号" value="" maxlength="16">
		<br><br>
		
		<!-- 2.password：密码输入框 
			1）placeholder属性：输入中默认显示的输入提示信息
			2)value属性：输入框输入的内容
			3)maxlength属性：最大输入字符的个数
		-->
		<input type="password" placeholder="密码" value="" maxlength="">
		<br><br>
		<form action="">
		<!-- 3. radio:单选按钮
			1)name属性：同一组选项对应的单选按钮的name属性值必须一致
			2)checked属性：添加checked属性的选项默认处于选中状态
		-->
		<input type="radio" name="gender" id="g1"><label for="g1">男</label>
		<input type="radio" name="gender" id="g2" checked><label for="g2">女</label>
		<input type="radio" name="gender"><span>保密</span>
		<br><br>
		<input type="radio" name="m"><span>已婚</span>
		<input type="radio" name="m" checked><span>未婚</span>
		<br><br>
		
		<!-- 4.checkbox:复选按钮
		 
		 -->
		<input type="checkbox" id="l1" name="la"><label for="l1">Python</label>
		<input type="checkbox" id="l2" name="la"><label for="l2">Java</label>
		<input type="checkbox" id="l3" name="la"><label for="l3">C</label>
		<input type="checkbox" id="l4" name="la"><label for="l4">Go</label>
		<br>
		<!-- 5.其他情况 -->
		<input type="color">
		<input type="date">
		<input type="datetime-local">
		<input type="file">
		<input type="tel">
		
		<input type="reset" name="" id="">
		</form>
	</body>
</html>

四、其他常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- [] -->
		<!-- 1.下拉菜单（下拉列表）：select、option -->
		<select name="" id="">
			<option value="四川省">四川省</option>
			<option value="河北省">河北省</option>
			<option value="云南省">云南省</option>
		</select>
		
		<select name="" id="">
			<optgroup label="四川省">
				<option value="">成都市</option>
				<option value="">内江市</option>
				<option value="">绵阳市</option>
			</optgroup>
			
			<optgroup label="广东省">
				<option value="">广州市</option>
				<option value="">东莞市</option>
				<option value="">佛山市</option>
			</optgroup>
			
		</select>
		
		<!-- 2.有序列表：ol、li -->
		<p>编程语言排行榜:</p>
		<ol>
			<li>
				<p>Python</p>
				<img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips2.baidu.com%2Fit%2Fu%3D989292470%2C174743763%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D58A83C7281E17903367C595D0300D0E0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1676998800&t=411a1c00d99a38b0949a8dd6c2faff6f" alt="">
				<p></p>
			</li>
			<li>
				<p>Java</p>
			</li>
			<li>
				<p>C</p>
			</li>
			<li>
				<p>C++</p>
			</li>
			<li>
				<p>JavaScript</p>
			</li>
			<li>
				<p>C#</p>
			</li>
		</ol>
		<!-- 3.无序列表 :ul、li-->
		<p>千锋成都校区所有学科</p>
		<ul>
			<li>Java</li>
			<li>Python</li>
			
		</ul>
		<div>
			<div></div>
		</div>
		<button>确认</button>
		
	</body>
</html>