首页 > 代码库 > HTML基础篇

HTML基础篇

2024-09-15 19:02:35   216人阅读

  • 一、简单介绍

  • 什么是 HTML？

    HTML 是用来描写叙述网页的一种语言。

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言，而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描写叙述网页

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    • HTML 标签是由尖括号包围的关键词，比方 <html>
    • HTML 标签一般是成对出现的。比方 <b> 和 </b>
    • 标签对中的第一个标签是開始标签，第二个标签是结束标签
    • 開始和结束标签也被称为开放标签和闭合标签

    HTML 文档 = 网页

    • HTML 文档描写叙述网页
    • HTML 文档包括 HTML 标签和纯文本
    • HTML 文档也被称为网页

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

    <html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

    样例解释

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

  • 二、基础

  • HTML 标题

    HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

    实例

    <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

    HTML 段落

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

    实例

    <p>This is a paragraph.</p>
<p>This is another paragraph.</p>

    HTML 链接

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

    实例

    <a href="http://www.w3school.com.cn">This is a link</a>

    凝视：在 href 属性中指定链接的地址。

    （您将在本教程稍后的章节中学习很多其它有关属性的知识）。

    HTML 图像

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

    实例

    <img src="http://www.mamicode.com/w3school.jpg" width="104" height="142" />

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


  • 三、元素

  • HTML 元素语法

    • HTML 元素以開始标签起始
    • HTML 元素以结束标签终止
    • 元素的内容是開始标签与结束标签之间的内容
    • 某些 HTML 元素具有空内容（empty content）
    • 空元素在開始标签中进行关闭（以開始标签的结束而结束）
    • 大多数 HTML 元素可拥有属性


  • 四、属性

  • HTML 属性

    HTML 标签能够拥有属性。属性提供了有关 HTML 元素的很多其它的信息。

    属性总是以名称/值对的形式出现，比方：name="value"。

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


  • 五、标题


  • HTML 标题

    标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

    <h1> 定义最大的标题。<h6> 定义最小的标题。


  • HTML 水平线

    <hr /> 标签在 HTML 页面中创建水平线。

    hr 元素可用于分隔内容。


  • HTML 提示 - 怎样查看源码

    您一定以前在看到某个网页时惊叹道 “WOW! 这是怎样实现的？”

    假设您想找到当中的奥秘。仅仅须要单击右键，然后选择“查看源文件”（IE）或“查看页面源码”（Firefox），其它浏览器的做法也是类似的。

    这么做会打开一个包括页面 HTML 代码的窗体。


  • 六、段落


  • HTML 段落

    段落是通过 <p> 标签定义的。

    不要忘记加上</p>




  • 七、格式化


  • 八、编辑器

  • 使用 Notepad 或 TextEdit 来编写 HTML

    能够使用专业的 HTML 编辑器来编辑 HTML：

    • Adobe Dreamweaver
    • Microsoft Expression Web
    • CoffeeCup HTML Editor

    只是。我们同一时候推荐使用文本编辑器来学习 HTML。比方 Notepad (PC) 或 TextEdit (Mac)。

    我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。


  • 九、样式


  • 怎样使用样式

    当浏览器读到一个样式表，它就会依照这个样式表来对文档进行格式化。有下面三种方式来插入样式表：

    外部样式表

    当样式须要被应用到非常多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就能够通过更改一个文件来改变整个网站的外观。

    <head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
</head>

    内部样式表

    当单个文件须要特别样式时，就能够使用内部样式表。你能够在 head 部分通过 <style> 标签定义内部样式表。

    <head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

    内联样式

    当特殊的样式须要应用到个别元素时，就能够使用内联样式。

    使用内联样式的方法是在相关的标签中使用样式属性。

    样式属性能够包括不论什么 CSS 属性。下面实例显示出怎样改变段落的颜色和左外边距。

    <p style="color: red; margin-left: 20px">
This is a paragraph
</p>

  • 十、链接


  • HTML 超链接（链接）

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

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

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

    有两种使用 <a> 标签的方式：

    1. 通过使用 href 属性 - 创建指向还有一个文档的链接
    2. 通过使用 name 属性 - 创建文档内的书签

  • HTML 链接 - name 属性

    name 属性规定锚（anchor）的名称。

    您能够使用 name 属性创建 HTML 页面中的书签。

    书签不会以不论什么特殊方式显示，它对读者是不可见的。

    当使用命名锚（named anchors）时，我们能够创建直接跳至该命名锚（比方页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们须要的信息了。

    命名锚的语法：

    <a name="label">锚（显示在页面上的文本）</a>

    提示：锚的名称能够是不论什么你喜欢的名字。

    提示：您能够使用 id 属性来替代 name 属性，命名锚相同有效。


  • 十一、图像


  • 图像标签（<img>）和源属性（Src）

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

    <img> 是空标签，意思是说，它仅仅包括属性，而且没有闭合标签。

    要在页面上显示图像。你须要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。



  • 十二、表格


  • 表格

    表格由 <table> 标签来定义。每一个表格均有若干行（由 <tr> 标签定义），每行被切割为若干单元格（由 <td> 标签定义）。

    字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包括文本、图片、列表、段落、表单、水平线、表格等等。

    <table border="1">
<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>

    在浏览器显演示样例如以下：

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    表格和边框属性

    假设不定义边框属性。表格将不显示边框。

    有时这非常实用。可是大多数时候，我们希望显示边框。

    使用边框属性来显示一个带有边框的表格：

    <table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

    表格的表头

    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本：

    <table border="1">
<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>

    在浏览器显演示样例如以下：

    Heading Another Heading
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    表格中的空单元格

    在一些浏览器中。没有内容的表格单元显示得不太好。假设某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

    <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

    浏览器可能会这样显示：

    技术分享

    注意：这个空的单元格的边框没有被显示出来。为了避免这样的情况。在空单元格中加入一个空格占位符，就能够将边框显示出来。

    <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

    在浏览器中显演示样例如以下：

    row 1, cell 1 row 1, cell 2
      row 2, cell 2


  • 十三、列表


  • 无序列表

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

    无序列表始于 <ul> 标签。

    每一个列表项始于 <li>。


    有序列表

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

    有序列表始于 <ol> 标签。

    每一个列表项始于 <li> 标签。


  • 定义列表

    自己定义列表不不过一列项目，而是项目及其凝视的组合。

    自己定义列表以 <dl> 标签開始。

    每一个自己定义列表项以 <dt> 開始。每一个自己定义列表项的定义以 <dd> 開始。


  • 十四、块


  • HTML 块元素

    大多数 HTML 元素被定义为块级元素或内联元素。

    编者注：“块级元素”译为 block level element。“内联元素”译为 inline element。

    块级元素在浏览器显示时，一般会以新行来開始（和结束）。

    样例：<h1>, <p>, <ul>, <table>

    HTML 内联元素

    内联元素在显示时通常不会以新行開始。

    样例：<b>, <td>, <a>, <img>

    HTML <div> 元素

    HTML <div> 元素是块级元素，它是可用于组合其它 HTML 元素的容器。

    <div> 元素没有特定的含义。

    除此之外，因为它属于块级元素。浏览器会在其前后显示折行。

    假设与 CSS 一同使用。<div> 元素可用于对大的内容块设置样式属性。

    <div> 元素的还有一个常见的用途是文档布局。

    它代替了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确使用方法。

    <table> 元素的作用是显示表格化的数据。

    HTML <span> 元素

    HTML <span> 元素是内联元素。可用作文本的容器。

    <span> 元素也没有特定的含义。

    当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。


  • 十五、布局


  • 站点布局

    大多数站点会把内容安排到多个列中（就像杂志或报纸那样）。

    能够使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

    提示：即使能够使用 HTML 表格来创建美丽的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！


  • HTML 布局 - 实用的提示

    提示：使用 CSS 最大的优点是，假设把 CSS 代码存放到外部样式表中，那么网站会更易于维护。

    通过编辑单一的文件。就能够改变全部页面的布局。

    提示：因为创建高级的布局非常耗时，使用模板是一个高速的选项。

    通过搜索引擎能够找到非常多免费的站点模板（您能够使用这些预先构建好的站点布局。并优化它们）。



  • 十六、表单


  • 表单

    表单是一个包括表单元素的区域。

    表单元素是同意用户在表单中（比方：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

    表单使用表单标签（<form>）定义。


  • 输入

    多数情况下被用到的表单标签是输入标签（<input>）。

    输入类型是由类型属性（type）定义的。

    大多数常常被用到的输入类型例如以下：

    文本域（Text Fields）


  • 当用户要在表单中键入字母、数字等内容时。就会用到文本域。

    <form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

    浏览器显演示样例如以下：

    First name:  
    Last name: 

    注意。表单本身并不可见。

    同一时候。在大多数浏览器中。文本域的缺省宽度是20个字符。

    单选button（Radio Buttons）

    当用户从若干给定的的选择中选取其一时，就会用到单选框。

    <form>
<input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male
<br />
<input type="radio" name="sex" value="http://www.mamicode.com/female" /> Female
</form>

    浏览器显演示样例如以下：

     Male 
     Female

    注意，仅仅能从中选取其一。

    复选框（Checkboxes）

    当用户须要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

    <form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

    浏览器显演示样例如以下：

     I have a bike 
     I have a car

    表单的动作属性（Action）和确认button

    当用户单击确认button时，表单的内容会被传送到还有一个文件。

    表单的动作属性定义了目的文件的文件名称。由动作属性定义的这个文件一般会对接收到的输入数据进行相关的处理。

    <form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="http://www.mamicode.com/Submit" />
</form>

    浏览器显演示样例如以下：

    Username:  

    假如您在上面的文本框内键入几个字母，然后点击确认button，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。


  • 十七、框架


  • 框架

    通过使用框架，你能够在同一个浏览器窗体中显示不止一个页面。每份HTML文档称为一个框架，而且每一个框架都独立于其它的框架。

    框架结构标签（<frameset>）
    • 框架结构标签（<frameset>）定义怎样将窗体切割为框架
    • 每一个 frameset 定义了一系列行或列
    • rows/columns 的值规定了每行或每列占领屏幕的面积

    主要的注意事项 - 实用的提示：

    假如一个框架有可见边框，用户能够拖动边框来改变它的大小。为了避免这样的情况发生，能够在 <frame> 标签中增加：noresize="noresize"。

    为不支持框架的浏览器加入 <noframes> 标签。

    重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同一时候使用！

    只是，假如你加入包括一段文本的 <noframes> 标签。就必须将这段文字嵌套于 <body></body> 标签内。


    十八、内联框架


  • 加入 iframe 的语法

    <iframe src="http://www.mamicode.com/URL"></iframe>

    URL 指向隔离页面的位置。

    Iframe - 设置高度和宽度

    height 和 width 属性用于规定 iframe 的高度和宽度。

    属性值的默认单位是像素，但也能够用百分比来设定（比方 "80%"）。


  • 使用 iframe 作为链接的目标

    iframe 可用作链接的目标（target）。

    链接的 target 属性必须引用 iframe 的 name 属性：

    实例

    <iframe src="http://www.mamicode.com/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>


  • 十九、背景


  • 背景（Backgrounds）

    <body> 拥有两个配置背景的标签。

    背景能够是颜色或者图像。

    背景颜色（Bgcolor）

    背景颜色属性将背景设置为某种颜色。属性值能够是十六进制数、RGB 值或颜色名。

    <body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

    以上的代码均将背景颜色设置为黑色。

    背景（Background）

    背景属性将背景设置为图像。属性值为图像的URL。假设图像尺寸小于浏览器窗体。那么图像将在整个浏览器窗体进行复制。

    <body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

    URL能够是相对地址。如第一行代码。也能够使绝对地址，如第二行代码。

    提示：假设你打算使用背景图片，你须要紧记一下几点：

    • 背景图像是否添加了页面的载入时间。小贴士：图像文件不应超过 10k。

    • 背景图像是否与页面中的其它图象搭配良好。

    • 背景图像是否与页面中的文字颜色搭配良好。
    • 图像在页面中平铺后。看上去还能够吗？
    • 对文字的注意力被背景图像喧宾夺主了吗？

    主要的注意事项 - 实用的提示：

    <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

    应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。


HTML基础篇


联系
我们