感觉在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. Linux运维初级教程（三）文件及目录权限

    文件类型 -代表普通文件,d代表目录,l代表链接文件,b或c代表设备. 第二至九个字符代表权限,分别为所有者权限.所属组权限.其他账户权限 修改权限用chmod u用户 g组 o其他用户 a所有人 c ...

  2. Linux运维初级教程（一）Shell脚本

    序,掌握shell脚本是linux运维工程师的最基础技能. 一.脚本语言 与高级语言不通,脚本语言运行时需要调用相应的解释器来翻译脚本中的内容. 常见的脚本语言有Shell脚本.Python脚本.ph ...

  3. 【Tomcat】tomcat报错 removeGeneratedClassFiles failed

    程序放到测试环境一点问题没有,放到正式环境都是问题.总感觉是环境的问题,环境能带来问题,但是不是所有问题都能说是环境带来的. 这点,要改正.还要淡定对待问题.看错误. 程序是不会骗你的.这个问题折磨了 ...

  4. C语言：break和continue

    break: break用于循环则是终止循环,break如果用于switch,则是用于终止switch.break不能直接用于if,除非if是属于循环内部的一个子句 ;i<;i++) { > ...

  5. android版微信5.2.1更新 支持微信聊天记录备份到电脑上

    昨天微信 5.2.1 for Android 全新发布了,和微信 5.2.1 for iPhone一样,支持拍照分享,可以把照片发送给多个朋友,最重要的一个更新是支持微信聊天记录备份到电脑(可以通过腾 ...

  6. 将Centos的yum源更换为阿里云源

    阿里云Linux安装软件镜像源 阿里云是最近新出的一个镜像源.得益与阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun. ...

  7. node.js安装cnpm 提高下载速度

    由于中国网络特殊的网络环境原因,国外部分网站访问速度很慢. 安装node.js时,使用npm 安装软件速度也很慢,可以使用阿里的cnpm来解决 官方网址:http://npm.taobao.org: ...

  8. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...

  9. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

  10. ACM - a + b Problem

    前几天看了ACM的第一题,映入眼帘的是一个“简单”的题目: 输入两个数,a,b 输出他们的和. 本着,此乃ACM的原则,便有了如下的思考: ACM的题目肯定很难,a+b,怎么可能直接printf,不行 ...