前端学习笔记——牛客网学习记录(2)_HTML基础：HTML元素、元素语法、HTML属性、HTML标签
二、HTML基础
HTML 文档由 HTML 元素定义。
开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br> 换行
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）
2.1.1、HTML 元素语法
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止
-
元素的内容是开始标签与结束标签之间的内容
-
某些 HTML 元素具有空内容（empty content）
-
空元素在开始标签中进行关闭（以开始标签的结束而结束）
-
大多数 HTML 元素可拥有属性
2.2、HTML属性
属性是 HTML 元素提供的附加信息。
-
HTML 元素可以设置属性
-
属性可以在元素中添加附加信息
-
属性一般描述于开始标签
-
属性总是以名称/值对的形式出现，比如：name="value"。
2.2.1、HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
2.2.2、HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
2.2.3、大多数 HTML 元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
2.3、HTML标签
2.3.1、常用标签
标签 描述
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!-- ... --> 定义注释
<p> 定义一个段落
<br> 插入单个折行（换行）
2.3.2、HTML 文本格式化标签
标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
2.3.3、HTML "计算机输出" 标签
标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
2.3.4、HTML 引文, 引用, 及标签定义
标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
2.4、HTML中head信息
1.4.1、HTML <head> 元素
2.4.2、HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
2.4.3、HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head> <base href="http://www.nowcoder.com/images/" target="_blank"> </head>
2.4.4、HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.4.5、HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head> <style type="text/css"> body { background-color:yellow } p { color:blue } </style> </head>
2.4.6、HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域。
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Nowcoder">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
2.4.7、HTML <script> 元素
<script> 标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。
2.4.8、HTML head 元素
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
2.5、HTML样式——CSS
2.5.1、CSS样式
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
一、内联样式- 在HTML元素中使用"style" 属性。
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
二、内部样式表 -在HTML文档头部 <head> 区域使用 <style> 元素 来包含CSS
当单个文件需要特别样式时，就可以使用内部样式表。你可以在`` 部分通过 `` 标签定义内部样式表:
<head> <style type="text/css"> body { background-color:yellow; } p { color:blue; } </style> </head>
三、外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件. 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.5.2、常用CSS样式
1、背景色属性（background-color）定义一个元素的背景颜色
2、通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font> 标签。
3、使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式
HTML 样式标签
标签 描述
<style> 定义文本样式
<link> 定义资源引用地址
2.6、HTML图像
使用<img>标签定义 HTML 页面中的图像， <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
<img>标签有两个必需的属性：src和alt。
（1）要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址, URL 指存储图像的位置。
（2）alt 属性用来为图像定义一串预备的可替换的文本。 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
<h2>Norwegian Mountain Trip</h2> <img border="0" src="x.png" alt="Pulpit rock" width="304" height="228">
HTML图像标签：
标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
2.7、HTML 表格
在HTML中，通过 <table> 标签来定义表格。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格标签：
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
2.8、HTML 列表
HTML 支持有序、无序和自定义列表。
(1)有序列表是一列项目，列表项目使用数字进行标记。 有序列表使用 <ol> 标签，每个列表项使用 <li> 标签。用type定义序列类型(数字、字母、罗马字母)
(2)无序列表也是一列项目，列表项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <ul> 标签，每个列表项使用 <li> 标签。用style中的list-style-type定义类型。
(3)自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。
HTML 列表标签：
标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
2.9、HTML区块
大多数 HTML 元素被定义为块级元素或内联元素。
（1）块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table> 。
（2）内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img> 。
HTML 可以通过 <div> 和 <span> 将元素组合起来。
2.9.1、HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。
<table> 元素的作用是显示表格化的数据。
2.9.2、HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器 。<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML分组标签：
标签 描述
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)
2.10、HTML布局
网页布局对改善网站的外观非常重要。
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用 div 或者 table 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
HTML 布局标签
标签 描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。
2.11、HTML 表单和输入
HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 `form` 来设置：
<form> input 元素 </form>
HTML 表单标签
标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
2.12、HTML 框架——内联框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
HTML内联框架元素 (iframe) 表示嵌套的
width 和 height 属性用来定义iframe标签的高度与宽度。
frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框。
iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性
2.13、HTML脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML <script> 标签:
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
HTML<noscript>标签：
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。
HTML 脚本标签
标签 描述
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本
2.14、HTML字符实体
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
虽然 html 不区分大小写，但实体字符对大小写敏感。
2.15、HTML 统一资源定位器（URL）
URL（Uniform Resource Locators） 是一个网页地址。
URL可以由字母组成，如"nowcoder.com"，或互联网协议（IP）地址： 114.55.207.244。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例:
http://www.nowcoder.com/html/html-tutorial.html
语法规则:
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型，最常见的类型是 http。
host - 定义域主机（http 的默认主机是 www）。
domain - 定义因特网域名，比如 nowcoder.com。
port - 定义主机上的端口号（http 的默认端口号是 80）。
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称。
常见的URL Scheme:
Scheme 访问 用于... http 超文本传输协议 以 http:// 开头的普通网页。不加密。 https 安全超文本传输协议 安全网页，加密所有信息交换。 ftp 文件传输协议 用于将文件下载或上传至网站。 file 您计算机上的文件。
URL 只能使用
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
2.16、XHTML
XHTML 是以 XML 格式编写的 HTML。
什么是 XHTML?
-
XHTML 指的是可扩展超文本标记语言
-
XHTML 与 HTML 4.01 几乎是相同的
-
XHTML 是更严格更纯净的 HTML 版本
-
XHTML 是以 XML 应用的方式定义的 HTML
-
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
-
XHTML 得到所有主流浏览器的支持
为什么使用 XHTML?
因特网上的很多页面包含了"糟糕"的 HTML。
如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：
<html> <head> <meta charset="utf-8"> <title>这是一个不规范的 HTML</title> <body> <h1>不规范的 HTML <p>这是一个段落 </body>
XML 是一种必须正确标记且格式良好的标记语言。
今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。
所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。
与 HTML 相比最重要的区别
文档结构
XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
<!DOCTYPE >是强制性的
XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。
<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。
XHTML 元素必须合理嵌套:
在 HTML 中，一些元素可以不互相嵌套，像这样：
<b><i>粗体和斜体文本</b></i>
在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：
<b><i>粗体和斜体文本</i></b>
XHTML 元素必须有关闭标签:
错误示例：
<p>这是一个段落
<p>这是另外一个段落
正确示例：
<p>这是一个段落</p>
<p>这是另外一个段落</p>
空元素必须包含关闭标签:
错误示例：
分行:<br>
水平线: <hr>
图片: <img src="happy.gif" alt="Happy face">
正确示例：
分行:<br />
水平线: <hr />
图片: <img src="happy.gif" alt="Happy face" />
XHTML 元素必须是小写:
错误示例:
<BODY>
<P>这是一个段落</P>
</BODY>
正确示例：
<body>
<p>这是一个段落</p>
</body>
属性名称必须是小写:
错误示例：
<table WIDTH="100%">
正确示例:
<table width="100%">
属性值必须有引号:
错误示例：
<table width=100%>
正确示例：
<table width="100%">
不允许属性简写:
错误示例：
<input checked>
<input readonly>
<input disabled>
<option selected>
正确示例：
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
如何将 HTML 转换为 XHTML:
添加一个 XHTML
浙公网安备 33010602011771号