1. 简单标签
strong: 定义重要性强调的文字
ins(inseted)：定义插入的文字
em(emphasized):定义强调的文字
del:被删除的文字（删除线）
©版权符号
<body>
<div style="这里也可以写一些div的样式">
//html 编码 以&开头，；结束 &xxx；
 ：一行文字中无论你放了多少个空格，浏览器上都只显示一个，要想显示多个空格，就需要
 空格符
<小于号
>大于号
例如<div>页面显示就是<div>
<br>换行符，单标签，代码中无论回车多少次，页面都只显示一次换行，多次换行就需要多个<br>标签
</div>
</body>
H标签：给文本添加标题语义，而不是修改页面样式的，一个页面中只能有一个<h1>标签
<hr>:显示分隔线，单独一行
2. 有序列表
<ol type="1" reversed="resversed" start="2">
<!-- type 排序方式 1/a/A/i/I 五种种排序方式，区分大小写 reversed倒序 start从第几个开始排，后面是罗马数字第几个-->
<li>苹果</li>
<li>橘子</li>
<li>梨子</li>
<li>香蕉</li>
</ol>
type="1"
type="1" reversed="resversed"
<ol type="a" start="2">
3. 无序列表(与div和span一样重要)
type的三种样式
<ul type="disc" >
<!--只有这一个属性 type square实心方块 circle空心圆 disc实心圆-->
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
<li>🍊</li>
</ul>
常用于导航栏这种子项基本样式、功能都一样，只是内容有一些细微差别的功能块，css里面写list-style:none可以去掉前面的小原点
定义列表
<dl>
<dt>定义标题<.dt>
<dd>标题描述</dd>
</dl>
应用场景：网站尾部相关信息，图文混排
4. 图片
alt:当src路径有问题时图片就显示不出来，可使用alt简单展示图片信息
title：当鼠标挪到图片上的时候会显示一些提示内容
<img src="路径" style="样式" alt="" title="图片提示符">
<!-- 1.网页路径
2.本地绝对路径：跟页面不在一个页面，要写完整路径
3.本地相对路径 :跟页面在同一个地址下，直接写图片名字就行
-->
5. 超链接
<a href="www.baidu.com" style="" target="_blank">
www.baidu.com
里面包含的所有内容点击后都会跳到href内的链接页面，target="_blank"代表打开新页面，不写或者是_self表示在当前页面打开
可放文字、图片
</a>
href：
1、超文本引用，写链接地址
2、锚点，类似目录，href里写元素id，例如#img1，点击就会跳到id为img1的地方，只有#会跳到顶部，如果写本地文件地址，可以跳转到本地文件，本地文件地址+#id可以跳转到文件指定位置
3、打电话，tel:400252255 点击就会拨打电话
4、发邮件：mailto:邮箱地址
5、协议限定符:例如下图
可以强制运行js的代码
实现效果
target:不加这个就是在本页面跳转，加上_blank就会在新标签页面打开链接
<base target="_blank">在 <head>里写上这句话就可以让所有<a>标签都跳转新页面
6. 表单标签:超级重要，可发送消息跟后端交互
name:必须写才能发送过去 数据名，比如下面点击登陆，就会提交用户名和密码，类似http://xxxx?username=xxx&password=xxx,就可以从后台按格式解析出数据名和数据值
在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要提交到服务器的数据
input标签 type:
text是文本输入框
password密码输入框
submit提交按钮，会将form标签内input的数据全部提交给后台
radio是单选标签，当有多个选项时需将他们的name设置为同一个名字，这样就会被识别为同一道题的选项，实现单选操作
checkbox 多选框，所有选项name必须一致,跟单选框一样，需要给value设置值提交时才知道选的是谁
<form method="get" action="">
<p>username:<input type="text" name="username"></p>
<p>password:<input type="password" name="password"><p>
<input type="submit" value="登陆">
<br>
你喜欢的水果
<!--单选框 设置同一个name就能实现单选，checked可以设置默认选中-->
<br><input type="radio" name="fruit" value="apple">1、苹果
<br><input type="radio" name="fruit">2、梨
<br><input type="radio" name="fruit">3、草莓
<br>
<br><input type="checkbox" name="fruit" value="apple">1、苹果
<br><input type="checkbox" name="fruit">2、梨
<br><input type="checkbox" name="fruit">3、草莓
<br>
</form>
非input标签 select
<form method="get" action="">
//select下拉菜单
<select name="pro">
<option>北京</option>
<option>天津</option>
<option>山西</option>
<option>河南</option>
</select>
<!--用于定义下拉列表-->
<select name="" id="">
<!--optgroup可以给列表分组，用label标示分组名-->
<optgroup label="城市">
<option>广州</option>
</optgroup>
<optgroup label="省份">
<option>河南</option>
<option selected="selected">广东</option>
</optgroup>
</select>
</form>
select效果
textarea 多行文本
<!--1、有默认宽高，可无限换行，
2、也可自行可设置宽高 cols显示几列 rows显示几行
3、右下角有个区域可随意拖动变换宽高，可用css resize: none;设置去掉该区域，参照下图右边样式-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea class="textarea1" id="" cols="30" rows="10"></textarea>
拖动红框内区域可随意改变大小
7、表格标签
默认有边框 border="1"，可设置宽高和对齐方式
<table>
<!--tr代表表格中的一行-->
<tr>
<td>一行中的 一个单元格</td>
</tr>
<tr>
<td>一行中的 一个单元格</td>
</tr>
</table>
对齐方式说明
边距：
默认每个单元格的外边距是2px，可通过在table上用cellspacing修改
cellpadding可修改内边距，即文字与单元格的间距
th标签可设置标题单元格，自动加粗居中
合并单元格
<td colspan="2">colspan可指定单元格当作几个单元格看待，就有合并效果
<td rowspan="2">rowspan可指定单元格垂直方向当作几个单元格看待
8、多媒体标签
视频
<!--播放视频
autoplay自动播放
controls:是否显示控制条
poster:用于视频没播放时的占位图，audio不支持
loop:一般用于广告视频，告诉video播放完毕后是否循环播放
preload:预加载视频，如果设置了autoplay，preload就会失效
muted:静音
-->
<video src="播放地址" autoplay="autoplay" controls="controls"></video>
由于各大浏览器支持的格式都不一样，最好使用下面方式，但浏览器必须支持html5才行（以后可以使用一个js的框架html5media让所有浏览器都支持）
<video>
<!--三种都写上总能找到浏览器能支持的格式-->
<source src="ddd.webm" type="video/webm"></source>
<source src="ddd.mp4" type="video/mp4"></source>
<source src="ddd.ogg" type="video/ogg"></source>
</video>
音频 audio 跟视频类似 支持三种格式
<audio autoplay="autoplay" controls="controls">
<source src="ddd.wav" type="audio/wav"></source>
<source src="ddd.mp3" type="audio/mp3"></source>
<source src="ddd.ogg" type="audio/ogg"></source>
</audio>
marquee跑马灯
<!--跑马灯 各大浏览器都支持
direction滚动方向
scrollamount滚动速度
loop:设置滚动次数
behavior：滚动类型 slide滚到边界停止 alternate滚到边界弹回，来回滚
只要把标签放在这里面它就会滚动
-->
<marquee behavior="slide" direction="right" scrollamount="20" loop="1">
跑马灯效果
<img src="" alt="">
</marquee>
网友评论