html
html是啥
HTML 指的是超文本标记语言 (Hyper Text Markup Language)， 是用来描述网页的一种语言，超文本就是不止于文本，还有图片音乐等等，标记就是标记标签，语言吗就是一种语言。
创建文件
创建一个扩展名为xxxx.html或者xxx.htm文件
标签
在写html之前，我们要先知道什么是html标签,又叫html元素，下面这样完整的结构就叫标签或者元素
属性
还有一个概念叫属性，是对标签的附加信息
基础结构
我们先写一个最基础的html文件。
<!DOCTYPE html>
<!-- <!DOCTYPE html> 声明为 HTML5 文档 -->
<html lang="en">
<!-- <html> 元素是 HTML 页面的根元素 -->
<head>
<!-- <head> 元素包含了文档的元（meta）数据 -->
<meta charset="UTF-8">
<!-- <meta charset="utf-8">定义网页编码格式为 utf-8 -->
<title>Document</title>
<!-- <title> 元素描述了文档的标题 -->
</head>
<body>
<!-- <body> 元素包含了可见的页面内容 -->
我全都
</body>
</html>
用浏览器打开显示结果就是这样啦
常用标签
h1~h6 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
</body>
</html>
显示结果
p 段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>少年自有少年狂，心似骄阳万丈芒</p>
</body>
</html>
显示效果
br 换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>岁月静好，浅笑安然。打开记忆的闸门，仿佛又回到了那年那月那时光，仿佛又见到你送给我的那盆清香茉, <br /> 莉，在细雨潇潇的夜晚，所呈现出来的洁净和楚楚动人。以前的过往总是在记忆深处，以固有的姿态，以从 <br /> 未稍离的执着提醒我，生命中有一种存在，叫以前。</p>
</body>
</html>
细节决定成败，学到br各位发现这和之前的标签不一样，没错是一个单标签，有多少人和他一样形单影只，之前的叫双标签，单标签只能自闭合。
文本格式化
这一类标签很多，自己可以去看看，我就弄几个常用的看看
<pre>
<strong> 汉皇重色思倾国，御宇多年求不得。</strong>
<small>杨家有女初长成，养在深闺人未识。</small>
<sub>天生丽质难自弃，一朝选在君王侧。</sub>
<sup>天生丽质难自弃，一朝选在君王侧。</sup>
<del>回眸一笑百媚生，六宫粉黛无颜色。</del>
<i>春寒赐浴华清池，温泉水滑洗凝脂。</i>
</pre>
img图像标签
<img src="./laopo.jpg" alt="不忘的老婆">
欢迎各位看我老婆，这里就用到属性了，其中alt表示图片没有加载成功显示的文字，src是图片的位置，src的属性值是一个路径，这里有一个概念就是路径
路径
路径有绝对路径和相对路径之分
我老婆图片的绝对路径：C:\Users\Administrator\Desktop\dome\test\laopo.jpg
相对路径就要相对你引用的路径位置
如图所示我文件结构
我要看老婆1路径为 ../laopo1.jpg
我要看老婆2路径为 ./laopo2.jpg
我要看老婆3路径为 ./first/laopo3.jpg
列表
无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
自定义列表
<dl>
<dt>阿拉伯数字</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt>中文数字</dt>
<dd>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
表格
<table border="1">
<!-- border设置边宽为1 -->
<caption>表格标题</caption>
<thead>
<tr>
<th>水果</th>
<th>蔬菜</th>
<th>肉</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>青菜</td>
<td>猪肉</td>
</tr>
<tr>
<td>草莓</td>
<td>白菜</td>
<td>牛肉</td>
</tr>
</tbody>
</table>
表单
表单涉及提交数据到后端，我这给各位就看页面效果，就不涉及了，如有兴趣，自己学习
<form>
输入表单：<input type="text">
<br />
<!-- 基础表单 -->
<label for="title">输入表单1：</label>
<input type="text" id="title">
<br />
<!-- 点击文字可以选择表单 -->
<label>
输入表单2：<input type="text">
</label>
<br />
<!-- lable的第二种方式 -->
输入表单3：<input type="text" required>
<br />
<!-- require必填 -->
输入表单4：<input type="text" placeholder='请输入数字'>
<br />
<!-- placeholder提示 -->
输入表单5：<input type="text" value="老王" />
<br />
<!-- value默认值 -->
输入表单6：<input type="text" value="只能看" readonly>
<br />
<!-- readonly只能看 -->
输入表单7：<input type="text" disabled value='只能看，发送都发送不了'>
<br />
<!-- disabled只能看，发送都发送不了 -->
输入表单8：<input type="text" autocapitalize="on">
<br />
<!-- 查看历史 -->
密码：<input type="password">
<br />
<!-- 密码框 -->
邮箱：<input type="email">
<br />
<!-- 只能输入邮箱 -->
网络地址：<input type="url">
<br />
<!-- 只能输入网络地址 -->
电话：<input type="tel">
<br />
<!-- 只能输入电话 -->
数字：<input type="number">
<br>
<!-- 只能输入数字 -->
隐藏：<input type="hidden">
<br />
<!-- 会隐藏起来 -->
文本域： <textarea cols="30" rows="10">默认值</textarea>
<br />
下来列表：<select>
<optgroup label='阿拉伯'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
<optgroup label='中文'>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</optgroup>
</select>
<br />
单选： <label>男 <input type="radio" name="sex"></label>
<label>女 <input type="radio" name="sex"></label>
<label>大佬 <input type="radio" name="sex"></label>
<!-- 单选的name必须一样 -->
<br />
多选： <input type="checkbox">西瓜
<input type="checkbox">哈密瓜
<input type="checkbox">波罗蜜
<input type="checkbox">草莓
<input type="checkbox">苹果
<br />
文件：<input type="file" multiple accept="image/jpeg,image/psd">
<!-- 提交文件，multiple是否多选，accept提交的文件类型 -->
文件1：<input type="file" accept=".png,.psd">
<!-- 提交文件类型的第二种写法 -->
<br />
时间：<input type="data" step="7" min="2020-01-01" max="2021-01-01">
<br />
<!-- step隔几天的单位，min显示的最早时间，max显示的最晚时间 -->
时间1：<input type="time">
<br />
时间2：<input type="week">
<br />
时间3：<input type="month">
<br />
时间4：<input type="datetime-local">
<br />
<input type="button" value="按钮" />
<br />
<input type="submit" value='提交按钮'>
<br />
<!-- 会提交表单 -->
</form>
<!-- 提交到百度,action是提交的地址，method是提交的格式 -->
<form action="https://www.baidu.com/s" method='GET'>
<!-- name是提交的字段 -->
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
a链接
<a href="https://www.baidu.com" target="_blank">到百度</a>
<!-- 链接到网址，href表示跳转的位置, target表示是否再打开一个页面-->
<a href="#this">到这里</a>
<!-- 跳转到id为this的地方 -->
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<h1 id="this">这里</h1>
<a href="15346855.@qq.com">发送邮件</a>
<a href="tel:15464514548646">拨打电话</a>
video视频标签
<video src="./xxxx.mp4" width="600" height="200" controls muted autoplay poster="./laopo2.jpg" loop></video>
<!-- src文件位置，width宽度，height高度,controls显示进度条，muted静音，autoplay自动播放,poster视频封面，loop循环播放 -->
audio音频标签
<audio src="xxx.mp3" controls muted ></audio>
<!-- srcdi文件位置，controls进度条，muted静音 -->
div，span
这俩标签主要就是用来划分区域的，单看什么感觉，复习css的时候再说吧
<div>盒子</div>
<span>盒子</span>
用于区分的位置的内容的语义话标签
这其实就是换了名字的div，让区域区分起来更方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
头部
</header>
<nav>导航栏</nav>
<main>
主体
<article>
独立区域
<section>
各个相识的部分
</section>
</article>
</main>
<aside>
边上的小模块
</aside>
<footer>
底部
</footer>
</body>
</html>
