HTML5入门基本标签

一小白第一次总结了部分简单的(刚接触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>
以上是一只菜鸡的第一篇博客。
  • 22
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值