感觉在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. min-device-pixel-ratio

    Devices with -webkit-min-device-pixel-ratio: 2.0 All Macs with Retina displaysApple iPhone 4Apple iP ...

  2. dedecms数据库表前缀不一样怎么还原数据

    我们在用dedecms建站时,安装一般都“下一步”直接往下点,这样默认的表前缀是dede_,如果我们要还原从其他地方拷贝过来的数据,一定要注意表头是否一致.如果表头不一样怎么办呢?有两种方法,第一种, ...

  3. mysql-mysql悲观锁和乐观锁

    1.mysql的四种事务隔离级别 I. 对于同时运行多个事务,当这些事务访问数据库中的相同数据时,如果没有采取必要的隔离机制,就会导致各种并发问题. (1)脏读: 对于两个事物 T1, T2, T1 ...

  4. javaweb servlet中使用请求转发乱码

    乱码的方式有很多,这里指出一种不容易想到的 *请确保您的页面单独访问正常,经过servlet请求转发时,有PrintWriter out = response.getWriter()不正常,没有正常 ...

  5. Android ListView 图片异步加载和图片内存缓存

    开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...

  6. UNTIY3D接入91SDK的办法

    原地址: http://bbs.18183.com/thread-111324-1-1.html UNITY3D接入Android-SDK 方法一:把UNITY3D游戏打成安卓项目文件,修改安卓项目文 ...

  7. [HDU2089]不要62

    [HDU2089]不要62 试题描述 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就 ...

  8. 多通道(Multichannel)单通道(singlechannel)图像概念梳理

    在做机器视觉时,常常要将一个多通道图像分离成几个单通道图像或者将几个单通道图像合成一个多通道图像,以方便图像处理,但是.写这篇博客,是为加深对这两个概念的理解,下面会给出部分OpenCV对单通道与多通 ...

  9. linux下vi命令大全[转]

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  10. 百度地图api 常用demo

    功能一:获取map地图窗口的可视区域: var map = new BMap.Map("allmap");            // 创建Map实例 map.centerAndZ ...