感觉在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. Python网络socket学习

    Python 网络编程 Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的 ...

  2. 调用shell脚本，IP处理

    //调用shell脚本,IP处理 package com.letv.sdns.web.utils; import org.slf4j.Logger; import org.slf4j.LoggerFa ...

  3. 2013nanjignB

    B - Poor Warehouse Keeper Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  4. 资源URL地址记录

    1. 如何搭建VPN服务器 http://www.360doc.com/content/11/0217/11/3084932_93749130.shtml http://www.softxp.net/ ...

  5. 隐藏NavigationBar时的一个坑

    http://www.jianshu.com/p/efb960fed457 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear: ...

  6. IE8 margin: auto 无法居中

    需要给body元素添加属性 body { text-align: center; width: 100%; } ok,可以正常居中.

  7. sql查询比较两表不同数据与相同数据

    以下举例是查询相同数据,否则则相反 方法一: select * from A as x,B as y where x.a1=y.b1 and x.a2=y.b2 and x.a3=y.b3 方法二: ...

  8. Object.prototype.toString.call()进行类型判断

    为什么类型判断用到Object.prototype.toString.call()进行类型判断,而不用typeof()呢? 然后翻了一下资料: Typeof 在使用 ]));/));));//[obj ...

  9. php导出csv数据在浏览器中输出提供下载或保存到文件的示例

    来源:http://www.jb51.net/article/49313.htm 1.在浏览器输出提供下载 /** * 导出数据到CSV文件 * @param array $data 数据 * @pa ...

  10. BZOJ2466——[中山市选]树

    1.题目大意:给你一棵树,树的每个节点都有一个权值,是0或1,最开始都是0,你可以做一种修改操作,就是把一个节点和它相邻的 节点的权值取反,问最少几次修改能把所有节点的权值变得都是1,最多100个节点 ...