Web开发-HTML基础1

学校选修课的复习笔记

资料来自于www.w3school.com.cn

1.什么是HTML？

HTML的全程为Hyper Text Markup Language，即超文本标记语言

HTML不是一种编程语言，而是一种标记语言，使用标记标签(markup tag)来描述网页

2.HTML标签是什么？

HTML标签是用尖括号围起来的关键词，通常成对出现，格式为<...>和</...>，第一个标签为开始标签，也叫开放标签；第二个标签为结束标签，也称为闭合标签。

<html>
<body>
       <h1>这是我的标题</h1>
       <p>这是我的第一段</p>
</body>
</html>

<html>与</html>之间的内容描述网页，<body>与</body>之间的文本内容为可见的页面内容，<h1>和</h1>之间的文本被显示为标题，<p>和</p>之间的内容显示为段落。

一个网页为一个HTML文档，后缀名也为.html，浏览器的功能是读取文档，并用HTML标签来解释页面内容，并以网页的形式解释页面内容。

3.基本的HTML标签介绍

(1). HTML标题

标题是通过<h1>到<h6>定义的，他们会显示为粗体文字，并且h1字体最大，h6字体最小

注意：不要因为他们是粗体文字而使用，而仅当是需要标题再使用，需要粗体文字请使用其他HTML代码或CSS

(2).HTML段落

段落放在<p>与</p>之间，大部分浏览器缺省</p>也可以正常标注，但不要依赖这种做法

(3).HTML链接

<a href="www.csdn.net">这是一个链接</a>

将链接放在href参数后。

(4).HTML图像

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

<img src="apple.jpg" width="200" height="200">

图像的名称和尺寸是以属性的形式提供的。

4.HTML元素

在开始标签和结束标签之间的代码叫做HTML元素。若不写任何代码则为空白元素。HTML标签对大小写不敏感，但在未来的HTML版本中将开始强制小写。

5.HTML属性

HTML标签可以拥有属性，提供了有关标签的更多信息，例如<a>的href参数就为属性。

<h1 align="center">    //标题居中

<body bgcolor="yellow">    //背景颜色为黄色

<table border="1">    //定义表格边界

6.HTML水平线

<hr />可以创造一条水平线

<p>这是一段</p>
<hr />
<p>这是另一段</p>

7.HTML注释

有些会有条件注释：

<!--[if IE 8]>
   ......
<![endif]-->

8.换行

<br />可以在不创建新的段落的情况下进行换行

<html>
<body>
   <p>
   要换行<br />这样做<br />就可以了
   </p>
</body>
</html>

在绝大部分浏览器中<br>也使用正常，但在HTML未来版本中不允许使用没有结束标签的HTML元素

在显示页面时，浏览器会去除多余的行和空格，所有连续空格都会被算作为一个空格。

9.HTML样式

style属性用于改变HTML元素样式

在HTML4中，有若干属性和标签是被废弃的(Deprecated)，即在未来的HTML和XHTML中不再支持以下的属性和标签：

<center> <font> <basefont> <s> <strike> <u> align bgcolor color

请用style替代它们。

样例：背景颜色

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一段</p>

<h1 style="font-family:verdana">换字体的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">换字体的段落</p>

<h1 style="text-align:center">这是居中的标题</h1>

</body>
</html>

text-align代替了过去的align

10.HTML格式化

<html>
<body>
    <b>这个文字加粗</b>
    <br />
    <strong>这个文字也加粗</b>
    <br />
    <big>这个文字放大</big>
    <br />
    <em>这个文字是斜体</em>
    <i>这个文字也是斜体</i>
    <!--italic和bold仅仅表示文字样式 strong和emphasized表示文字更为重要 但界限很模糊-->
    <br />
    <small>这个文字很小</small>sup
    <br />
    这个文字有<sub>下标</sub>
    <br />
    这个文字有<sup>上标</sup>
</body>
</html>

<html>
<body>
   <pre>
       这是
       预格式文本
       它保留了      空格
       和换行
       pre标签很适合显示计算机代码
   </pre>

   <pre>
       for(int i=0;i<10;i++){
           System.out.println(i);
       }
   </pre>
</body>
</html>

<html>
<body>
   
<code>计算机代码</code>
<br />
<kbd>定义键盘码</kdb>
<br />
<samp>计算机代码样本</samp>
<br />
<tt>打字机代码</tt>
<br />
<var>变量代码</var>

<!--这些标签经常用于显示计算机代码-->
</body>
</html>

<html>
<body>

<address>
Written by<a href="mailto:[email protected]">Donald Duck</a>. <br />
</address>

</body>
</html>

<html>
<body>

<p>
   如果浏览器支持bi-directional override(BDO)，下一行会从右向左输出
</p>

<bdo dir="rtl">
从右向左输出
</bdo>

</body>
</html>

<html>
<body>
   这是长的引用：
   <blockquote>
    这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用
    这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用
    这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用这是长的引用
   </blockquote>

   这是短的引用
   <q>
   这是短的引用
   </q>

   <p>
   使用blockquote元素的话，浏览器会插入换行和外边距，而q元素则不会有特殊呈现。
   </p>
</body>
</html>

<html>
<body>

  <p><del>这一行会被划掉</del></p>
  <p><ins>这一行会有下划线</ins></p>


  <p><abbr title="World Health Organization">WHO</abbr>成立于1948年</p>

  <p><cite>《活着》</cite>是余华写的</p>

</body>
</html>

猜你喜欢