HTML 常用标签2

span 标签

对、、这三个标签进行一下总结：

和标签是为了强调一段话中的关键字时使用，它们的语义是强调。
标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把上一段诗中的朝代和作者设置成red（red红色），但注意不是为了强调这个，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对朝代和加重音读出），所以这样情况下就可以用到标签了。

如下面例子：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
<style>
span{
 color:red;   
}
</style>
    <body>
       <h1>水调歌头·丙辰中秋</h1>
<pre>
<span>朝代：宋代
作者：苏轼</span>
<strong>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</strong>

明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
<em>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</em>
<pre>
    </body>
</html>

HTML字符实体

空格：代表一个半角空格。一个汉字是2个字节。1个字节相当于1个半角空格。

<：<

>：>

&：&

￥：¥

×：$times;

÷：$divide;

通过实例，会看的更加清楚

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <font size="4">
    双十一快到了&nbsp;&nbsp;&nbsp;&nbsp;
    推荐大家去淘宝上多买点书，这本&lt;PHP高级程序设计：模式、框架与测试&gt;
    只要10&yen;
     </font>
    </body>
</html>

注：一定要加上“;”符号，不然识别不出来

HTML列表

HTML项目符号(无序列表)

网页中的列表随处可见，比如新闻页面随处可见这样的列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

下面，我们来实现这样的效果

语法：

内容1
内容2
内容3

ul 或 li 的常用属性

type：项目符号的类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ul type="square">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委：进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li>

</ul>
    </body>
</html>

注：在HTML标记中，内容应该放在最底层标记中。

HTML编号列表(有序列表)

网站之中还有这样的列表

这类信息展示就可以使用

语法：

……
……
……

ol 或 li 的常用属性

type：编号类型，取值：1、a、A、i、I
start：从第几个开始编号(数字)。

改造上面一个例子：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ol type="1" start="1">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委：进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查：为学界名声</li>

</ol>
    </body>
</html>

图片标记

图片标签

注：这是一个单边标签

在网页中，随处可见图片的踪影

基本上每个网页都有图片

接下来，我们来使用<img>标签给我们自己的网页加上图片

语法格式：<img 属性 = “值”>

常用属性

Width：图片宽度
Height：图片高度
Border：图片边框粗细。
Src：图片的路径(相对路径)
Align：图片的水平对齐方式，取值：left、center、right
Hspace：图片与左右文字之间的距离(水平距离)
Vspace：图片与上下文字之间的距离(垂直距离)。

注意事项

如果图片想等比例缩放，只需要指定width或height其中一个。
Align属性只能让文本居中，不能让图片单独居中。
Align可以实现“图文混排”效果。align = “left | right”
来看个实例：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <p>Life was like a box of chocolates, you never know what you're gonna get.（生命就像一盒巧克力，结果往往出人意料。）---《阿甘正传》 
 </p>
 <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center">
 </body>
</html>

meta 标签

http-equiv属性

功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。
http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。

（1）设置网页的字符集

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

这个我们在前面的例子中已经接触过很多次了

（2）网页自动刷新

<meta http-equiv="refresh" content="2">   //每隔2秒钟，自动刷新网页一次
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">   //2秒钟后，跳转到百度

来看个实例

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="refresh" content="2;url=http://www.baidu.com">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <h2>希望你能够在这里学的开心</h2>
    </body>
</html>

name属性

name属性主要用于设置网页的搜索关键字、版权信息、作者等。

来看一个网站的搜索结果

（1）第一部分为设置网页搜索关键字

<meta name="keywords" content="小猪cms,pigcms,微信公众平台源码,微信分销,微信开发,微信o2o源码..." />

（2）第二部分为设置网页描述信息

<meta name="description" content="小猪cms是国家高新技术企业,双软认证企业,资深微信开发专家,提供微信营销系统,o2o系统,微信分销,微信应用号源码程序,公司客户遍布世界各地”>

表格标签

网页中有类似word里面的功能，当然，也会有类似excel里面的功能，表格就是其中之一

表格的结构

<table>
	<tr>

       <td></td>

       <td></td>

       <td></td>

       <td></td>

   </tr>
    <tr>

       <td></td>

       <td></td>

       <td></td>

       <td></td>

   </tr>
</table>

table 属性

Width：表格宽度，单位可以是百分比，也可以是固定值。
Height：表格高度。
Align：表格水平对齐方式，取值：left、center、right
Border：边框粗细。
Bordercolor：边框颜色。
bgColor：表格背景色。
background：背景图片URL。
cellpadding：单元格边线到内容间的距离(填充距离)
cellspacing：单元格与单元格之间的距离(间距)
rules：合并单元格边框线，取值：all

注意：rules兼容性不好，请使用CSS来取代它。

我们来实际画一个表格

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

tr 属性——行标记

bgColor：行的背景色
height：行的高度
align：行中的文本水平居中，取值：left、center、right
valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)

td 或 th 属性

<td>是普通单元格，<th>是标题单元各，居中加粗显示。

width：单元格宽度
height：单元格高度
bgColor：单元格背景色
background：单元格背景图片
align：水平对齐
valign：垂直水齐
rowspan：上下单元格合并。合并属性必须放在第一个单元格中。
colspan：左右单元格合并。合并时，有增就得有减，要保证每一行单元格的个数不变。

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

注：属性是区分大小写的，bgColor如果写成bgcolor是没有效果的

caption标签

为表格添加标题和摘要

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>    <caption>标题文本</caption>   <tr>       <td>…</td>       <td>…</td>       …   </tr>…</table>

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

XHTML简介

XHTML简介

传统的HTML开发的初衷是面向pc机的，而随机移动终端的不断出现，HTML已经满足不了市场的需求了。

XHTML是新一代的HTML标注语言。
XHTML的目的是为了取代HTML。
XHTML的标记，与HTML一模一样。
XHTML的语法要比HTML严格的多。
XHTML可扩展超文本标注语言。

XHTML编写规范

所有的标记和属性要全小写
单边标记必须关闭。如：
——>
所有的属性值都必须要加引号。
所有的属性都必须有值。如：
——
标记之间要顺序嵌套，外层套内层，一层套一层。
XHTML网页必须要有DTD文档类型定义代码。

注：希望大家以后书写HTML时，尽量严格按照XHTML编写规范来编写

DTD文档类型定义

DTD文档类型定义的目的：是一种验证机制，也就是说检验一下你写的XHTML标记语法是否合法。

DTD一共有三大类型：

严格型、过度型、框架型

严格型的DTD

在严格型的DTD中，不能再使用各种表现的标记。如：、、

要求必须使用CSS来取代各种表现标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡型的DTD

在过渡型的DTD中，可以继续使用HTML中的表现的写法。

这些表现标记，还可以继续使用。如：、、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

框架的DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

posted @ 2022-05-18 11:28 ppqppl 阅读(38) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ppqppl

HTML 常用标签2

HTML 常用标签2

span 标签

HTML列表

HTML项目符号(无序列表)

语法：

ul 或 li 的常用属性

HTML编号列表(有序列表)

语法：

ol 或 li 的常用属性

图片标记

常用属性

注意事项

meta 标签

http-equiv属性

name属性

表格标签

table 属性

tr 属性——行标记

td 或 th 属性

caption标签

XHTML简介

XHTML编写规范

DTD文档类型定义

严格型的DTD

过渡型的DTD

框架的DTD

公告