[前端与HTML| 青训营笔记]

凉冰不加冰
65 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第1天

结合课程及所学知识谈谈我对前端的理解，在此拿后端的理解作对比以便更好地理解

前端：即网页上为用户呈现的部分，用户可以接触到

后端：与数据库交互的部分，完成数据存取（后端查找数据，返回给前端）

那么前端的组成主要有哪些呢？

HTML：定义网页的内容

CSS：规定网页的布局

JavaScript（简称“JS”）：对网页行为进行编程

又有哪些要学习的技术呢？

jQuery、网络、CSS3、H5、es6、webpack4.0、git、小程序、升级模式、VUE、VUEX、VUE源码、React、Node.js、MongoDB数据库等。

开发工具推荐

1. Sublime Text（初学使用：轻量、快捷、简单、易上手）

2. Visual Studio Code（支持系统多、开发效率快、打开速度慢）

前端的知识体系庞大，需要学习的东西很多，不是一时半会可以掌握的，所以我们需要慢慢的去探索吸纳它，这其中最重要的是坚持。接下来开始前端的第一步吧HTML--揭开前端的面纱 HTML主要用于页面的骨架编写，注意，只是骨架而已，不要妄想只用它就创造一个精彩的页面，但是骨架毕竟是页面的核心内容，需要牢牢掌握。下面是它的一些介绍

HTML 指的是超文本标记语言: HyperText Markup Language，它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页，HTML文档也叫做 web 页面

例如：

image.png

实战部分：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>html</title>
	</head>
	<body>
		<h4><p>Hello World! </p></h4>

		<h4>1.字体格式</h4>
		<div><span><strong>加粗</strong></span><span><em>倾斜</em></span></div>
		<ins>下划线</ins><del>删除线</del>

		<h4>2.图片</h4>
		<img src="image/彭于晏.jpeg"  title="就是我" width="100" height="100" border="12" />
		<img decoding="async" src="/images/logo.png" alt="无法显示" width="258" height="39" />
		
		<h4>3.超链接</h4>
		<a href="https://www.runoob.com" target="_self">点击进入runoob</a>
		<a href="image/彭于晏.jpeg">下载文件</a>
		<a href="#">空链接</a>
		<a href="#show">游戏介绍</a>
		<h5 id="show">介绍</h5>
		
		<h4>4.注释和特殊字符</h4>
		&lt;!-- --&gt;是注释，其余用到时查表即可<br\>
		
		<h4>5.表格</h4>
		<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="50">
			<thead>				
				</ehead><tr><th>玩家</th><th>成绩</th><th>留言</th></tr>
			</thead>
			<tbody>
				<!-- 表格合并 -->
				<tr><td>1号</td><td>100</td><td rowspan="2">我给你挡风</td></tr>
				<tr><td>2号</td><td>100</td>
			</tbody>			
		</table>
		
		<h4>6.列表</h4>
			<!-- 无序列表 -->
			<ul>
				<li>开始游戏</li>
				<li>作者介绍</li>
			</ul>
			<!-- 有序列表 -->
			<ol>
				<li>关卡1</li>
				<li>关卡2</li>
			</ol>
			<!-- 自定义列表 -->
			<dl>
				<dt>武器</dt>
				<dd>刀</dd>
				<dd>剑</dd>
			</dl>
			
			<h4>7.表单</h4>
			<form action="xxx.php" method="get">
				<label for="账号">登录账号：</label><input type="text" id="账号" value="请输入您的账号" maxlength="20">	<br>
				<label for="密码">登录密码：</label><input type="password" id="密码">	<input type="button" value="获取短信验证码"><br>
				记住密码<input type="radio" name="rem">自动登录<input type="radio" name="rem">	<br>
				选择携带：武器<input type="checkbox">鞋子<input type="checkbox" checked="checked">	<br>
				<input type="submit" value="登录"><input type="reset" value="重置">	<br>
				上传头像：<input type="file">	<br>
				购买武器：
				<select>				
					<option>破魔刀</option>
					<option selected="">绯红</option>
				</select>
			</form>
			<textarea cols="50" rows="5">请留下您的反馈：</textarea>
	</body>	
		</html>
avatar
文章
阅读
粉丝