html学习笔记

HTML是用来描述网页的一种超文本标记语言，一个HTML文档包含了HTML 标签及文本内容。标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页。

HTML的标签与元素

HTML 标签

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>，标签对中的第一个标签是开始标签，第二个标签是结束标签，成对的标签只对包含在其中的文本发生作用
具体语法如下：

<标签名称>文本内容</标签名称>

HTML 元素

我们将从开始标签到结束标签的所有代码称为HTML5元素。
例如，这个<p>元素定义了HTML5文档中的一个段落，这个元素拥有一个开始标签<p>和一个结束标签</p>.

<p>具体的文本内容</p>

在HTML5的语法中，每个由HTML5标签与文字所形成的元素内，还可以包含另一个元素。整个HTML5文件就像一个大元素包含了许多小元素。

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使
在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML属性

HTML元素可以设置属性信息，属性一般描述于开始标签，且属性值应该始终被包含于引号内
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="https://zhenhuizhang.tk.com">这是一个链接</a>

HTML基本文件结构

一个常见的HTML5文件的基本结构如下所示，< head> 与< /head>之间的元素是html5文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性；<body>和</body>是文件的主体部分，我们要实现的功能大部分是在这两个标签间实现的。

<!DOCTYPE html>
<html>             //文件开头
    <head>        //文件头
        <meta charset="utf-8">  //声明编码格式
        <title>渣渣晖的Blog(zhenhuizhang.tk)</title> //文件标题
    </head>     //文件头结束
    <body>       //文件体
        <h1>我的第一个标题</h1>    //body为文件主题部分
        <p>我的第一个段落。</p>
    </body>    //文件体结束
</html>         //文件结束

<html>

<head>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
如我们常用的HTML5的声明方式如下：

<!DOCTYPE html>

文件开始标签<html>

在任何一个html文件里，最先出现的html标签就是< html>,它是用于标识该文件是以HTML编写的，文件中所有文件内容都包含在< html>和 < /html>之间。该标签不带任何属性。虽然现在常用的web浏览器都可以自动识别html文件，但是还是应该养成使用这个标签的好习惯。

文件头部标签<head>

html文件可分为文件头和文件主体两部分。文件主体部分就是在web浏览器窗口的用户区内看到的内容。而文件头部分用来规定该文件的标题（出现在web浏览器窗口的标题栏中）和文件的一些属性。它包含文件的标题、编码方式及url等信息，用于提供索引、辨认或其他方面的应用。
如果文本写在< title>标签中，则表示该网页的名称作为窗口的名称显示在这个网页窗口的最上方。（如果html文件不需要提供相关信息时，可以省略< head> 标签。）

文件标题标签<title>

网页的名称写在< title>和< /title>之间，< title>标签应包含在< head>和< /head>标签之中。

元信息标签<meta>

meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个html头页面中可以有多个mata元素，meta元素的属性有两种：name 和 http-equiv，其中，name属性主要用于描述网页，以便搜索引擎机器人查找、分类。

页面主体标签<body>

元素包含了可见的页面内容，在网页的主体标签中有很多属性的设置

页面的注释

HTML文件中有三种注释方式，具体如下：

<!--注释文字-->
/*注释文字*/
//注释文字

HTML标题

在 HTML 文档中，标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。\ <h6> 定义最小的标题。

<h1>这是一级标题。</h1>
<h2>这是二级标题。</h2>

HTML水平线

使用<hr />可在页面中创建水平线，可用于分隔内容

<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>

HTML 段落

段落是通过 <p> 和</p>标签定义的。浏览器会自动地在段落的前后添加空行

<p>这是一个段落 </p>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），可使用 <br/> 标签：

HTML文本格式化

<b> 加粗 </b>
<i> 斜体 </i>
<small> 小号字体 </small>
<sub> 下标字体 </sub>
<sup> 上标字体 </sup>
<ins> 下划线字体 </ins>
<del> 删除字体 </del>
<code> 计算机代码 </code>

HTML链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接的定义语法如下，其中，href 属性描述了链接的目标。

<a href="url">链接文本</a>

HTML头部

HTML的<head>元素包含了所有的头部标签元素。在 <head>元素中可以插入的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<title> 元素

<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素定义了浏览器工具栏的标题，当网页添加到收藏夹时，显示在收藏夹中的标题

<base> 元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<head>
<base href="http://zhenhuizhang.tk" target="_blank">
</head>

<link> 元素

<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<meta> 元素

<meta>标签描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析,通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">

HTML图像

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

<img src="url" alt="some_text">

URL属性

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

ALT属性

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML表格

表格由 <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="2">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

效果如下：

Row 1, cell 1

Row 1, cell 2

## 表格表头 - 表格的表头使用标签进行定义。大多数浏览器会把表头显示为粗体居中的文本

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

效果如下：

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

HTML列表

HTML 支持无序、有序列表。

无序列表

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

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 /
来设置。

<form>
    input 元素
</form>

文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

密码字段

密码字段通过标签<input type="password"> 来定义。

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<input type="radio"> 标签定义了表单单选框选项

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

复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

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

参考资料：
HTML 教程

[HTML]HTML基础语法

HTML的标签与元素

HTML 标签

HTML 元素

HTML空元素

HTML属性

HTML基本文件结构

<!DOCTYPE> 声明

文件开始标签<html>

文件头部标签<head>

文件标题标签<title>

元信息标签<meta>

页面主体标签<body>

页面的注释

HTML标题

HTML水平线

HTML 段落

HTML 折行

HTML文本格式化

HTML链接

HTML头部

<title> 元素

<base> 元素

<link> 元素

<meta> 元素

HTML图像

URL属性

ALT属性

设置图像的高度与宽度

HTML表格

表格边框属性

HTML列表

无序列表

有序列表

HTML 表单

文本域

密码字段

单选按钮

复选框

感谢您的支持，我会继续努力的!