前端三大件的总结之HTML
前言
由于自己在大二上学期到大二下学期的前面两个星期，学习了前端三大件，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>
普通文字
<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>
<video id="mvplayer" controls="" muted loop controlslist="nodownload" src="https://mvwebfs.tx.kugou.com/202110302038/7034e65fdd95deab755e0a2befdf0711/KGTX/CLTX002/d49358e65630f94b262d1d9b33c95d83.mp4">
video>
综合理解：
<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>Documenttitle>
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>
表单
表格的综合运用：
<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>Documenttitle>
head>
<body>
<h1>水果列表h1>
<ul>
<li>榴莲li>
<li>香蕉li>
<li>苹果li>
<li>哈密瓜li>
<li>火龙果li>
<li>
<p>我也是一个p标签p>
li>
ul>
<h1>成绩排行榜h1>
<ol>
<li>小姐姐：100分li>
<li>小帅哥：80分li>
<li>小可爱：60分li>
ol>
<dl>
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>购物指南dd>
<dd>订单操作dd>
dl>
<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>80td>
<td>真漂亮td>
tr>
<tr>
<td>小可爱td>
<td>60分td>
<td>真可爱td>
tr>
tbody>
<tfoot>
<tr>
<td>总结td>
<td>郎才女貌td>
<td>郎才女貌td>
tr>
tfoot>
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>
tr>
tfoot>
table>
body>
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>Documenttitle>
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的综合应用：
<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>Documenttitle>
head>
<body>
<form>
昵称：<input type="text" value="" placeholder="请输入您的昵称" name="nickname"><br><br>
密码：<input type="password" placeholder="请输入您的密码"><br><br>
性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br><br>
爱好：<input type="checkbox" checked>敲代码
<input type="checkbox" >熬夜
<input type="checkbox" id="one"><label for="one">敲代码label>
<label>
<input type="checkbox" >熬夜
label>
<label>
<input type="checkbox" >熬夜
label>
<input type="checkbox">掉头发<br><br>
上传文件：<input type="file" multiple><br><br>
<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>
form>
所在城市：<select>
<option>上海option>
<option selected>北京option>
<option>广州option>
<option>深圳option>
select>
<textarea cols="100" rows="5">textarea>
<div>我是一个divdiv>
<div>我是一个divdiv>
<div>我是一个divdiv>
<span>我是一个spanspan>
<span>我是一个spanspan>
<span>我是一个spanspan>
<span>我是一个spanspan>
<header>头部header>
<nav>导航nav>
<footer>底部footer>
<aside>侧边栏aside>
<section>区块section>
<article>文章article>
<h1>真不错 <>真不错h1>
body>
html>
以上就是我自己平时会用的标签啦