HTML基础框架
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>以上代码为html网页的基本模板
html语言由一个个标签组成
例如<title></title>是双标签，<br>（换行符）为单标签。
<title></title>为标题，也就是网页小标签显示的内容
例如：<title>白芸资源网</title>
<body></body>内包含了网页的主题，即网页内容
HTML标题与段落
在<body></body>标签内，可以用多种标签对规定对应文本的大小与重要性
<title></title>为网页标题标签
<h></h>为标题标签
<p></p>为段落标签
例如
<h1>一级标题</h1>
<p>我是一个小段落</p>
<h2>二级标题</h2>
<p>我是第二个小段落</p>
<h3>三级标题</h3>
<h4>四级标题</h4>
<p>小芸在角落里瑟瑟发抖</p>
HTML文本格式化标签
在写网页时，常常要实现一点奇奇怪怪的功能
例如：想要让某个字体或者数据更加突出，会用到加粗标签
<strong></strong>或者<b></b>
比如：白芸资源网
强调一些数据（比方说英文名字）会用到斜体标签
<em></em>或者<i></i>
比如：时至今日，我们仍忘不了Joe Biden从飞机上摔下来的那一幕
标记一些数据常常会用到下划线
<u>下划线</u>
<ins>下划线</ins>
各位老师大家好，我是练习时长两年半的个人练习生！
强调前后对比通常用删除线
<s>删除线</s>
<del>删除线</del>
HTML图片标签
大家有没有觉得，如果一个网页只有文字，阅读起来会特别枯燥
例如
这两个网页哪一个更吸引人？
正是因为网络文章里面的配图，让其阅读起来更有冲击力
如果想在网页中添加图片
可以用img关键字添加本地图片到网页中
例如<img src="./我是图片"alt="图片加载失败才会显示这部分"title="鼠标悬停会显示"width="400">
width="图片的宽" hight="图片的高" 如果只设定一个，那么图片会自动等比例缩放
这里就要讲一下绝对路径和相对路径的概念，详情请看下一章
HTML中绝对路径和相对路径
HTML访问本地的文件(视频、音频、图片等)都要借助src关键字来寻找文件路径
而文件路径分为绝对路径和相对路径
拿图片标签的添加来举个例子
绝对路径就是通过本地的文件地址来直接访问该文件
例如
src=""C:\Users\Administrator\Downloads\白芸资源网.png""
相对路径就是通过文件夹中上下级的关系来确定文件的位置
src="./访问该级的文件以及该级下的文件"
src="../访问该文件夹上一级的文件"
HTML音频标签
听音乐，可以让人心情愉悦，或者让人情绪激昂
如果边听音乐边阅读
可以给人以视听结合的船新体验
那么如何在网页中插入一个音乐呢
这是就要用到<audio></audio>标签
<audio src="./"我是音乐.mp3> 但这只是最低级的操作方式
如果想打出高端操作，还得往里加点关键字
！！！一般浏览器都默认关闭自动播放音频的功能以防止音频广告污染！！！
例如我喜欢听See Tinh，那就在网页主体部分写一个
<audio src="./See Tình .mp3" controls loop title="我最爱听"></audio>
HTML视频标签
终于来到了激动人心的时刻！
让自己的网页“动”起来
插入视频用到的标签是<video></video>
下面教教大家进阶操作
如果我想建一个白芸最爱的视频网，那么就要往里面加视频播放控件
<videosrc="./好康的.mp4"controlslooptitle="白芸最爱看的"width="500"></video>
HTML链接标签
链接标签就是给文字加一个点击跳转的效果
类似word文档里面的超链接
链接的标签为<a></a>
格式为<a href="./我是一个文件.html" rel="external nofollow" >我是网页上显示的文字</a>
HTML中的列表
列表就是在网页上实现一个类似排行的功能
分为有序列表和无序列表两类
无序列表：<ul></ul>
有序列表：<ol></ol>
以上列表内的各个元素用<li></li>包裹
表格标签中只能包含<li></li>
自定义列表：<dl></dl>
里面的表头用<dt></dt>包裹，内容用<dd></dd>包裹
HTML中的表格
有人要问了：
HTML怎么实现一个类似excel表的功能呢？
现在就要用到表格标签<table></table>了
<table>标签基本格式:
<table>------------>表示这是一个表格
<tr>-------------->表格第一行的元素
<td></td>---->表格第一列的元素
</tr>
以上就是表格标签的基本内容
但是我相信大家一定不会仅仅满足于普通的标签内容
注意看这个标签<table border="1" width="400" higth="200">
border表示格子线宽度，hight表示高 width表示宽
而且为了方便我们一眼看出表格的各个位置
还可以使用以下标签辅助
<caption></caption>表格标题
<thead></thead>表头(通常为了方便观看，将表头内的<td>替换成<th>)
<tbody></tbody>表身
<tfoot></tfoot>表尾
HTML中的表单
表单主要标签是<input>
可以通过里面不同的type属性来实现不同内容
比方说输入，按钮，单选，多选等功能。
tips:
1.可输入文本框内，可以用placeholder关键字提示输入内容
例如:<input type="text" placeholder="请输入账户">
2.单选框若要实现多选项单选 要用name关键字规定同一内容
若要设置默认选项，可以用checked来标记
例如：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
3.对于按钮，可以使用value关键字来修改按钮上显示的内容
例如：<input type="button">我是一个button按钮</button>
4.如果想要实现选择框里面点击图片或者点击文字都能选中选择框,用label标签
例如选择性别时，想要设置点击图片或者文字都能选中的效果，就要使用label标签将文字或者图片包裹起来
例如:选择性别时，常常想点中文字就选择，可以这样写：
1.<inputtype="radio"name="sex"id="nan"><labelfor="nan">男</label>
也可以这样写:
2.<label><inputtype="radio"name="sex">女</label>
现在，点击文字就可以选中了
HTML表单中的下拉菜单
选写一项信息时，如果选项太多，那么就会太过赘余
如果把全国的城市都排列在网页上，那地方是不是不够
这时候就要用到下拉表单了
例如：
<select>
<option selected>网站源码</option>
<option>软件源码</option>
</select>
效果图：
HTML表单中的文本域
如果用一个小框框来输入不过瘾的话
那就来试试<textarea>文本域标签吧
tips:
如果想设置文本框不可改变大小，只用在标签内部加上style="resize:none
例如：<textarea placeholder="请说明为什么白芸这么受欢迎" rows="10" cols="30" style="resize:none"></textarea>
HTML中的语义化标签
实际开发网页过程中，为方便网页布局，要大量使用语义化标签
1.---无语义标签-div和span标签
div标签，一行只显示一个（独占一行）
span标签，一行可以显示多个
有语义标签
我的知识储备有限，暂时整理这么多比较常用的了。进阶版请移步上一期：建站常用的HTML代码整理分享
