HTML学习（基础部分）

来源：互联网发布：跑步风衣推荐知乎编辑：程序博客网时间：2024/04/29 12:35

本文基于W3School的教程内容，摘取自认为的要点部分，进行梳理。

什么是HTML？

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

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML是一个标记语言（markup language）
标记语言是一套标记标签（mark tag），应该指的是标签构成语法

HTML标签

HTML标记标签通常简称为HTML标签（HTML tag）

标签是由尖括号<>括起来的关键词，比如<html>
标签通常成对出现，比如<html>和</html>
标签对中第一个称为开始标签，第二个是结束标签
开始和结束标签也被称为开放标签和闭合标签

标签参考手册：http://www.w3school.com.cn/tags/index.asp

一个网页的基本内容要包括如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>#浏览器显示body部分的内容</body></html>

基本实例

HTML 标题（Heading）是通过 <h1> - <h6>等标签进行定义的，会自动加行，
HTML 段落是通过 <p>标签进行定义的
HTML 链接是通过 <a>标签进行定义的，如<a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像是通过 <img> 标签进行定义的，如<img src="w3school.jpg" width="104" height="142" />

HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

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

HTML 提示：使用小写标签，长远发展

HTML属性

属性为 HTML 元素提供附加信息。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定，之前的<a>有所体现。

始终为属性值加引号，然后全部使用小写

HTML标题

在HTML中，标题很重要！！！
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后，记住上面那个就好了

注意注意

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题
搜索引擎使用标题为您的网页的结构和内容编制索引
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的
<hr />标签在 HTML 页面中创建水平线，可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解，

HTML文本格式化

这个链接表示的是一部分文本格式化的实例，http://www.w3school.com.cn/html/html_formatting.asp
主要需要了解的有：

<pre>标签，适合于计算机代码
<address>标签类似于统一的斜体
<abbr title="etcetera">etc.</abbr>和<acronym title="World Wide Web">WWW</acronym>用于鼠标放上去后的缩写和首字母缩写的完整显示
<blockquote>是长的引用，会插入换行和页边距，<q>是短的引用，不会有啥特殊呈现

HTML CSS

如何使用样式

外部样式表，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="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图像

图像标签和源属性

在 HTML 中，图像由 <img>标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" />

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
更多的实例参考这个链接：http://www.w3school.com.cn/html/html_images.asp

HTML链接

创建超级链接

<html><body><p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接，也就是本网站的路径。</p><p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p></body></html>

将图像作为链接

<html><body><p>您也可以使用图像来作链接：<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" />也就是将原本输入文本的地方换掉</a></p></body></html>

HTML 链接 - target 属性

下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
应该也可以定义在其他地方显示。

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
总结就是：点击的地方是href="#abcd"，前面可以加网址，显示的地方是href="abcd"，也就是建立了一个映射。

HTML表格

不多说，看代码：

<html><body>其实列是根据数据多少决定的，也就是td<p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p><h4>一列：</h4><table border="1"> #有border属性，设置边框<tr>  <td>self responsive</td></tr></table><h4>一行三列：</h4><table border="1"><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr></table><h4>两行两列：</h4><table border="1"><tr>  <td>100</td>  <td>200</td></tr><tr>  <td>400</td>  <td>500</td></tr></table></body></html>

更多的例子参考这个链接，需要注意的是frame框架的实现，这对应该有帮助：
http://www.w3school.com.cn/html/html_tables.asp

HTML列表

无序列表

还是看代码吧++

<html>也就是unordered和ordered<body><h4>一个无序列表：</h4><ul>  <li>咖啡</li>  <li>茶</li>  <li>牛奶</li></ul><p>一个有序列表</p><ol start="50">#这里可以决定其实数字，没有的话默认为1  <li>咖啡</li>  <li>牛奶</li>  <li>茶</li></ol></body></html>

HTML`<div>`和`<span>`

HTML块元素

“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
还是得配合CSS进行使用方有大作为。

HTML布局

使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。<div>和<table>都可以用于布局，但是后者设计的目的是为了呈现数据，所以要分清楚。
由于创建高级的布局非常耗时，使用模板是一个快速的选项。

HTML表单和输入

HTML 表单用于搜集不同类型的用户输入。

表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。

<form>...  input 元素...</form>

输入

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

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

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

<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>

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

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

HTML颜色

需要查看的话，点击这个链接http://www.w3school.com.cn/html/html_colors.asp

0 0