首页 / HTML5 / HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5学习笔记（三）-HTML5样式,连接和表格代码详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6953字，纯文字阅读大概需要10分钟。

内容图文

left;">HTML样式

　　1, 标签:

<style>: 样式定义
　　<link>: 资源引用

　　2. 属性:

　rel="stylesheet": 外部样式表
　　type="text/css": 引入文档的类型
　　margin-left:边距

　　3. 三种样式表的插入方法

　　外部样式表:　　

　　<link rel="stylesheet" type="text/css" href="mystyle.css">

　　注: 外部样式表需要创建css文件, 右击工程目录 New->File, 命名为:MyStyle.css, 必须指定后缀名.

　　　　.html文件需与.css放在同一目录下.

　　代码示例:

　　HTML 代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="MyStyle.css"></head><body>
    <h1>标题h1</h1></body></html>

　　MyStyle.css 代码:

h1{
    color: red;
}

　　MyStyle.css的大括号内可以设置多个属性.

　　内部样式表:

　<style type="text/css">
　　body {background-color:red}
　　p {nargin-left:20px}
　　</style>

　　注: 内部样式的代码需放到head标签里面, style标签内可以设置多个属性.

　　代码示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        p {
            color: blueviolet;
        }
    </style></head><body>
    <P>欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P></body></html>

　　内联样式表:

　　<p style="color:red">

　　注:内部样式也可设置多个属性, 在双引号内多个属性以分号";"隔开

　　代码示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>样式</title></head><body>
    <P style="color: burlywood; margin-left: 20px">欢迎来到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
    </body>
    </html>

HTML连接

　　1. 连接数据:

　　文本连接

　　图片连接

　　2. 属性:

　　href属性: 只想另一个文档的连接

　　name属性: 创建文档内的连接

　　3. img标签属性:

　　alt: 替换文本属性, 当图片无法正常显示时, 显示alt属性所赋值的文字

　　width: 宽

　　height: 高

　　示例代码:

    
    连接
    
    点击我进入南心芭比的博客
    
        
        
    
    　　<!--name属性-->

hello        
 
跳转到hello

HTML表格

　　表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

　　表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

示例代码:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

　　练习:

　　1. 没有边框的表格:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

　　2. 表格中的表头:　　

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table border="1">
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table></body></html>

　　3. 空单元格:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <!--定义表格-->
    <table border="1">
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td></td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table></body></html>

　　4. 带有标题的表格

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body>
    <p>表格</p>
    <!--定义表格-->
    <table border="1">
        <!--带标题的表格-->
        <caption>重要表格</caption>
        <tr>
        <!--定义表头-->
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
        </tr>
        <!--定义表格的行-->
        <tr>
            <!--定义表格的单元-->
            <td></td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table></body></html>

　　5. 表格内的标签

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <tr>
        <td>
            表格1        </td>
        <td>
            表格2        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>apple</li>
                <li>bananer</li>
                <li>polo</li>
            </ul>
        </td>
        <td>
            我想吃        </td>
    </tr></table></body></html>

　　6. 单元格边距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <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="1" cellpadding="10">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

　　7. 单元格间距

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table border="1">
    <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="1" cellspacing="10">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

　　8. 表格内的背景颜色和图像

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title>
    </head>
    <body>
    <!--表格内的背景图像-->
    <table border="1" backgroud="http://popup.freep.cn/images/freepupload.jpg">
    <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="1" bgcolor="#ff7f50">
    <tr>
        <td>单元1</td>
        <td>单元2 </td>
        <td>单元3</td>
    </tr>
    <tr>
        <td>单元4</td>
        <td>单元5</td>
        <td>单元6</td>
    </tr></table></body></html>

　　9. 单元格内容排列

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><table width="400" border="1">
    <tr>
        <th align="left">消费项目....</th>
        <th align="right">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">$241.10</td>
        <td align="right">$50.20</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="right">$30.00</td>
        <td align="right">$44.45</td>
    </tr>
    <tr>
        <td align="left">食物</td>
        <td align="right">$730.40</td>
        <td align="right">$650.00</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <th align="right">$1001.50</th>
        <th align="right">$744.65</th>
    </tr></table></body></html>

　　10. 跨行和跨列单元格

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表格</title></head><body><h4>横跨两列的单元格：</h4><table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr></table><h4>横跨两行的单元格：</h4><table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr></table></html>

　　以上例子阅读者可复制到IntelliJ IDEA中试试.

以上就是HTML5学习笔记（三）-HTML5样式, 连接和表格代码详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的HTML5学习笔记（三）-HTML5样式,连接和表格代码详解全部内容，希望文章能够帮你解决HTML5学习笔记（三）-HTML5样式,连接和表格代码详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/388497.html

来源：【匿名】

【上一篇】HTML5学习笔记（四）-列表,块和布局代码实例【下一篇】html5如何获取php数据

更多 ►

【HTML5学习笔记（三）-HTML5样式,连接和表格代码详解】教程文章相关的互联网学习教程文章

HTML5学习笔记（四）：H5中表单新增元素及改良【代码】

方便布局表单内容可以放在表单标签之外，这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下，只要指定元素适用于哪个表单即可，如下：1<form id="test" action="test.php" method="get">2<input form="test" type="text" name="name"/>3</form>4<input form="test" type="submit" value="确定"/>可指定提交按钮的目标及方法在HTML5之前，一个表单只能填写一个action及一个method，在HTML5中每个提交按钮都可...

HTML5学习笔记(<command>,<details>,<dialog>)【代码】【图】

<command>　　目前，主流浏览器都不支持 <command> 标签。　　注释：只有 IE 9 支持 <command> 标签，其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。　　想要了解的可以去菜鸟教程查看。<details>　　目前，只有 Chrome 和 Safari 6 支持 <details> 标签。　　<details>需要和<summary>一起使用，<summary>同样是只有 Chrome 和 Safari 6 支持。例子：<details><summary>Copyright 1999-2011.</summary><p> - by Re...

cocos2d-html5学习笔记——创建持续性动作【代码】

学习笔记：仅作参考 cc.ScaleTo.create(duration, sx, sy)duration持续时间sx 横坐标大小比例sy 纵坐标大小比例RotateTo：将 cc.Node 对象旋转到一个特定的角度。 RotateBy：将 cc.Node 对象旋转一个特定的角度。使用cc.RotateTo.create(duration, deltaAngleX, deltaAngleY)和cc.RotateBy.create(duration, deltaAngleX, deltaAngleY)来创建动作。duration 运动周期，单位为s。deltaAngleX 水平旋转角度deltaAngleY 垂直旋转角度，...

HTML5学习笔记4【代码】

1、新增的主体元素结构　　aside元素：用来表示当前页面或文章的附属信息部分，主要有两种使用方法：　　（1）被包含在article元素中作为主要内容的附属信息部分。<!DOCTYPE html> <head> <meta charset="utf-8" > <title>aside元素实例</title> </head><body> <header><h1>F#入门</h1> </header> <article><h1>第四节词法闭包</h1><p>lambda表达式可以创建词法闭包...（文章正文）</p><aside><!--因为这个aside元素被放置在一个a...

html5学习笔记(4)【代码】

XHTML可扩展的超文本标记语言文档声明： DTD：html5与html4的区别html5新增的元素：结构元素：section ，article， aside， header，hgroup，footer, nav, figure其他元素： video，audio, canvas, input，元素类型：Email，全局属性：contentEditabledisignModehiddenspellchecktabindex<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h2>contentEditable</h2...

HTML5学习笔记（2）：input type file的特性【代码】【图】

一、 input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：<input type=file> 但是，为了习惯，我们多写成：<input type="file"> 在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：<input type="file" /> 顾名思义，选择文件，并上传文件。在HTML5还没有出现之前，原生的fileinput表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求，所以，很多场景，就...

HTML5学习笔记简明版（8）：新增的全局属性【代码】

contenteditable属性任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。例如：<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p> 该属于有3种值可选：true, false和空字符，空字符代表true。而对<iframe id="editor"></iframe>框架页面可以通过JS程序代码来实现：editor.document.designMode="on" 。 contextmenu属性 contextmenu属性用来指...

《HTML5与CSS3基础教程》学习笔记--FourDay_html/css_WEB-ITnose

第十六章 1、输入和元素电子邮件框搜索框电话框 <inputtype="tel">URL 框 <inputtype="url">以下元素得到了部分浏览器的支持日期数字范围数据列表下面的输入或者元素得到的支持很少， W3C 指出它们在 2014 年定案之时很可能不会列入 HTML5颜色全局日期和时间<inputtype="datetime" />局部日期和时间月时间周输出 2、属性： 1) accept限制用户可上...

HTML5学习笔记（一）-认识HTML5

什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 新规则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求（比如 Flash）更优秀的错误处理更多取代脚本的标记HTML5 应该独立于设备开发进程应对公众透明新特性HTML5 中的一些有趣的新...

HTML5学习笔记（二）-元素,属性,格式化具体介绍

HTML元素　　元素是指从开始标签到结束标签的所有代码.开始(开放)标签元素内容结束(闭合)标签<p>this is my web page</p>　　没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有...

HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

left;">HTML样式　　1, 标签:<style>: 样式定义<link>: 资源引用　　2. 属性:　rel="stylesheet": 外部样式表type="text/css": 引入文档的类型margin-left:边距　　3. 三种样式表的插入方法　　外部样式表:　　　　<link rel="stylesheet" type="text/css" href="mystyle.css">　　注: 外部样式表需要创建css文件, 右击工程目录 New->File, 命名为:MyStyle.css, 必须指定后缀名.　　　　.html文件需与.css放在同一目录下.　　代码示...

HTML5学习笔记（四）-列表,块和布局代码实例

HTML列表　　列表标签标签描述<ol>定义有序列表。<ul>定义无序列表。<li>定义列表项。<dl>定义定义列表。<dt>定义定义项目。<dd>定义定义的描述。<dir>已废弃。使用 <ul> 代替它。<menu>已废弃。使用 <ul> 代替它。常用的列表1. 无序列表使用标签: <ul>, <li>属性: disc, circle, square示例:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>聊表</title></head><body><!--disc 实...

Html5Canvas初探学习笔记(10)-复杂路径【图】

之前已经介绍过简单的绘制路径，本篇介绍绘制折线和贝塞尔曲线，首先介绍折线，效果如下：代码如下：context.beginPath(); context.moveTo(100,50); //context.lineTo(100,50); context.lineTo(150,150); context.lineTo(50,150); //context.closePath(); context.stroke();之前介绍过moveTo后接起点的横纵坐标，我试了一下，第一个是lineTo也可以，后面的lineTo就是从这个点到下一个点画一条直线，然后再以这个点为起点，在调line...

Html5Canvas初探学习笔记(11)-简易图片操作【图】

本篇介绍简易的图片操作，首先是简易的图片显示效果如下：就是把一张简单的jpg格式的图片显示在网页上，实现起来也非常简单，代码如下：var image = new Image(); image.src = "icon.jpg"; image.onload = function(){context.drawImage(image,50,50); }首先创建一个Image对象，然后把image对象的src属性设置为图片的相对路径，最后，重写onload方法，就是一旦图片加载完成则显示出来。下面介绍将我们所绘制的图形导出成图片，效果...

Html5Canvas初探学习笔记(12)-图片裁减和调整【图】

上一篇讲了图片的两种操作，读入和导出，而读入图片之后的画图片我们采用的是只有三个参数的drawImage，本篇将分别介绍5个参数，和9个参数的drawImage，其实最后一个函数很像j2me里面的drawRegion。首先介绍5个参数的可以调整图片大小的drawImage函数。首先来看如下效果：代码如下：var image = new Image(); image.src = "grossini.png"; image.onload = function(){ context.drawImage(image,50,50); context.drawImage(image,10...

HTML5 - 技术教程分类

HTML5 教程 HTML5 浏览器支持 HTML5 新元素 HTML5 Canvas HTML5 内联 SVG HTML5 MathML HTML5 拖放 HTML5 地理定位 HTML5 Video(视频) HTML5 Audio(音频) HTML5 表单元素 HTML5 表单属性 HTML5 语义元素 HTML5 Web 存储 HTML5 Web SQL HTML5 Web Workers HTML5 SSE HTML5 WebSocket html5 全部

HTML5 - 最热教程

html5代码如何实现进度条功能？（示例）HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...HTML5新增属性之拖拽属性（介绍）HTML5input新增type属性color颜色拾取器...Html5百叶窗效果的代码 html5开始播放当前的音频或视频的方法

首页 / HTML5 / HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML5学习笔记（三）-HTML5样式,连接和表格代码详解】教程文章相关的互联网学习教程文章

HTML5学习笔记（四）：H5中表单新增元素及改良【代码】

HTML5学习笔记(<command>,<details>,<dialog>)【代码】【图】

cocos2d-html5学习笔记——创建持续性动作【代码】

HTML5学习笔记4【代码】

html5学习笔记(4)【代码】

HTML5学习笔记（2）：input type file的特性【代码】【图】

HTML5学习笔记简明版（8）：新增的全局属性【代码】

《HTML5与CSS3基础教程》学习笔记--FourDay_html/css_WEB-ITnose

HTML5学习笔记（一）-认识HTML5

HTML5学习笔记（二）-元素,属性,格式化具体介绍

HTML5学习笔记（三）-HTML5样式,连接和表格代码详解

HTML5学习笔记（四）-列表,块和布局代码实例

Html5Canvas初探学习笔记(10)-复杂路径【图】

Html5Canvas初探学习笔记(11)-简易图片操作【图】

Html5Canvas初探学习笔记(12)-图片裁减和调整【图】

HTML5 - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程