NCC-79601 Captain's Log

NCC-79601 Captain's Log

To boldly go where no one has gone before.

【退役生活】HTML 学习笔记

posted on 2020-02-06 21:03:42 | under 退役生活 |

HTML 笔记

基本语法

结构

下面是一个简单的 HTML 例子:

<!DOCTYPE html>
<!--我是注释-->
<html>
    <head>
        <meta charset='utf-8'>
        <!--meta 包含元数据-->
        <title>
            test
        </title>
        <!--title 描述文档标题-->
    </head>
    <body>
        <h1>
            标题
        </h1>
        <p>
            第一段
        </p>
        <p>
            第二段
        </p>
        <p>
            第三段
        </p>
    </body>
    <!--body 描述可见页面信息-->
</html>

元素

HTML 文档由 元素 定义,其基本格式为:

<标签>
    内容
</标签>

或着写为一行也可以,例如:

<标签>内容</标签>

开始标签称为 起始标签,结束标签称为 闭合标签。 其实标签和闭合标签的唯一区别在于斜杠 /

由于大小于号被拿去作标签标识符,所以 HTML 中的大小于号分别为 &lt;&gt;

没有任何内容的元素叫做空元素,其格式为:

<标签 />

例如:

<br />

属性

元素可以具有属性,例如 HTML 链接:

<a href="www.bing.com">必应</a>

属性的值应该被包括在双引号内(单引号也可以,但建议使用双引号)。属性的顺序没有强制要求。

属性 描述
class 定义类名(用于 CSS)
id 定义元素编号
style 规定行内样式
title 描述额外信息

基本元素

标题

标题通过 <h1><h6> 标签定义。例如:

<h1>我是标题</h1>
<h6>我是最小的标题</h6>

分割线

<hr />
<!--horizontal rule-->

换行符

<br />
<!--blank rule-->

格式化

<b>粗体字</b>
<i>斜体字</i>
<em>着重文字</em>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入字(下划线)</ins>
<del>删除字</del>
<code>代码</code>
<var>公式字</var>

链接

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

ID 属性可以实现书签的功能,例如:

<a id="begin">开始</a>
<a href="#begin">跳转到开始</a>

点击链接就会跳转到“开始”元素所在的地方。

头部

<head> 元素包含了所有头部标签元素,定义了整个 HTML 文档的行为。一般 <head> 元素的内容不会显示在页面中。

头部子元素 描述
<title> 文档的标题
<base> 所有 url 的默认地址
<meta> 文档元数据
<link> 文档与外部资源间的关系
<style> 样式文件引用地址
<script> 脚本文件

<title> 元素<title> 元素不仅可以显示文本,也可以显示图片。 显示时,还要在 <head> 中添加 <link> 标签。例如:

<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>

<base> 元素:描述了基本的链接地址或链接目标,该标签作为 HTML 文档中所有的链接标签的默认链接。例如:

<base href="//somewhere.com/" target="_blank">

如果在下面添加一个图片和一个链接:

<img src="pic.jpg" />
<br />
<a href="//somewhere.com">链接地址</a>

则 HTML 会自动将图片的地址补全为 //somewhere.com/pic.jpg,且点击地址会自动在新窗口打开,因为 base 元素已经作出了定义。

<link> 元素<link> 用于定义文档与外部资源之间的关系,通常用于链接到样式表,例如:

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

<meta> 元素<meta> 元素提供了元数据。元数据会被浏览器解析,用于搜索引擎、浏览器行为等等。

例如:

<meta name="keywords" content="几何, 代数">
<!--为搜索引擎定义关键词-->
<meta name="description" content="数学知识">
<!--为网页添加描述-->
<meta name="author" content="ncc79601">
<!--定义作者-->
<meta http-equiv="refresh" content="30">
<!--每 30 秒自动刷新-->

图片

定义图片的格式为:

<img src="url" alt="图片无法加载">

src 属性定义了图片的 url,alt 属性定义了图片加载不出来的时候应该显示的替换信息。

同时,图片的高度和宽度也可以自定义,例如:

<img src="url" alt="picture" height="1920" width="1080">

图片所处的位置可以自定义,例如:

<img src="url" alt="picture" style="float:right">

这个图片会悬浮在文本右侧。

同时,利用 <map> 标签可以创建图像映射(可点击区域),例如:

<img src="planets.gif" width="150" height="100" alt="planets" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

可以看出,<map> 中的 <area> 标签定义了图片可供点击的区域,以及点击后的行为。<area> 元素的属性定义如下:

形状 代码
矩形 shape="rect" coords="x1, y1, x2, y2"
圆形 shape="circle" coords="x, y, r"
多边形 shape="poly" coords="x1, y1, x2, y2..."

border 属性可以为图片添加边框,例如:

<img src="url" alt="picture" border="5" style="float:right">

图片也可以创建链接,只需要把图片放到 <a> 标签里就可以了。

表格

表格以 <tabel> 标签开头,后可以跟以下属性:

属性 描述
border 边框线宽
cellspacing 单元格间距
cellpadding 单元格边距

<caption> 标签描述标题,每一行以 <tr> 标签开头,每一单元格以 <td> 标签开头,表头以 <th> 标签开头。每个单元格也可以添加 colspan 属性,代表跨几个单元格。例如:

<table border="1">
    <!--此处可添加标题-->
    <tr>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

显示效果为:

1 2
A B
C D

当然,此处无法把边框显示出来。

列表

HTML 支持有序、无序和定义列表。列表支持相互嵌套。

有序列表:使用 <ul>(unordered list)标签,列表的每一项用 <li> 标签(list item)。例如:

<ul>
    <li>max</li>
    <li>annie</li>
</ul>

显示为:

  • max
  • annie

有序列表:使用 <ol>(ordered list)标签。例如:

<ol>
    <li>max</li>
    <li>annie</li>
</ol>

显示为:

  1. max
  2. annie

自定义列表:使用 <dl>(defined list)标签;每个列表项用 <dt> 开始,每个定义以 <dd> 开始。例如:

<dl>
    <dt>max</dt>
    <dd>- a boy</dd>
    <dt>annie</dt>
    <dd>- a girl</dd>
</dl>

显示为:

max

  • a boy

annie

  • a girl

内联与区块

块级元素:对于块级元素,浏览器显示时会以新行开始,例如 <h1> 元素。

<div> 元素是块级元素;而 <span> 元素是内联元素。两者皆无特定含义,但可用于组合其他元素(分组),方便 CSS 设置样式属性。

表单和输入

表单是一个包含表单元素的区域,用户可以在表单元素中输入内容。格式为:

<form>
    <!--表单元素-->
</form>

一般表单元素的格式为:

<input type="type" name="name" value="val">

表单元素的属性不会直接显示。

文本域:最简单的输入框。type 属性为 "text"value 属性为默认文本(提示用户输入内容)。例如:

First name:<input type="text" name="firstname">

密码域:输入时不会明文显示,而是用星号或者原点替代。type 属性为 passwordvalue 属性为默认文本。例如:

Password:<input type="passwrod" name="pwd">

单选按钮:顾名思义。type 属性为 radiovalue 属性为选项值。例如:

<input type="radio" name="sex" value="boy">boy
<br />
<input type="radio" name="sex" value="girl">girl

复选框:顾名思义。type 属性为 checkboxvalue 属性为选项值。例如:

<input type="checkbox" name="phone" value="nokia"> Nokia
<br />
<input type="checkbox" name="phone" value="xperia"> Xperia

提交按钮:顾名思义。type 属性为 submitvalue 属性为提交按钮上的文字。

按下提交按钮后,表单的内容会被传送到另一个文件以作后续处理。在 <form> 标签添加属性可以定义提交按钮按下后的行为。例如:

<form name="survey" action="html_form_action.php" method="get">
    Username:<input type="text" name="user">
    <br />
    Password:<input type="password" name="pws">
    <br />
    <input type="submit" Value="Login">
</form>

重置按钮:顾名思义。type 属性为 resetvalue 属性为重置按钮上的文字。

按钮:顾名思义。type 属性为 buttonvalue 属性为按钮上的文字。

和提交按钮一样,其行为也被 <form> 标签的属性定义。例如:

<form action="">
    <input type="botton" value="OK">
</form>

当然还有很多其他的表单元素,需要用到时可以查询。

框架

框架元素支持在 HTML 中显示另外一个页面。标签为 <iframe>。例如:

<iframe src="//www.bing.com" frameborder="0" height="200" width="300"></iframe>

这里 不能用 <iframe ... /> 的写法,我也不知道为什么。

同时,还可以让一个超链接显示在 iframe 中,例如:

<iframe src="//www.bing.com" name="iframe_1"></iframe>
</br>
<a href="//www.bilibili.com" target="iframe_1">点击一下跳转到 Bilibili</a>

脚本

涉及到 JavaScript 相关内容。脚本以 <script> 标签开始,<noscript> 定义无法运行脚本时显示的信息。JavaScript 常用于动态内容更新等。


没学 CSS 和 JavaScript 的前提下,HTML 的基础内容就已经学完了。搭建一个上世纪的页面应该还是能做到的吧。