一小白第一次总结了部分简单的(刚接触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>