HTML5学习从简单到复杂,循环渐进!

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博!

1.HTML格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <b>小韩哥博客更新了!hanjunqiang</b>
    <br/>
    <big>欢迎来到小韩哥的博客</big>
    <br/>
    <em>欢迎来到小韩哥的博客</em>
    <br/>
    <i>黄莺</i>
    <small>你好啊!!!哈哈哈哈</small>
    <br/>
    <strong>你好啊你哈皮</strong>
    <br/>
    大家好<sup>小韩哥</sup>很好
    <br/>
    大家好<sup>小韩哥</sup>很好
    <br/>
    <ins>大家好啊</ins>
    <br/>
    <del>你好才是真的好!</del>
</body>
</html>

效果如下:

2.HTML样式

创建一个css样式文件:mystyle.css

h1{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式引入方式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css”>//1外部引入样式表
    <style type="text/css”>// 2内部样式表
        p{
            color: indianred;
        }
    </style>
</head>
<body>
   <h1>标题h1</h1>
   <p>欢迎来到小韩哥的博客</p>
   <a href="http://www.baidu.com" style="color: blue" >点击我跳转到小韩哥的博客</a>  // 3内联样式表
</body>
</html>

效果如下:

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博!

3.HTML链接

1.就不多说了 文字链接,图片链接
2.属性看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.baidu.com">点击我</a>
    <a href="http://www.baidu.com">
        <img src="1.jpg" width="100px" height="100px" alt="html5logo">
    </a>
    <br/>
    <a name="tips">hello</a>
    <br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">跳转到hello</a>
</body>
</html>
3.文档内的链接 name属性

4.HTML表格

简单介绍:相对容易写一些:

<p>表格</p>
 <table border="2">
     <caption>重要表格</caption>
     <tr>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
     </tr>
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td></td>
         <td>单元格4</td>
         <td>单元格5</td>
     </tr>
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td>单元格3</td>
         <td>单元格4</td>
         <td>单元格5</td>
     </tr>
</table>

效果如下:

<table border="2">
    <tr>
        <td>表格1
        </td>
        <td>表格2
        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>我想吃了
        </td>
    </tr>
</table>

效果如下:

<table border="2">
<tr>
<td>单元1</td>
<td>单元2</td>
<td>单元3</td>
</tr>
<tr>
<td>单元4</td>
<td>单元5</td>
<td>单元6</td>
</tr>
</table>
<br/>
<table border="2" cellpadding="10" bgcolor="#f5f5dc">
<tr>
<td>单元1</td>
<td>单元2</td>
<td>单元3</td>
</tr>
<tr>
<td>单元4</td>
<td>单元5</td>
<td>单元6</td>
</tr>
</table>

效果如下:

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博!

iOS开发者/HTML5交流QQ群: 446310206  欢迎加入!

HTML5中 HTML格式化/HTML样式/链表/表格-样式 韩俊强的博客的更多相关文章

  1. iOS中 本地通知/本地通知详解 韩俊强的博客

    布局如下:(重点讲本地通知) iOS开发者交流QQ群: 446310206 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 Notification是智能手机应用编 ...

  2. iOS中崩溃调试的使用和技巧总结 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 在iOS开发调试过程中以及上线之后,程序经常会出现崩溃的问题.简单的崩溃还好说,复杂的崩溃就需要我们通过解析Cras ...

  3. iOS中 基于LBXScan库二维码扫描 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 首先声明这个二维码扫描是借助于zxing. 功能模块都完全封装好了,不过界面合你口味,直接使用就好,如果不合口味,后 ...

  4. iOS中 CocoaPods Mac App的安装和使用 韩俊强的博客

    CocoaPods Mac App的安装和使用 CocoaPods桌面应用版下载地址:https://cocoapods.org/app打开应用会提示你是否安装命令行工具,选择install就也可以在 ...

  5. iOS中 动态启动图GIF的简单设置 韩俊强的博客

    // 设定位置和大小 CGRect frame = CGRectMake(50,340,[UIScreen mainScreen].bounds.size.width / 2,[UIScreen ma ...

  6. iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 简单介绍: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 ...

  7. iOS中 HTTP/Socket/TCP/IP通信协议具体解释 韩俊强的博客

    简介: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 // 3. 会话层 // 4. 传输层 // 5. 网络层 // 6. 数据链接层 / ...

  8. iOS中 扫描二维码/生成二维码详解 韩俊强的博客

    最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

  9. iOS中 扫描二维码/生成二维码具体解释 韩俊强的博客

    近期大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

随机推荐

  1. 细胞(cell) 矩阵快速幂

    题目描述小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并观察细胞分裂的规律.他选取了一种特别的细胞,每天每个该细胞可以分裂出 x 1 个新的细胞.小 X 决定第 i 天向培养皿中 ...

  2. [bzoj1558][JSOI2009]等差数列

    题目:给定n个数,m个操作,每次给一段区间加一个等差数列或者询问一段区间至少要用多少个等差数列来表示.$n,m\leqslant 10^{5}$ 题解:老套路,维护差分数组,修改操作变成了两个单点加和 ...

  3. 主席树(BZOJ2653)

    考虑二分答案,设为k,将大于等于k的元素设为1,小于的设为-1,如果某一段的和>=0,说明这段的中位数>=k. 对于每组询问,二分完后查询新序列的最大子段和即可. 但是不能开n棵线段树,观 ...

  4. shell 报错:syntax error: unexpected end of file

    有时执行脚本时会报错: [root@host1 shell]# sh -x test.sh + $'\r' : command not found test.: syntax error: unexp ...

  5. 如何在Google上下载高清原图

    在我们学习和生活中常常一些高清图片作为相关的素材,比如制作PPT.写博文.制作视频都需要大量图片.我们常常会在百度上下载一些图片,但是百度上提供的图片存在很多问题:存在水印.清晰度不够等.而Googl ...

  6. Image中的alt

    如果图片不存在,默认会显示一个缺失图片,这是不友好的 所以可以加上alt属性. 当图片存在的时候,alt是不会显示的 当图片不存在的时候,alt就会出现 <img src="http: ...

  7. Map,HashMap,TreeMap

    一.HashMap,TreeMap差别 1.两种常规Map性能 HashMap:适用于在Map中插入.删除和定位元素. Treemap:适用于按自然顺序或自定义顺序遍历键(key). 2.总结 Has ...

  8. python显示中文出错以及抛出UnicodeDecodeError的处理办法

    程序开头粘贴如下代码即可: # -*- coding:utf-8 -*- import sys default_encoding = 'utf-8' if sys.getdefaultencoding ...

  9. Page Object设计模式实践

    Page Object模式是使用Selenium的广大同行最为公认的一种设计模式.在设计测试时,把元素和方法按照页面抽象出来,分离成一定的对象,然后再进行组织. Page Object模式,创建一个对 ...

  10. 转:禁止360随身wifi驱动自动安装

    from:http://bbs.360safe.com/thread-2643500-1-1.html 有曾经数次卸载随身wifi后,插上又会自动安装随身wifi驱动的,也可以看看下面的解决办法. 卸 ...