html5中的一些标签学习(心得)


Posted in HTML / CSS onOctober 18, 2016

今天看手册学习到了HTML5很多属性。现在总结如下

<body bgcolor="BED1A2" text="FFFFFF" link="yellow" alink="red" vlink="blue">

Background用来设定页面的背景,后面是图片的地址

Bgcolor 用来设定页面的背景颜色。后面是颜色或者十六进制数字

Text 用来设定没有超链接的字体颜色

 Link用来设定超链接的字体颜色

 alink 用来设定超链接点击时的颜色

Vlink用来设定超链接点击过后的字体颜色

<a href=” 3water.com” > 三水点靠木</a>

<a name=” 3water.com”>页面跳转的地方</a>

<nav>用来将具有导航性质的链接划分到一起如

<nav>

<a href=” #” > 三水点靠木</a>

<a href=” #” > 三水点靠木</a>

<a href=” #” > 三水点靠木</a>

</nav>

 
H<sub>2</sub>SO<sub>4</sub>

<sub>是下标所使用的标签</sub>

<sup>是上标所使用的标签</sup>

分别从标题一到标题六。字体逐渐缩小,并自动换行

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<img src="1.jpeg" width="500" height="auto">

Img是插入图片的标签,width为图片的宽度。Height为图片的高度可以为其填写数值,也可以填写auto(按比例缩放)src中“为图片的地址和后缀名”

<font size="5px" font color=”red”>这是一个关于三水点靠木的网站</font>

size定义字体的大小,后跟px(像素)

color定义字体的颜色

换行 <br/>

水平分割线<hr>

  <!-- 颜色为红色的水平线 -->

  <hr color="red"/>

  <!-- 对齐样式(左/居中/右)和水平线的宽度结合使用 -->

 <hr align="left/cener/right" />

 <!-- 宽度为50%的水平线 -->

 <hr width="50%"/>

 <!-- 高度为50像素的水平线 -->

 <hr size="50"/>

 <!-- 去掉阴影的水平线 -->

 <hr noshade="noshade">

附代码

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2.   
  3. <html>  
  4.   
  5.  <head>  
  6.   
  7.   <meta charset="UTF-8">  
  8.   
  9.   <title>20161017</title>  
  10.   
  11.  </head>  
  12.   
  13.  <body bgcolor="BED1A2" text="FFFFFF" link="yellow" alink="red" vlink="blue">  
  14.   
  15.  <h1>枫桥夜泊</h1>  
  16.   
  17.  <h5>张继</h5>  
  18.   
  19.  <h3>月落乌啼霜满天,</h3>  
  20.   
  21.  <h3>江枫渔火对愁眠。</h3>  
  22.   
  23.  <h3>姑苏城外寒山寺,</h3>  
  24.   
  25.  <h3>夜半钟声到客船。</h3>  
  26.   
  27.  <a href=""www.baidu.com" >baidu</a></br>  
  28.   
  29. 跳转到页面的另外一个地方:</br>  
  30.   
  31.  <a name="www.baidu.com">111</a></br>  
  32.   
  33.   H<sub>2</sub>SO<sub>4</sub><br/>  
  34.   
  35. <img src="1.jpeg" width="500" height="auto"><br/>  
  36.   
  37. <img src="5.jpg" align=top> 实例  <br/>  
  38.   
  39. <img src="5.jpg" align=middle> 实例  <br/>  
  40.   
  41. <img src="5.jpg" align=bottom> 实例 <br/>  
  42.   
  43. 只有一行文字才可以放在图象的两边。   
  44.   
  45. <!-- 边框像素为15的图片 -->  
  46.   
  47. <img src="5.jpg" border=15/>  
  48.   
  49. <br/>  
  50.   
  51.   <font size="5px" font color="red">这是一个关于百度的网站</font><br/>  
  52.   
  53.   <font size="20px">这是一个关于百度的网站</font><br/>  
  54.   
  55.   <!-- 颜色为红色的水平线 -->  
  56.   
  57.   <hr color="red"/>  
  58.   
  59.   <!-- 对齐样式(左/居中/右)和水平线的宽度结合使用 -->  
  60.   
  61.  <hr align="left/cener/right" />  
  62.   
  63.  <!-- 宽度为50%的水平线 -->  
  64.   
  65.  <hr width="50%"/>  
  66.   
  67.  <!-- 高度为50像素的水平线 -->  
  68.   
  69.  <hr size="50"/>  
  70.   
  71.  <!-- 去掉阴影的水平线 -->  
  72.   
  73.  <hr noshade="noshade">  
  74.   
  75.  <div align=left border="1px" >  
  76.   
  77. 你知道我在等你吗<br>  
  78.   
  79. 你可能不懂   
  80.   
  81. </div>  
  82.   
  83.  </body>  
  84.   
  85. </html>  

以上就是小编为大家带来的html5中的一些标签学习(心得)全部内容了,希望大家多多支持三水点靠木~

HTML / CSS 相关文章推荐
CSS3的新特性介绍
Oct 31 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 #HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 #HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 #HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 #HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 #HTML / CSS
a标签下载链接的简单实现
Sep 13 #HTML / CSS
HTML5新增加的功能详解
Sep 05 #HTML / CSS
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
学生喝酒检讨书
2014/02/06 职场文书
团代会开幕词
2015/01/28 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL