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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>All Base knowledge</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

标题

<h1>I am h1</h1>

<h2>I am h2</h2>

<h3>I am h3</h3>

<h4>I am h4</h4>

<h5>I am h5</h5>

<h6>I am h6</h6>

段落

<p>I am paragraph</p>

链接

<a href="http://www.baidu.com">我是链接</a>

图片

<img src="img/back.jpg" alt="">

换行

<br>

I am line feed

<br>

<br>

I am line feed

水平线

<hr >

hr is horizontal line

<!---->

<! --I am not see-->

<br>

<br><br>

粗体字

<br>

<b>I am bold face letter  </b>

<br>

加重语气

<br>

<strong>I am say sth. with emphasis</strong>

<br>

<br>

着重文字<br>

<em>I am focus on words</em>

<br>

斜体字<br><br>

<i>I am inclined letter</i>

<br><br>

大号文字<br><br>

<big>I am bigger letter</big>

<br><br>

小号字<br><br>

<small>I am small letter</small>

<br><br>

上标字<br>

HTML<sup>5</sup><br>

下标字<br>

HTML<sub>5</sub><br>

插入字<br>

<ins>I am insert letter</ins>

<br>

删除字<br>

<del>I am delete letter</del>

<br>

缩写字<br>

<abbr>I am  abbrevation letter</abbr><br>

<abbr title="World Wide Web">WWW是万维网</abbr><br>

首字母缩写<br>

<acronym title="World Wide Web">WWW</acronym>

<br>地址<br>

<address>

    联系地址：area<br>

    联系电话：1212324<br>

    联系人：cat

</address>

<br>

div

<div>I am div</div>

<br>

span

<br>

<span>I am span</span><br>

表格：table

<br>

<tr>

    <th>name</th>

    <th>age</th>

    <th>sex</th>

</tr>

<br>

<tr>

    <td>Mary</td>

    <td>18</td>

    <td>girl</td>

</tr>

<br>

<tr>

    <td>Helen</td>

    <td>38</td>

    <td>girl</td>

</tr>

<br>

无序列<br>

<ul>

    <li>I am gradefather

    <ul>

        <li>I am father

        <ul>

            <li>I am son</li>

            <li>I am son, too</li>

        </ul></li>

        <li>I am father, too</li>

    </ul></li>

    <li>I am gradefather, too</li>

</ul>

<br>

有序列<br>

<ol>

    <li>I am gradefather

    <ol start="30">

    <li>I am father

    <ol start="50">

        <li>I am son</li>

        <li>I am son,too</li>

    </ol>

    </li>

    <li>I am father,too</li>

</ol>

</li>

<li>I am gradefaher, too</li>

</ol>

<br>

定义列表<br>

dl dt dd

<br>

<dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置</dd>

</dl>

<br>

表单<br>

<form action="">

    <input type="text" name="t1">

    <input type="text" name="t2">

    <input type="submit">

    <!<input type="password">

    <input type="submit">

</form>

<br>

文本域<br>

textarea<br>

<textarea name="textarea" id="" cols="10"rows="5"maxlength="10" placeholder="请填写" readonly readonly></textarea>

rows:高度

<br>

cols：宽度<br>

maxlength:最大输入文字数

disabled:禁止输入

placeholder="请填写"：制定占位符

readonly:只读

<br>

控制标签:label

<br>

<label for="l1">性别：</label><input type="radio" id="l1" name="set">

<label for="l2">城市</label><input type="radio" id="l2" name="set">

<br>

对表单进行组合<br>filedset legend<br>

<form>

    <fieldset>

        <legend>健康信息</legend>

        身高：<input type="text"/>

        体重：<input type="text"/>

    </fieldset>

</form>

<br>

<br><br>

标签：<br>

头部：header<br>

尾部：footer<br>

主体：section<br>

导航：nav<br>

生成注释：aside<br>

引入插件：embed<br>

独立主体：article<br>

组合标签：hgroup

<br>

<hgroup>

     <h1>I am h1</h1>

     <h2>I am h2</h2>

     </hgroup>

<br>进度条:progress<br>

<progress value="22" max="100"></progress>(ie9以下不支持的标签)

<br>

使用图片：figure figcation<br>

<figure><img src="img/img.jpg"/></figure>

<figcation>html5</figcation>

<br>

按钮：button<br>

<form action="">

    name:<input type="text" name="t1">

    phone:<input type="tetx" name="t2">

    <button type="submit">提交</button>

    <button type="reset">重置</button>

    <button type="button">按钮</button>

</form>

<br>

输入框：input<br>

<input type="radio"/>

<input type="checkbox">

<input type="text">

<input type="passward">

<input type="color">

<input type="number" min="5" max="50" step="0.1">

<input type="file">

<br><br>

视频：video<br>

音频：audio<br>

<br><br>

背景：background:#00FF00 url(../img/img.jpg)no-repeat fixed top;

<br>

background-img

<background-img>

<background-size>

<background-color>

<background-position>

<background-repeat>

<br>

background-img<br>

background-size<br>

background-color<br>

background-position<br>

background-repeat<br>

文本：<br>

text-indent<br>

text-align<br>

tetx-spacing<br>

text-decoration<br>

text-shadow<br>

<tetx-spacing>

<text-shadow>

<text-decoration>

<text-align>

<text-indent>

<br><br><br><br><br>

<h1>样式</h1>

<br>字体<br>

font-size<br>

font-stye<br>

font-weight<br>

font-family:"Microsoft Yahei"<br>

@font-face<br>

<font-family>

<font-face>

<font-weight>

<font-stye>

<font-size>

<br>

定位：

<br>position：fixed<br>

position:absolute<br>

position:relative<br>

<position>

<position：fixed>

<br>溢出<br>

overflow:

    <br>hidden quto scroll<br>

    <overflow>

 <br>尺寸<br>

 height<br>width<br>max-height<br>max-width<br>min-height<br>min-width<br>line-height<br>

 浮动<br>

 clear:

 <br > left:<br>right<br>both<br>

 <br>

 光标：<br>

 curosr<br><br>pointer<br>text<br>help<br>wait<br>

 圆角：<br>

 border-radius:5px

 <br>

 内边距：

 <br>padding

 <br>外边距：<br> margin<br>

 浮动：<br>float<br>

 透明<br>opacity<br>

 链接:<br>

 未被访问的链接：a:link<br>

 已被访问的链接：a:visited<br>

 鼠标指针移动到链接上：a:hover<br>

 正在被点击的链接：a:active<br>

<br>2D<br>

移动：transform:translate(50px, 80px)<br>

缩放：transform:scale(0.5, 0.5);

<br>旋转：transform:rotate(50deg)<br>

倾斜：transform:skew(50deg, 80deg);

<br>

动画<br>

div{

    height:200px;

    width:200px;

    animation:mymove 5s infinite;

    position:relative;

    }

    @-moz-keyframes mymove{

    0% {top:0px; left:0px; background}

    0%   {top:0px; left:0px; background:red;}

            25%  {top:0px; left:100px; background:blue;}

            50%  {top:100px; left:100px; background:yellow;}

            75%  {top:100px; left:0px; background:green;}

            100% {top:0px; left:0px; background:red;}

    }

}

<br>

-moz-:Firefox<br>

-webkit-:Safari 和Chrome<br>

-o-:Opera<br>

-ms-:IE<br>

<br>

<h1>CSS 的核心</h1>

<h2>>盒模型（padding, margin， border</h2>

<h2>定位(position</h2>

<h2>浮动(float)</h2>

</body>

</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. AngularJS API之equal比较对象

    使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在ja ...

  2. codevs2574 波兰表达式

    题目描述 Description 对于 加.减.乘.除这种四则运算的表达式,我们使用的是先乘除.后加减的从左到右的顺序进行运算,如果要指定特定的顺序,就要增加括号进行表达,比如 (A+B)*C , A ...

  3. Elven Postman（BST ）

    Elven Postman Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  4. Javascript高级程序设计——基本类型和引用类型的值

    ECMAScript中的变量有两种不同的数据类型的值: 基本类型:基本类型的值是简单的数据段.包括:Undefined.Null.Number.Boolean.String五种 引用类型:引用类型的值 ...

  5. 创建第一个JBPM6项目并且运行自带的helloword例子（JBPM6学习之三）

    1. 打开Eclipse,右键New JBPM Project 项目,在项目名称里面填写一个项目名字,如“TestJbpm6”,然后下一步,知道Finish完成(里面会使用我们配置的运行环境). 2. ...

  6. iOS开发——高级篇——Parse 教程：网络后台基础

    本教程已针对Swift, iOS 8.3, Xcode 6.3及最新的Parse SDK(1.7.1版本)更新. 网络后台支持可以为你的App添加许多崭新的功能:不论是数据同步,社交分享,还是云端存储 ...

  7. 总结六条对我们学习Linux系统有用的忠告

    接触linux需要的是端正自己的态度,这个玩意可不是一天两天就能拿得下的.学习个基础,能装系统.能装常见服务.能编译.能配置存储空间.能配置系统参数.能简单查看系统负载等基本够用.但这些只保证能做机房 ...

  8. UIView的layoutSubviews和drawRect

    原文: UIView的layoutSubviews和drawRect UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.setNeedsDis ...

  9. ios中二维码的使用之二： 二维码的扫描

    二维码的扫描: 1,导入支持框架,<AVFoundation/AVFoundation.h> 2 ,扫描:

  10. [转载]Linux下tomcat的catalina.out文件过大,以及目录更改解决办法

    原文链接:http://liyan0524.iteye.com/blog/1285644 方法1—分割流 使用cronolog工具切分Tomcat的catalina.out日志文件 cronolog一 ...