HTML学习笔记4

最新推荐文章于 2022-03-01 11:08:03 发布
最新推荐文章于 2022-03-01 11:08:03 发布
阅读量87 收藏
点赞数
原文链接：http://www.cnblogs.com/chickenwrap/p/10064444.html
版权

定义图像的语法是：

<img src=" url" alt=" some_text">
 

<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

一个图像: Smiley face

一个动图: Computer man

注意插入动图的语法和静态图的语法是一样的。

 

 

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

 

 

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

 

 

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

 

 

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

 

 

HTML 表格

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

表格实例

实例

<table border="1">
　　<tr>
　　　　<td>row 1, cell 1</td>
　　　　<td>row 1, cell 2</td>
　　</tr>
　　<tr>
　　　　<td>row 2, cell 1</td>
　　　　<td>row 2, cell 2</td>
　　</tr>
</table>

在浏览器显示如下：:

 

 

 

 

<h4>水平标题:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</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>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>

 

 

 

<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

 

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</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>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

 

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

 

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

 

转载于:https://www.cnblogs.com/chickenwrap/p/10064444.html

weixin_34293911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html学习笔记4
cwj1103
07-22 805
超链接：  1 标签       语法：     链接文字     例子： 百度一下就知道  2.超链接target属性    语法 链接文字          target属性的值。       _self 默认方式，即在当前窗口打开链接 _blank 在一个全新的空白窗口中打开链接 _top 在顶层框架中打开链接 _parent 在当前框架的上一层里打开
HTML5学习笔记
qq_42359563的博客
03-01 394
HTML5基础（读书笔记） 一、网页的构造快 1.一个页面主要包括以下三个部分： 文本内容(text content) 对其他文件的引用(references to other files) ：加载图像、视频、音频文件，以及样式表和JavaScript文件。 标记(mark) ###基本的HTML页面 &lt;!DOCTYPE html&gt; /*页面声明为HTML文档*/ &lt;htm...
HTML学习笔记
weixin_40695088的博客
03-01 688
HTML学习笔记 1.简介 HTML 指的是超文本标记语言:HyperTextMarkupLanguage。HTML 不是一种编程语言，而是一种标记语言（标记语言是一套标记标签(markup tag)） <!DOCTYPE html>声明为 HTML5 文档 <html>元素是 HTML 页面的根元素 <head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8...
html基础
Angle727的博客
06-02 2809
HTML基础 1.声明定义文档类型 这是html5后更改的，但是现在基本适用，不适用考虑之前html声明格式即可 2.在头部进行声明 定义网站编码 有的浏览器定义编码为gbk，如360浏览器。 如果出现网页乱码，要考虑: a.网页源代码编码与中文字输入编码不同-尽量使用代码编辑器，不要用Windows笔记本 b.网页设计编码与数据库存储编码不同-这个时候程序查询数据库数据显示数据前，进行程序转码即可。 c.浏览器造成乱码-在IE9浏览器中需要转码的网页空白出右键鼠标，即可选择“编码”。 傲游浏览器中浏
HTML5中已经废弃属性等代替方案
冰点信息
07-14 7182
https://www.w3.org/html/ig/zh/wiki/HTML5/obsolete 以下的属性皆已废弃（虽然它们仍然是此语言中的一部分），请不要继续使用： a元素的charset属性 link元素的charset属性 在链接到的源上使用HTTP Content-Type头来替代 a元素的coords属性 a元素的shape属性 为image maps使用area来替代...
html5知识一两点
u013712343的博客
05-18 150
1. 2. 3. 4. <hr />标签在HTML页面中创建水平线。 5. 6. 关于标题大小与字体大小的关系？1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。 7. 8. 9.
HTML DOM教程 26-HTML DOM Image 对象
weixin_34247032的博客
05-04 156
HTML DOM Image 对象   　　1:Image 对象 　　Image 对象代表一幅嵌入的图像。 　　&lt;img&gt; 标签每出现一次，一个 Image 对象就会被创建。 　　2:Image 对象的属性 属性 描述 IE F O W3C align 设置或...
HTML学习笔记pdf版
07-19
HTML 学习笔记简介 1. 概述 HTML（HyperText Markup Language，超文本标记语言）是用于创建和结构化网页内容的标准语言。它定义了网页中的各种元素和其布局方式，包括文本、图像、链接、表格等。 2. 基本结构 ...
html学习笔记.zip
04-05
介绍了html中代码格式和常用标签 #HTML格式 * `<!DOCTYPE html>`---------*注明文件使用格式* `<html lang="en">`--------*注明网页使用语言 en-英语 zh-CN-中文* `<head>`--------*头部* `...
一些html的学习笔记
01-03
通过自学w3cschool上的html知识和上课所学的一些html知识，然后使用markdown汇总，整理的一些笔记
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
html学习笔记
06-22
1.属性，hidden 属性是布尔属性。 注释：在 XHTML 中，属性简写是禁止的，hidden 属性必须定义为 。2.事件
HTML基础语法最全总结(会持续修改添加)
小白的程序猿
04-06 766
包含最基本的HTML语法和常用元素,属性的举例.
HTML5替代文本属性,5.2 不要使用HTML5中已废弃的标签和属性
weixin_29717341的博客
06-04 448
5.2　不要使用HTML5中已废弃的标签和属性HTML5的规范中除了新添加了标签和属性以外，也有部分原有标签和属性从标准中移除。移除的标签按照移除原因可以分为以下3类。(1)标签仅仅是为了设置外观，没有任何语义，而且这些标签可以使用CSS代替涉及的标签包括：、、、、和。标签定义文档中默认字体颜色、大小。因为目前只有IE支持此标签，所以应该避免使用。使用全局的CSS样式则可以达到相同的效果。标签设置...
HTML5新增的属性和废除的属性
weixin_34177064的博客
02-19 151
HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input（type=text）、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。 对input（type=text）、textarea指定placeholder属性，它会对用户的输入进行提示，提示用户...
1203GMT-VB一种N-Channel沟道DFN8(5X6)封装MOS管
07-20
1203GMT-VB；Package：DFN8(5X6)；Configuration：Single-N-Channel；VDS：30V；VGS：20（±V）；Vth：1.7V；RDS(ON)=9mΩ@VGS=4.5V；RDS(ON)=7mΩ@VGS=10V；ID：80A；Technology：Trench；
Solid Edge 2024是顶级的3D建模程序，用于生成、建模和规划出色的3D模型
07-20
注意：文件为BT文件。Solid Edge 2024是顶级的3D建模程序，用于生成、建模和规划出色的3D模型。它是一个可靠的工具，使用户能够在流畅的工作环境中创建各种复杂和详细的设计，并非常注重细节。它是一套全面且功能齐全的工具集，为专业人士提供了他们进行高效建模和零件制造所需的所有详细信息。这个优秀的应用程序允许你进行快速、灵活的设计修改，强大的组件管理，以及轻松整合多CAD数据。它还提供改进的结构和热模拟，包括快速热移动。此外，它可以直接用于复杂组件的布局，如电线、梁、传输线等项目。它允许专业人士在同一个协作设计平台上处理并发和传统的结构组件。你也可以下载Altair SimSolid 2024。
鲍威尔法C语言鲍威尔法C语言
最新发布
07-20
c语言，鲍威尔法C语言
java基于ssm+vue安全教育平台系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值