HTML基础语法

html学习笔记1

  • 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>
<title>页面标题</title>
</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> 标签定义了文档与外部资源之间的关系,通常用于链接到样式表
<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 教程