感觉在Sublime Text3中写起来比较方便~~

将HTML5中要用到的基本标签全部放在了一起，没有好好的整理，为了自己记忆的方便，就先这样写下来了~~

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>All Base knowledge</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css">
  7. </head>
  8. <body>
  9. 标题
  10. <h1>I am h1</h1>
  11. <h2>I am h2</h2>
  12. <h3>I am h3</h3>
  13. <h4>I am h4</h4>
  14. <h5>I am h5</h5>
  15. <h6>I am h6</h6>
  16.  
  17. 段落
  18. <p>I am paragraph</p>
  19.  
  20. 链接
  21. <a href="http://www.baidu.com">我是链接</a>
  22.  
  23. 图片
  24. <img src="img/back.jpg" alt="">
  25.  
  26. 换行
  27. <br>
  28. I am line feed
  29. <br>
  30. <br>
  31. I am line feed
  32.  
  33. 水平线
  34. <hr >
  35. hr is horizontal line
  36.  
  37. <!---->
  38. <! --I am not see-->
  39. <br>
  40. <br><br>
  41.  
  42. 粗体字
  43. <br>
  44. <b>I am bold face letter  </b>
  45. <br>
  46.  
  47. 加重语气
  48. <br>
  49. <strong>I am say sth. with emphasis</strong>
  50. <br>
  51. <br>
  52.  
  53. 着重文字<br>
  54. <em>I am focus on words</em>
  55. <br>
  56. 斜体字<br><br>
  57. <i>I am inclined letter</i>
  58. <br><br>
  59. 大号文字<br><br>
  60. <big>I am bigger letter</big>
  61. <br><br>
  62. 小号字<br><br>
  63. <small>I am small letter</small>
  64. <br><br>
  65. 上标字<br>
  66. HTML<sup>5</sup><br>
  67. 下标字<br>
  68. HTML<sub>5</sub><br>
  69.  
  70. 插入字<br>
  71. <ins>I am insert letter</ins>
  72. <br>
  73.  
  74. 删除字<br>
  75. <del>I am delete letter</del>
  76. <br>
  77.  
  78. 缩写字<br>
  79. <abbr>I am  abbrevation letter</abbr><br>
  80. <abbr title="World Wide Web">WWW是万维网</abbr><br>
  81.  
  82. 首字母缩写<br>
  83. <acronym title="World Wide Web">WWW</acronym>
  84.  
  85. <br>地址<br>
  86. <address>
  87.     联系地址：area<br>
  88.     联系电话：1212324<br>
  89.     联系人：cat
  90. </address>
  91. <br>
  92. div
  93. <div>I am div</div>
  94. <br>
  95.  
  96. span
  97. <br>
  98. <span>I am span</span><br>
  99.  
  100. 表格：table
  101. <br>
  102. <tr>
  103.     <th>name</th>
  104.     <th>age</th>
  105.     <th>sex</th>
  106. </tr>
  107. <br>
  108. <tr>
  109.     <td>Mary</td>
  110.     <td>18</td>
  111.     <td>girl</td>
  112. </tr>
  113. <br>
  114. <tr>
  115.     <td>Helen</td>
  116.     <td>38</td>
  117.     <td>girl</td>
  118. </tr>
  119. <br>
  120. 无序列<br>
  121. <ul>
  122.     <li>I am gradefather
  123.     <ul>
  124.         <li>I am father
  125.         <ul>
  126.             <li>I am son</li>
  127.             <li>I am son, too</li>
  128.         </ul></li>
  129.         <li>I am father, too</li>
  130.     </ul></li>
  131.     <li>I am gradefather, too</li>
  132. </ul>
  133. <br>
  134. 有序列<br>
  135. <ol>
  136.     <li>I am gradefather
  137.     <ol start="30">
  138.     <li>I am father
  139.     <ol start="50">
  140.         <li>I am son</li>
  141.         <li>I am son,too</li>
  142.     </ol>
  143.     </li>
  144.     <li>I am father,too</li>
  145. </ol>
  146. </li>
  147. <li>I am gradefaher, too</li>
  148. </ol>
  149. <br>
  150.  
  151. 定义列表<br>
  152. dl dt dd
  153. <br>
  154. <dl>
  155.     <dt>计算机</dt>
  156.     <dd>用来计算的仪器</dd>
  157.     <dt>显示器</dt>
  158.     <dd>以视觉方式显示信息的装置</dd>
  159. </dl>
  160. <br>
  161. 表单<br>
  162. <form action="">
  163.     <input type="text" name="t1">
  164.     <input type="text" name="t2">
  165.     <input type="submit">
  166.     <!<input type="password">
  167.     <input type="submit">
  168. </form>
  169. <br>
  170. 文本域<br>
  171. textarea<br>
  172. <textarea name="textarea" id="" cols="10"rows="5"maxlength="10" placeholder="请填写" readonly readonly></textarea>
  173. rows:高度
  174. <br>
  175. cols：宽度<br>
  176. maxlength:最大输入文字数
  177. disabled:禁止输入
  178. placeholder="请填写"：制定占位符
  179. readonly:只读
  180. <br>
  181. 控制标签:label
  182. <br>
  183. <label for="l1">性别：</label><input type="radio" id="l1" name="set">
  184. <label for="l2">城市</label><input type="radio" id="l2" name="set">
  185. <br>
  186. 对表单进行组合<br>filedset legend<br>
  187. <form>
  188.     <fieldset>
  189.         <legend>健康信息</legend>
  190.         身高：<input type="text"/>
  191.         体重：<input type="text"/>
  192.     </fieldset>
  193. </form>
  194. <br>
  195. <br><br>
  196. 标签：<br>
  197. 头部：header<br>
  198. 尾部：footer<br>
  199. 主体：section<br>
  200. 导航：nav<br>
  201. 生成注释：aside<br>
  202. 引入插件：embed<br>
  203. 独立主体：article<br>
  204. 组合标签：hgroup
  205. <br>
  206. <hgroup>
  207.      <h1>I am h1</h1>
  208.      <h2>I am h2</h2>
  209.      </hgroup>
  210.  
  211. <br>进度条:progress<br>
  212. <progress value="22" max="100"></progress>(ie9以下不支持的标签)
  213. <br>
  214. 使用图片：figure figcation<br>
  215. <figure><img src="img/img.jpg"/></figure>
  216. <figcation>html5</figcation>
  217. <br>
  218. 按钮：button<br>
  219. <form action="">
  220.     name:<input type="text" name="t1">
  221.     phone:<input type="tetx" name="t2">
  222.     <button type="submit">提交</button>
  223.     <button type="reset">重置</button>
  224.     <button type="button">按钮</button>
  225. </form>
  226. <br>
  227. 输入框：input<br>
  228. <input type="radio"/>
  229. <input type="checkbox">
  230. <input type="text">
  231. <input type="passward">
  232. <input type="color">
  233. <input type="number" min="5" max="50" step="0.1">
  234. <input type="file">
  235. <br><br>
  236. 视频：video<br>
  237. 音频：audio<br>
  238. <br><br>
  239. 背景：background:#00FF00 url(../img/img.jpg)no-repeat fixed top;
  240. <br>
  241. background-img
  242. <background-img>
  243. <background-size>
  244. <background-color>
  245. <background-position>
  246. <background-repeat>
  247. <br>
  248. background-img<br>
  249. background-size<br>
  250. background-color<br>
  251. background-position<br>
  252. background-repeat<br>
  253. 文本：<br>
  254. text-indent<br>
  255. text-align<br>
  256. tetx-spacing<br>
  257. text-decoration<br>
  258. text-shadow<br>
  259. <tetx-spacing>
  260. <text-shadow>
  261. <text-decoration>
  262. <text-align>
  263. <text-indent>
  264.  
  265. <br><br><br><br><br>
  266. <h1>样式</h1>
  267. <br>字体<br>
  268. font-size<br>
  269. font-stye<br>
  270. font-weight<br>
  271. font-family:"Microsoft Yahei"<br>
  272. @font-face<br>
  273. <font-family>
  274. <font-face>
  275. <font-weight>
  276. <font-stye>
  277. <font-size>
  278. <br>
  279. 定位：
  280. <br>position：fixed<br>
  281. position:absolute<br>
  282. position:relative<br>
  283. <position>
  284. <position：fixed>
  285. <br>溢出<br>
  286. overflow:
  287.     <br>hidden quto scroll<br>
  288.     <overflow>
  289.  
  290.  <br>尺寸<br>
  291.  height<br>width<br>max-height<br>max-width<br>min-height<br>min-width<br>line-height<br>
  292.  浮动<br>
  293.  clear:
  294.  <br > left:<br>right<br>both<br>
  295.  
  296.  <br>
  297.  光标：<br>
  298.  curosr<br><br>pointer<br>text<br>help<br>wait<br>
  299.  圆角：<br>
  300.  border-radius:5px
  301.  <br>
  302.  内边距：
  303.  <br>padding
  304.  <br>外边距：<br> margin<br>
  305.  浮动：<br>float<br>
  306.  透明<br>opacity<br>
  307.  链接:<br>
  308.  未被访问的链接：a:link<br>
  309.  已被访问的链接：a:visited<br>
  310.  鼠标指针移动到链接上：a:hover<br>
  311.  正在被点击的链接：a:active<br>
  312.  
  313. <br>2D<br>
  314. 移动：transform:translate(50px, 80px)<br>
  315. 缩放：transform:scale(0.5, 0.5);
  316. <br>旋转：transform:rotate(50deg)<br>
  317. 倾斜：transform:skew(50deg, 80deg);
  318. <br>
  319. 动画<br>
  320. div{
  321.     height:200px;
  322.     width:200px;
  323.     animation:mymove 5s infinite;
  324.     position:relative;
  325.     }
  326.     @-moz-keyframes mymove{
  327.     0% {top:0px; left:0px; background}
  328.     0%   {top:0px; left:0px; background:red;}
  329.             25%  {top:0px; left:100px; background:blue;}
  330.             50%  {top:100px; left:100px; background:yellow;}
  331.             75%  {top:100px; left:0px; background:green;}
  332.             100% {top:0px; left:0px; background:red;}
  333.     }
  334. }
  335. <br>
  336. -moz-:Firefox<br>
  337. -webkit-:Safari 和Chrome<br>
  338. -o-:Opera<br>
  339. -ms-:IE<br>
  340. <br>
  341. <h1>CSS 的核心</h1>
  342. <h2>>盒模型（padding, margin， border</h2>
  343. <h2>定位(position</h2>
  344. <h2>浮动(float)</h2>
  345.  
  346. </body>
  347. </html>

HTML5基本标签、样式的更多相关文章

  1. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  2. 支持HTML5新标签

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,               可以利用这一特性让这些浏览器支持HTML5新标签,               ...

  3. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. 如何处理HTML5新标签的兼容性问题

    支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

  6. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  7. 解决html5中标签出现的不兼容的问题

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  8. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

  9. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  10. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

随机推荐

  1. 用一个简单的例子来理解python高阶函数

    ============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...

  2. log4net的基本配置及用法

    [1].[代码] [C#]代码 跳至 [1] [2] ? 1 2 using System.Reflection;  //使用反射 static private ILog log = log4net. ...

  3. IOS开发之----NSDictionary，JSON和XML互相转换

    本文永久地址为 http://www.cnblogs.com/ChenYilong/p/4044521.html,转载请注明出处.     -(void)test {     //XML文本范例   ...

  4. C#3.0 特性

    C#3.0特性 隐式类型的本地变量和数组 对象初始值设定项 集合初始值设定项 扩展方法 匿名类型 lambda表达式 查询关键字 自动实现的属性 分布方法定义 lambda表达式与表达式树 https ...

  5. MMTx使用说明

    MMTx(MetaMap Transfer)是美国国家医学图书馆建立的用于文本数据挖掘的一种工具. 下面以Medine格式数据为例介绍使用方法 1.在PubMed数据库检索相关的文献. 2.将数据结果 ...

  6. PHP跳转页面的几种实现方法详解

    •PHP页面跳转一.header()函数header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器.header() ...

  7. 提交上了，却在iTunes Connect没有新版本的任何消息

    上架的时候,收到这样的邮件 This app attempts to access privacy-sensitive data without a usage description. The ap ...

  8. Chrome Restful Api 测试工具 Postman-REST-Client离线安装包下载，Axure RP Extension for Chrome离线版下载

    [Postman for Chrome 离线下载] Postman-REST-Client离线安装包,可直接在Chrome浏览器本地安装使用,可模拟各种http请求,Restful Api测试, CS ...

  9. 用hexo书写github.io博客 学习心得 教程

    很久没更新文章了,除了工作忙之外,可能就是自己懒惰了. 最近混迹与github,发现git上写博客也是个很不错的平台. 推荐使用 hexo 模版来书写,毕竟我们重点是写文章,而不是管理,所以有神奇何妨 ...

  10. 百度定位API报错：leaked ServiceConnection com.baidu.location.LocationClient$1@426122f0

    使用百度MapApi定位时候,当退出当时使用的activity后,则会报如题的异常,解决办法: 1:当退出当前定位的activity时,一定要在onDestroy方法中要mLocClient.stop ...