本文详细介绍了前端开发的基础，包括HTML、CSS和JavaScript的主要作用。重点讲解了HTML的各种标签，如标题、段落、样式控制、媒体元素等，并探讨了class和id的区别。还提到了前端开发的历史演变和现代技术的应用，如HTML5、CSS3和JavaScript库。此外，文章还涵盖了表单元素和文件上传等交互功能。
前言
由于自己在大二上学期到大二下学期的前面两个星期，学习了前端三大件，HTML，CSS，JavaScript。但是老是会忘记，还是要写个博客来记下笔记。以便让自己对前端的技术有一个系统性的认识。
在学习html之前，本人搭配的开发工具就是vscode，自己调试浏览器是谷歌浏览器。
因为这个组合比较兼容市面上大多数组件，插件，写前端代码是比较舒服的。
谷歌浏览器yyds！！！！！！！！！！！
然后给这个前端三大件里面做一个开端
html是给页面元素进行说明的，css是给网页元素的外观和位置进行说明的。JavaScript是网页模型的定义和页面交互，js主要用来给页面元素进行交互（本人是很喜欢这个js用户交互设计的一个效果）
本篇写的是html总结的部分：
有需要就复制到vscode里面，自己运行出来看下效果
标签介绍
作为一个超文本标记语言，当然分一个单标签和一个双标签。
可以在标签后面添加class或者id
介绍一下class和id主要区别{
唯一性是只有id有，人类的身份证就是id，每个人的身份证就是唯一的。
class的类选择器以.开头，但是id是#。
一般我们使用class是用标记一类的标签属性，id是用来标记唯一一个属性。
}当然了我们在使用class和id的时候最好使用具有语义化的选择器名字，这样在写css的时候比较好根据语义化的内容进行选择。
有需要就复制到vscode里面，自己运行出来看下效果
HTML部分：
基本的框架：
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
这个是标题：
<!-- 独占一行 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
普通文字
<!-- p标签独占一行，p标签之间就是会空一行 -->
<h1>前端开发</h1>
<!-- 水平线 -->
<hr/>
<!-- 变粗的标签 -->
<strong>前端开发是创建WEB页面或Astrong等前端界面呈现给用户的过程，通过HTML，CSS及JavaScrst以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互</strong>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br> HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
<!-- 其实不怎么常用 -->
<!-- 空行 -->
<br>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
媒体标签：
<audio src="./Flyme.ogg" controls autoplay loop></audio>
<!-- controls控制器现实 loop循环播放 -->
<video id="mvplayer" controls="" muted loop controlslist="nodownload" src="https://mvwebfs.tx.kugou.com/202110302038/7034e65fdd95deab755e0a2befdf0711/KGTX/CLTX002/d49358e65630f94b262d1d9b33c95d83.mp4">
</video>
综合理解：
<!DOCTYPE html>
<!-- 告诉浏览器这个是html5的格式 -->
<html lang="en">
<!-- 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english，你的页面如果是中文页面，可将其改为
<html lang="zh"> -->
<head>
<!-- 规定 HTML 文档的字符编码为UTF-8 -->
<meta charset="UTF-8">
<!-- X-UA-Compatible是针对IE8新加的一个设置 对于多数网站来说，它是首选的兼容性模式。 用IE浏览器的内核来渲染这个网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport的概念
viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
content属性值
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
-->
<title>Document</title>
</head>
<body>
<h1>江西中医药大学招聘</h1>
<hr>
<h2>真不错的地方</h2>
<p>负责上课轻松</p>
<img src="./01.gif" alt="" width="400">
<hr>
<a href="./gequ.html">来听歌吧</a>
<a href="./shipin.html">来看视频吧</a>
</body>
</html>
表单
表格的综合运用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表 （是最常用的）-->
<h1>水果列表</h1>
<ul>
<!-- ul标签只可以包括li -->
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
<li>
<p>我也是一个p标签</p>
</li>
</ul>
<!-- 有序列表 使用频率一般般
默认可以有1234
ol标签里面只有li-->
<h1>成绩排行榜</h1>
<ol>
<li>小姐姐：100分</li>
<li>小帅哥：80分</li>
<li>小可爱：60分</li>
</ol>
<!-- 自定义列表 dl整体(只能放dt、dd标签，后面2个支持任意内容) dt标题 dd解释说明(有缩进) 只有导航底部是会用的-->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<!-- 操作就是按住alt不放
选中前面四个光标，然后shift加alt加方向键全选
然后复制 按住alt选中需要复制的东西粘贴 -->
</dl>
<!-- 表格嵌套关系：table大框架>tr行>td内容
caption大标题 th表头单元格小标题
thead头部 tbody主体 tfoot底部-->
<table border="1px solid " width="300 " height="200">
<caption>
<h3>学生成绩单</h3>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>80</td>
<td>真漂亮</td>
</tr>
<tr>
<td>小可爱</td>
<td>60分</td>
<td>真可爱</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</tfoot>
<!-- 保留左上原则 跨行rowspan 跨列colspan-->
</table>
<table border="1px solid " width="300 " height="200">
<!-- 标题 -->
<caption>
<h3>学生成绩单</h3>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>真漂亮</td>
</tr>
<tr>
<td>小可爱</td>
<td>60分</td>
<td>真可爱</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>郎才女貌</td> -->
</tr>
</tfoot>
<!-- 注意不可以跨thead,tbody,tfoot -->
</table>
</body>
</html>
表单的综合应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form>
昵称：<input type="text" placeholder="请输入昵称"><br><br>
性别：<input type="radio" name="one">男
<input type="radio" name="one">女<br><br>
生日：<input type="date"><br><br>
城市：<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br><br>
婚姻状况：<input type="radio" name="two" checked>未婚
<input type="radio" name="two">已婚
<input type="radio" name="two">保密<br><br>
兴趣爱好：<input type="checkbox" checked>抽烟
<input type="checkbox" checked>喝酒
<input type="checkbox">烫头<br><br>
个人介绍：<br><br>
<!-- 输入文本框 -->
<textarea cols="30" rows="5"></textarea>
<h2>我承诺</h2>
<ul>
<li>年满十八岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所有条款<br><br>
<input type="submit" value="免费注册">
<!-- 重置按钮 -->
<input type="reset">
</form>
</body>
</html>
input输入框
input的综合应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
昵称：<input type="text" value="" placeholder="请输入您的昵称" name="nickname"><br><br>
<!-- 后端接受的就是 name属性值等于value属性值 传到服务器里面的东西就是name属性值=value的属性值 -->
密码：<input type="password" placeholder="请输入您的密码"><br><br>
<!-- placeholder灰度显示 -->
性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br><br>
<!-- name属性值是一样的浏览器判断是为一组的，一组中只能有一个被选中的 -->
爱好：<input type="checkbox" checked>敲代码
<input type="checkbox" >熬夜
<!-- 点击文字也是可以选中的需要id和for绑定 -->
<input type="checkbox" id="one"><label for="one">敲代码</label>
<label>
<input type="checkbox" >熬夜
</label>
<label>
<input type="checkbox" >熬夜
</label>
<input type="checkbox">掉头发<br><br>
<!-- checkbox复选框 multiple多文件的选择 -->
上传文件：<input type="file" multiple><br><br>
<!-- submit提交 reset重置 按钮 需要用到form属性(框柱全部)-->
<input type="submit"><br><br>
<input type="button" value="普通按钮"><br><br>
<input type="reset"><br><br>
<input type="text" placeholder="请输入您的昵称"><br><br>
<button type="submit">button提交按钮</button>
<button type="reset">button重置按钮</button>
<!-- button默认就是提交按钮 -->
</form>
<!-- 默认选中selected -->
所在城市：<select>
<option>上海</option>
<option selected>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
<!-- 文本域标签textatra可以输入多行文本 -->
<textarea cols="100" rows="5"></textarea>
<!-- 没有语义的标签div(独占一行）和span（多个） -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<!-- 有语义的标签 -->
<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>
<h1>真不错 <>真不错</h1>
</body>
</html>
以上就是我自己平时会用的标签啦
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
