HTML5基本标签、样式
感觉在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基本标签、样式的更多相关文章
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 盒子模型，定位技术，负边距，html5 新增标签
盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 如何处理HTML5新标签的兼容性问题
支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...
- html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- 解决html5中标签出现的不兼容的问题
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- html5常用标签table表格布局
html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...
随机推荐
- VTK初学一，b_PolyVertex多个图形点的绘制
#ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...
- 1、Java背景、标示符、运算符、转义字符
一.Java平台: 1.Java的创建:1991年由SUN公司创建. 2.Java的特点:面向对象.可移植性.多线程.分布式.可靠.安全. 3.Java的三个架构:JavaEE.JavaSElect. ...
- Android手机如何通过USB共享网络给Mac？
最近网络挂了,mac不能上网查资料,心情非常毛躁,急切寻求用mac蹭WiFi的方法. 没有找到电脑端破解WiFi密码的软件,手头的Android手机没有root,也无法查看WiFi密码--->破 ...
- Unity 视频播放杂谈
http://www.cnblogs.com/zsb517/p/4060814.html 背景: 游戏机中想加入舞蹈元素,最先的想法是开发舞蹈游戏,然后通过动画来表现舞蹈,给用户提供舞蹈教学 ...
- C++关键字:mutable（转）
参考:http://blog.csdn.net/hxz_qlh/article/details/14475573 修饰成员变量,在const成员函数中可修改它,在C++中还从未用过这个关键字.
- 遍历json对象---Java
Iterator iterator = a.keys(); while(iterator.hasNext()){ String key = (String) iterator.next(); Stri ...
- minigui交叉编译整理
简介 MiniGUI 是一款面向嵌入式系统的高级窗口系统(Windowing System)和图形用户界面(Graphical User Interface,GUI)支持系统,由魏永明先生于 1998 ...
- NDK学习二: NDK目录结构
NDK目录结构 NDK下载好之后目录结构如下: 目录名 描述 build 存放和编译相关的脚本文件,最外面的ndk-build就是调用该目录下的makefile文件,其中mak ...
- WebRTC
WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Globa ...
- 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...