HTML学习
HTML
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它包括一系列标签。
HTML思维导图：
HTML基本标签
<!-- 段落标签 -->
<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
<!-- div标签 -->
<div id="mydiv">
这是一个div
</div>
<!-- 分割线 -->
<hr />
<!-- h换行 -->
<br/>
<!-- 区块元素span -->
<span>这是一个span</span>
<!-- 区块元素span -->
<span>这是一个span</span>
<!-- 特殊符号 -->
空格:
版权:©
小于:<
大于:>
<!-- 框架
<iframe></iframe>:框架标签
src:在框架中显示的文档的URL
-->
<iframe src="" width="" height=""></iframe>
<!-- 常用属性 id class style -->
文本
<!-- 文本标签-->
<strong>粗体</strong>
<i>斜体</i>
<sup>上标</sup>
<sub>下标</sub>
<s>中划线</s>
<u>下划线</u>
表格
<!--
表格
boder:边框
rowspan:跨行
colspan:跨列
<caption></caption>:表格标题
<thead></thead><tbody></tbody><tfoot></tfoot>:是布置表分布头，身，尾
<tr></tr>:在里面的<td></td>表示一个行的
<td></td>:表示一个格子
-->
<table border="">
<caption>表格标题</caption>
<thead><!--头部-->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody><!--身体-->
<tr>
<td rowspan="2">内容部分1-1</td>
<td colspan="2">内容部分1-2</td>
</tr>
<tr>
<td>内容部分2-2</td>
<td>内容部分2-3</td>
</tr>
</tbody>
<tfoot><!--尾部-->
<tr>
<td>表尾内容1</td>
<td>表尾内容2</td>
<td>表尾内容3</td>
</tr>
</tfoot>
</table>
列表
<!-- 列表 -->
<!-- 有序列表
<ol></ol>:有序列表
<li></li>:具体列
type:序号类型（a,A,i,I,1）默认1
star:序号的开始
-->
<ol type="1" start="2">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 无序列表
<ul></ul>:无序列表
<li></li>:具体列
type:列左边的标记类型(disc实心圆默认,circle空心圆,square实心方块)
-->
<ul type="circle">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 自定义列表
<dl></dl>:自定义列表
<dt></dt>:自定义列表项
<dd></dd>:自定义列表项的描述
-->
<dl>
<dt>自定义列表项</dt>
<dd>自定义列表项的描述</dd>
<dt>自定义列表项</dt>
<dd>自定义列表项的描述</dd>
</dl>
图片
<!-- 图片
<img />:图片标签
src:图片的url
width:图片的宽度
height:图片的高度
alt:加载不出来是的说明文字
title:鼠标在图片上的提示文字
-->
<img src="../img/psc61082ER3.jpg" width="200px" height="200px" alt="加载不出来是的说明文字" title="鼠标在图片上的提示文字"/>
链接
<!-- 链接
<a></a>:链接标签
href:链接的url
target:规定在何处打开目标 URL
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
-->
<a href="https://www.baidu.com" target="_selfs">链接文字</a>
<!-- 锚链接
可以实现在页面的跳转
用于返回头部或跳转到指定位置
-->
<br/>
<h1 id="top"></h1>
<a href="#top">返回头部</a>
表单
<!-- 表单 -->
<form action="#" method="get">
<!-- <input />:输入域标签
type:类型 具体参考https://www.runoob.com/tags/tag-input.html
-->
按钮<input type="button" name="" id="" value="按钮" /><br/>
多选<input type="checkbox" name="" id="" value="" /><br/>
单选<input type="radio" name="" id="" value="" /><br/>
颜色选择框<input type="color" name="" id="" value="" /><br/>
单行文本框<input type="text" name="" id="" value="" /><br/>
时间框<input type="date" name="" id="" value="" /><br/>
文件上传框<input type="file" name="" id="" value="" /><br/>
隐藏框<input type="hidden" name="" id="" value="" /><br/>
图片按钮<input type="image" src="../img/return.png" name="" id="" value="" /><br/>
密码框<input type="password" name="" id="" value="" /><br/>
重置按钮<input type="reset" name="" id="" value="重置" /><br/>
搜索框<input type="search" name="" id="" value="" /><br/>
提交按钮<input type="submit" name="" id="" value="提交" /><br/>
<!-- <textarea></textarea> 文本域标签
rows:可见行数
cols:可见宽度
-->
文本域<textarea rows="10" cols="10"></textarea><br/>
<!-- <lable></lable>:标签标签
for:规定 label 与哪个表单元素绑定。
form:规定 label 字段所属的一个或多个表单。
-->
标签<label for="表单元素id" form="表单id">标签</label><br/>
<!-- <select></select> 下拉列表选项标签
<option value=""></option> 具体选项
-->
下拉选项列表<select>
<option value="East">East</option>
<option value="West">West</option>
<option value="South">South</option>
<option value="North">North</option>
</select><br/>
<!-- <button></button> 按钮标签 -->
单击按钮<button type="button">点击按钮</button><br/>
</form>
多媒体标签
<!-- 多媒体标签 -->
<!-- <audio></audio> 音频标签
<source/>定义多媒体资源
autoplay:出现该属性，则音频在就绪后马上播放
controls:出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
loop:出现该属性，则每当音频结束时重新开始播放
-->
<audio autoplay="autoplay" controls="controls" loop="loop">
<source src="../audio/bgAudio.ogg" type="audio/ogg"/>
<source src="../audio/银临%20-%20锦鲤抄.mp3" type="audio/mp3"/>
当前浏览器不支持audio
</audio>
<!-- <video ></video>视频标签-->
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
浙公网安备 33010602011771号