黑马程序员 C#基础_HTML入门

------- Windows Phone 7手机开发.Net培训、期待与您交流! -------

 

HTML(Hypertext Markup Language)超文本标签语言,是创建网页时使用的语言。

1、HTML简介

确切的说HTML不是一门编程语言,而是一种标记语言,与我们见到的C/C++/C#/JAVA等编程语言性质不一样。

HTML:网页的“源码”

HTML使用一套标记标签来来描述网页。

让我们先用一个例子来说明HTML的标记标签

<html>
<head>
<title>欢迎阅读本文档</title>
</head>
<body>
<h4><font color=blue>让我们大家一起来学习黑马的HTML教程<font><h4>
</body>
</html>

从上述源文件可了解到HTML的标记标签有许多种,其所起的作用也各不相同,主要用于标注各种元素的输出格式及方式。
在HTML中标记标签用符号“<”和“>”括起来

HTML标签通常是成对出现的,如:<html>和</html>

标签对中的第一个称为开始标签 第二个称为结束标签,同时也称为开放标签和闭合标签

 

2、HTML文档

我们所看到的每一个网页,其实质就是HTML源码通过工具(浏览器)“解释和执行”后所显示。

HTML文档包含HTML标签和纯文本。

 浏览器的作用是读取HTML 文档,并以网页的形式显示出它们。浏览器不会显示HTML 标签,而是使用标签来解释页面的内容。

 

3、基本的HTML标签

HTML标题是通过<h1>-<h6>标签进行定义的。如:

<h1>这是标题</h1>   
<h3>这是标题</h3>  
<h6>这是标题</h6>  

 

HTML 段落是通过 <p> 标签进行定义的。如:

<p>段落由此元素定义</p>

 

HTML 链接是通过 <a> 标签进行定义的。如:

<a href="http://www.edu.csdn.net">这是个链接 黑马程序员</a>

 

HTML 图像是通过 <img> 标签进行定义的。如:

<img src="http://edu.csdn.net/images/01.jpg" width="104" height="142" />

 

HTML表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。如:

<table border="1">
<tr>
<td>c语言</td>
<td>c++</td>
</tr>
<tr>
<td> C# </td>
<td>JAVA2</td>
</tr>
</table>


 4、HTML链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接就可以从一张页面跳转到另一张页面。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

①、通过使用 href 属性 - 创建指向另一个文档的链接,如:

<a href="url">Link text</a>

实例:

<a href="http://bbs.itheima.com/forum.php/">黑马程序员</a>

上面这行代码显示为:黑马程序员  点击这个超链接会把用户带到  黑马程序员  的首页。

5、HTML图像

通过使用 HTML,可以在文档中显示图像。

在 HTML 中,图像由 <img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

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

定义图像的语法是:

<img src="url" />

URL 指存储图像的位置。如果名为 "02.jpg" 的图像位于 http://edu.csdn.net/ 的 images 目录中,那么其 URL 为http://edu.csdn.net/images/02.jpg

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

6、HTML表格

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

<table border="1">
<tr>
<td>OPPO x907</td>
<td> 2698元   </td>
</tr>
<tr>
<td>OPPO x909</td>
<td>  2988元  </td>
</tr>
</table>

在浏览器中显示如下:


表格所涉及到的标签如下表:

7、列表

HTML 支持有序、无序和定义列表

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>JAVA</li>
<li>C#/NET</li>
</ul>

显示结果如下:

  • JAVA
  • C#/NET

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>JAVA</li>
<li>C#/NET </li>
</ol>

显示结果如下:

  1. JAVA
  2. C#/NET

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>C</dt>
<dd>C++</dd>
<dt>C#</dt>
<dd>JAVA</dd>
<dt>HTML</dt>
<dd>。NET</dd>
</dl>

显示结果为:

C
C++
C#
JAVA
HTML
。NET

8、HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

属性总是以名称/值对的形式出现,比如:name="value"

属性总是在 HTML 元素的开始标签中规定。

 


 

 

 




 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值