初识HTML

最新推荐文章于 2025-07-28 18:31:30 发布

mylovestart

最新推荐文章于 2025-07-28 18:31:30 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/mylovestart/article/details/8583516

HTML 专栏收录该内容

3 篇文章

订阅专栏

HTML是超文本标记语言,是用于描述网页文档的一种标记语言

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等),浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位,但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果

HTML的基本结构式是<元素属性=’属性值’……>内容</元素>

HTML中的字体标签font,字体属性如下

看下例, 定义浏览器输出的尺寸和类型

<html>
<head>
<title>Welcome</title>
</head>
<body>
This is a paragraph
<!--br表示换行-->
This is a paragraph</br>
<!--b表示加粗-->
<b>This is a paragraph</b></br>
<!--p表示段落的换行-->
<p>This is a paragraph</p>
<font size="3" color="red" face="Verdana">This is a paragraph</font></br>
</body>
</html>

HTML中的字符实体

一些字符在HTML中拥有特殊的含义,比如小于号(<)用于定义HTML标签的开始,如果我们希望浏览器正确地显示这些字符,我们必须在HTML源码中插入字符实体

字符实体有三部分:一个和号(&),一个实体名称,或者#和一个实体编号,以及一个分号(;)

HTML中的链接

HTML使用<a>(锚)标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源:一张HTML页面,一幅图像,一个声音或视频文件等等

创建锚的语:<a href="url">Text to be displayed</a>

<a>用来创建锚,href 属性用于定位需要链接的文档,锚的开始标签和结束标签之间的文字被作为超级链接来显示

使用Target属性,你可以定义被链接的文档在何处显示,target="_blank”即为在新窗口打开文档, target="_self”表示替换当前页面

HTML中的图像

图像由<img>标签定义,<img>是空标签,意思是说它只包含属性,并且没有闭合标签

要在页面上显示图像,你需要使用源属性scr,src指source,源属性的值是图像的URL地址

定义图像的语法是: <img src="url" />

下面说下使用HTML创建表格

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

表格标签

下面举几个例子

<html>
<head>
<title>Welcome</title>
</head>
<body>
****字符实体案例****<br/>
<font size="7"> ©&</font><br/>
****超链接案例****<br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
****图片元素案例****<br/>
<img src="monkey.jpg" width=170th>
<!--border是加边框-->
<img src="monkey.jpg" width=170th border=5><br/>
<!--图片还可以其他网页的图片-->
<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"><br/>
****表格案例****<br/>
<table border="1" align="center" bgcolor="yellow" width=500px>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>
</body>
</html>

网页打开如图