一小白第一次总结了部分简单的(刚接触html5的一些标签)
为什么会诞生html5? html5相对于html4有哪些优点呢???
1、语义化
2、便于阅读
3、便于维护
4、利于seo搜索引擎搜索,优化
以下是代码运行结果图片,可根据图片内容找到对应代码
<!--学习HTML的文档结构及基本的标签使用-->
<!DOCTYPE html>
<html>
<head>
<!--定义头部,隐性,具有系统级别的使用权-->
<!--以下是title定义文档的标题-->
<title>
vivi
</title>
</head>
<body>
<!--定义文档身体部分,主题内容,显性内容-->
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--2,内容:段落-->
<p>
我是vivi。
</p>
<!--3,拆行-->
<br />
<!--4,水平线-->
<hr />
<!--以下为进阶的标签-格式部分-->
<!--5,加粗-->
<b>粗体</b> 普通
<address>地址 四川省</address>
<i>斜体</i>
<bdl>文本方向标签</bdl>
<bdo></bdo>
<big>大号文本</big>
<small>小号字体</small>
<blockquote>定义块引用(缩进)</blockquote>
<del>删除线 删除文本</del><s>删除(中文版)</s>
<mark>定义带有记号的文本 (标记笔)</mark>
<meter value="0.6">定义数据范围的度量衡标签</meter>
<meter value="21" min="0" max="100"></meter>
<progress value="25" max="100">进度条标签</progress>
<q>定义短的引用(无法选用双引号)</q>
<ruby>
你<rt>ni</rt>好<rt>hao</rt>
</ruby>
<u>下划线</u>
<sub>下标</sub>
<sup>上标</sup> 2<sup>2</sup>
<p>
我在<time>9:00</time>开始学习
我在<time datetime="2019">开学</time>
</p>
<p>
打印机文本
<tt>打印机文本</tt>
</p>
<!--以下为进阶标签-表单部分-->
<form>
<!--是一个隐形标签,不可见,他定义了一个用于提供输入的表单区域-->
<!--输入控件-->
<input />
普通输入<input type="text" />
加密输入<input type="password"/>
普通按钮<input type="button" />
复选按钮<input type="checkbox" />
单选按钮<input type="radio" />
文件选择<input type="file" />
<br />
不常用:
颜色:<input type="color" />
日期:<input type="date" />
时间:<input type="time" />
日期+时间 <input type="datetime" />
url<input type="url" value="http://www.baidu.com" />
number <input type="number" />
tel<input type="tel"value="15109526531" />
week<input type="week"value="" />
month<input type="month" />
<button type="reset">重置按钮</button>
</form>
<textarea>多行文本框,支持回车换行</textarea>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<select>
<option>123</option>
<option>231</option>
<option>132</option>
</select>
</body>
<!--框架-->
<iframe width="600" height="600" src="http://www.baidu.com"></iframe>
<img src="" />
<audio src="..." controls="controls" loop="loop" > 音频</audio>
<video src="..." controls="controls"> 播放视频</video>
<a href="http://www.baidu.com" target="_blank">新窗口,打开百度以下</a>
<div>块级标签,默认没有行高</div>
一些补充
1、<img src="" alt="我是logo" title="i am logo"/>
alt 替代文字 网络不好时,图片加载不出来时,可以显示替代文字,利于搜 索引擎的搜索,优化
title 鼠标碰到图片(未点击)可显示文字内容小框
2、打印机文本可达到放大后不失真的效果。
3、单选按钮出现多个以后,会出现多个选项都可以选中的问题,这样就违背了“单选”,以下是解决方案。并且还将其优化:将选项和文字绑定,即点击文字的时候也能选中。
<input type="radio" name="sex" id="man" /><label for="man">男</label>
<input type="radio" name="sex" id="woman" /><label for="woman">女</label>