HTML-part1

最新推荐文章于 2024-09-26 17:23:00 发布

weixin_33795833

最新推荐文章于 2024-09-26 17:23:00 发布

阅读量72

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/gz369521/p/6862141.html

版权

HTML:

　　超文本标记语言通过标签语言来标记要显示的网页中的各个部分,一套浏览器认识的规则

　　浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.注意:对于不同的浏览器,同一标签可能会有不完全相同的解释(兼容性)

　　静态网页文件扩展名:.html或.htm

HTML标签格式:

　　<标签名属性1='属性值1' 属性2='属性值2' .....>内容部分</标签名>

　　<标签名属性1='属性值1' 属性2='属性值2' ...../>

<head>内常用标签:

　　<meta>标签:

　　　　<meta>元素可提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词

　　　　<meta>标签位于文档的头部,不包含任何内容

　　　　<meta>提供的信息是用户不可见的

　　meta标签的组成:meta标签共有两个属性,他们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

　　(1)name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

　　(2)http-equiv属性:相当于http的文件头作用,他可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值.

<body>内常用标签

<hn>:n的取值范围是1-6;从大到小.用来表示标题

<p>:段落标签.包裹的内容被换行,并且也上下内容之间有一行空白.

<b><strong>:加粗标签.

<strike>:为文字加上一条中线

<em>:文字变成斜体.

<sup>和<sub>:上角标和下角标.

<br>:换行.

<hr>:水平线

<div></div>:<div>只是一个块级元素,并无实际的意义.通过CSS样式为其赋予不同的表现.

<span></span>:<span>表示了内联行(行内元素),并无实际的意义,通过CSS样式为其赋予不同的表现

块级元素和行级元素的区别:

块元素,是另起一行开始渲染的元素,行内元素则不需另起一行.

图形标签:<img>

src:要显示图片的路径

alt:图片没有加载成功时的提示

title:鼠标悬浮时的提示

width:图片宽度

height:图片高度

超链接标签(锚标签):<a></a>

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序

列表标签:

　　<ul>:无需列表[type属性:disc(实心圆)(默认),circle(空心圆圈),square(实心方块)]

　　<ol>:有序列表

　　　　<li>:列表中的每一项

　　<dl>:定义列表

　　　　<dt>列表标题

　　　　<dd>列表项

表格标签:<table>

　　<table>

　　　　<tr>

　　　　</tr>

　　　　<tr>

　　　　</tr>

　　</table>

两个练习:

 1 <table border="2" align="center">
 2         <tr>
 3             <td colspan="3" align="center">星期一菜谱</td>
 4         </tr>
 5         <tr>
 6             <td rowspan="2" align="center">素菜</td>
 7             <td align="center">清炒茄子</td>
 8             <td align="center">花椒扁豆</td>
 9         </tr>
10             <td align="center">小葱豆腐</td>
11             <td align="center">炒白菜</td>
12         <tr>
13             <td rowspan="2" align="center">荤菜</td>
14             <td align="center">油焖大虾</td>
15             <td align="center">海参鱼翅</td>
16         </tr>
17             <td  height="140" width="200" s>红烧肉<img src="u=1484308958,3994699003&fm=214&gp=0.jpg" width="150" height="130"></td>
18             <td align="center">烤全羊</td>
19         </tr>
20 
21     </table>

 1 <p align="center">课程表</p>
 2     <table border="2" align="center">
 3         <tr>
 4             <td>项目</td>
 5             <td colspan="5" align="center">上课</td>
 6             <td colspan="2" align="center">休息</td>
 7         </tr>
 8         <tr>
 9             <td>星期</td>
10             <td>星期一</td>
11             <td>星期二</td>
12             <td>星期三</td>
13             <td>星期四</td>
14             <td>星期五</td>
15             <td>星期六</td>
16             <td>星期日</td>
17         </tr>
18         <tr>
19             <td rowspan="4">上午</td>
20             <td>语文</td>
21             <td>数学</td>
22             <td>英语</td>
23             <td>英语</td>
24             <td>物理</td>
25             <td>计算机</td>
26             <td rowspan="4">休息</td>
27         </tr>
28         <tr>
29             <td>数学</td>
30             <td>数学</td>
31             <td>地理</td>
32             <td>历史</td>
33             <td>化学</td>
34             <td>计算机</td>
35         </tr>
36         <tr>
37             <td>化学</td>
38             <td>语文</td>
39             <td>体育</td>
40             <td>计算机</td>
41             <td>英语</td>
42             <td>计算机</td>
43         </tr>
44         <tr>
45             <td>政治</td>
46             <td>英语</td>
47             <td>体育</td>
48             <td>历史</td>
49             <td>地理</td>
50             <td>计算机</td>
51         </tr>
52         <tr>
53             <td rowspan="2">下午</td>
54             <td>语文</td>
55             <td>数学</td>
56             <td>英语</td>
57             <td>英语</td>
58             <td>物理</td>
59             <td>计算机</td>
60             <td rowspan="2">休息</td>
61         </tr>
62         <tr>
63             <td>数学</td>
64             <td>数学</td>
65             <td>地理</td>
66             <td>历史</td>
67             <td>化学</td>
68             <td>计算机</td>
69         </tr>
70     </table>