【总结】认识前端开发

Day11- 认识前端开发

1. 认识前端

爬虫:数据采集(获取互联网产品公开数据)

1.1 认识前端开发 - 写界面(数据展示、用户交互)

1.2 前端三大核心技术:html、css、js
1)html:给网页提供内容
2)css:设置网页内容的样式和布局
3)js:让网页内容变化

2. 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 …/>

DOCTYPE html>
<html>
	<head>
		
		<meta charset="utf-8">
		
		
		<title>百度一下,你就知道title>
		
		
		<link rel="icon" href="img/baidu.png">
	head>
	<body>
		
		<h1>一级标题h1>
		<h2>二级标题h2>
		<h3>三级标题h3>
		<h4>四级标题h4>
		<h5>五级标题h5>
		<h6>六级标题h6>
		
		
		
		<p>几乎每一个最终有利于上海海港的判罚,
		都会引发“受害球队”球迷的不满,
		除了对当值主裁判口诛笔伐之外,
		另一个被口诛笔伐的是陈戌源。p>
		<p>
			床前明月光,<br>
			凝视地上霜,<br>
			举头望明月,<br>
			低头思故乡
		p>
		
		
		<span>2023-02-20 9:20 span>
		<span>|span>
		<span>界面新闻官方账号span>
		
		
		<p>
			 实际上,陈戌源和足协方面的人士也并非没有反应,
			 一次一名裁判负责人就大骂裁判:
			 <b>“你们这么干,就是把陈主席往死里坑!”b><i>在2021和2022赛季i>,
			 单单就联赛而言,海港队也没有引发太多的争议判罚,
			 包括关键的足协杯决赛裁判也是秉公执法,期间陈戌源因为上海海港所背负的骂名一度有所减少了,
			 但<b><i>无法根本性解决。i>b>
		p>
		 
		 
		<img src="img/孔明灯.jpeg" title="孔明灯" >
		<br>
		<img title="小猫咪" alt="加载失败" src="https://img2.baidu.com/it/u=2259120226,2703290105&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" >
		 
		
		
		<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%A8%DF%E4%CD%BC&fr=ala&ala=1&alatpl=normal&pos=0&dyTabStr=MCwzLDIsMSw2LDQsNSw4LDcsOQ%3D%3D" target="_blank">猫咪a>
		<br>
		
		<a target="_blank" href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%A8%DF%E4%CD%BC&fr=ala&ala=1&alatpl=normal&pos=0&dyTabStr=MCwzLDIsMSw2LDQsNSw4LDcsOQ%3D%3D">
			<img src="img/baidu.png" >
		a>	
	body>
html>
	## 3. 标签		
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		
		
		<input type="text" placeholder="手机号" value="110" maxlength="6">
		<br><br>
		
			
		<input type="password" placeholder="密码" value="123456">
		<br><br>
		
		
		<form >
			
		
		<input type="radio" name="genger" id="g1"><label for="g1">label>
		<input type="radio" name="genger" checked><span>span>
		<input type="radio" name="genger"><span>保密span>
		<br><br>
		<input type="radio" name="m">已婚
		<input type="radio" name="m">未婚
		
		
		<br><br>
		<input type="checkbox" name="la" checked><label>pythonlabel>
		<input type="checkbox" name="la" ><label>Clabel>
		<input type="checkbox" name="la" ><label>Javalabel>
		<input type="checkbox" name="la" ><label>C#label>
		<input type="checkbox" name="la" ><label>Golabel>
		<input type="checkbox" name="la" ><label>JavaScriplabel>
		<br><br>
		
		
		<input type="color">
		<input type="date">
		<input type="datetime-local">
		<input type="file">
		
		<input type="reset">
		form>
	
	
	body>
html>

4.其他标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		
		<select>
			<option value ="四川省">四川省option>
			<option value ="河北省">河北省option>
			<option value ="广东省">广东省option>
			<option value ="山东省">山东省option>
		select>
		
		<select name="">
			<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>
		
		
		<p>编程语言排行榜p>
		<ol>
			<li>
				<p>Pythonp>
				<img src="img/Python.png" >
				<p>Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计,作为一门叫做ABC语言的替代品。p>
			li>
			<li>
				<p>Javap>
				<img src="img/Java.png" >
				<p>
					Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,
					还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。
					Java语言作为静态面向对象编程语言的代表,
					极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程
				p>
			li>
			<li>Cli>
			<li>C++li>
			<li>JavaScripeli>
			<li>C#li>
		ol>
		
		
		
		
		<p>千峰成都校区所有学科p>
		<ul>
			<li>python数据分析li>
			<li>java后端开发li>
			<li>大前端li>
			<li>UI、UE设计li>
			<li>物联网li>
		ul>
		
		
		<p>千峰成都校区所有学科p>
		<div>python数据分析div>
		<div >java后端开发div>
			
		<button >确定button>
	body>
html>


你可能感兴趣的:(html5,前端)