HTML入门笔记

HTML结构

1
2
3
4
5
6
7
8
<html>
<body>
<h1>Title</h1>
<p>This is text.</p>
<h2>Sub-Title</h2>
<p>This is text.</p>
</body>
</html>

body

这个元素中的所有内容都会显示在浏览器的主窗口中。

body元素前面,包含这个页面的信息。

title

head元素中的title元素,显示在浏览器的顶端。

特性

1
<p lang="en-us">Paragraph in English</p>

文本

标题

六个级别:h1、h2、h3、h4、h5、h6

段落

<p>

粗体

<b>

斜体

<i>

上标

<sup>

下标

<sub>

空白

当浏览器遇到两个或以上的连续空格时,只将其显示为一个空格,这一特性成为白色空间折叠

换行符

<br />

水平符

<hr />

语义化标记

不影响网页结构,却为所在页面添加了额外信息。

  • <strong>元素:加粗
  • <em>元素:表明重点
  • <blockquote>元素:表明引用

缩写词和首字母缩写词

  • HTML4:缩写词:<abbr>;首字母缩写词:<acronym>
  • HTML5:均采用<abbr>

引文

<cite>

定义

<dfn>

设计者详细信息

<address>

内容的修改

  • <ins>:通常带有下划线
  • <del>:通常带有删除线

列表

有序列表

1
2
3
4
<ol>
<li></li>
<li></li>
</ol>

无序列表

1
2
3
4
<ul>
<li></li>
<li></li>
</ul>

定义列表

  • <dt>用来包含被定义的术语
  • <dd>用来包含定义
1
2
3
4
5
6
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

嵌套列表

1
2
3
4
5
6
7
8
9
<ul>
<li>Text1</li>
<li>Text2
<ul>
<li>Text2.1</li>
<li>Text2.2</li>
</ul>
</li>
</ul>

链接

链接是由<a>元素建立的,用户可以点击位于起始标签和结束标签之间的任何内容。使用href特性来指定要链接到的页面。

1
<a href="http://www.imdb.com">IMDB</a>

指向其他网站的链接

采用绝对URL。

指向同一网站中其它页面的链接

采用相对URL。

  • 相同的文件夹:href="reviews.html"
  • 子文件夹:href="music/listings.html"
  • 父文件夹:href="../index.html"

EMAIL链接

1
<a href="mailto:jon@example.org">Email Jon</a>

在新窗口打开链接

1
<a href="http://www.imdb.com" target="_blank">Internet Movie Database</a>

链接到当前页面的某个特定位置

1
2
3
<h1 id="top"></h1>
<p></p>
<a href="#top">Top</a>

链接到其他页面的某个特定位置

1
<a href="http://www.htmlandcssbook.com/#bottom"></a>

图像

添加图像

1
<img src="images/qukka.jpg" alt="说明" title="附加信息" />
  • height:像素为单位指定图像的高度(现在交给CSS)
  • width:像素为单位指定图像的宽度(现在交给CSS)

图像格式

  • JPEG:当图片包含多种不同的颜色
  • PNG、GIF:当图像中包含少量的颜色或者大面积的同色区域

图像大小

在保存网站中所使用的图像时,它的宽度和高度应该与你希望它在页面中显示的大小保持一致。

图像的衡量和分辨率

采用像素来衡量,因为显示在计算机屏幕的图像由称为像素的小方块构成。屏幕的分辨率就是每英寸的屏幕上所容纳的像素数,在大多数计算机上,这个数值是可以提高或降低的。

如果一个屏幕的分辨率设置为640像素*480像素,然后将分辨率提高为1024像素*768像素,屏幕上显示的图像和文本将变小,这是因为在同样大小的空间内显示了更多的像素。

矢量图像

  • 创建:通过在网格上设置关键点并绘制这些点之间的线条来完成,然后就可以在已经创建的线条上填充颜色。
  • SVG:可伸缩矢量图形

HTML5:图形和图形说明

1
2
3
4
5
<figure>
<img>
<br />
<figcaption></figcaption>
</figure>
  • figure:包含图像以及对图像的说明
  • figcaption:让网页设计人员给图像添加说明

表格

表格结构

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
  • tr:每行的起始
  • td:每个单元格

表格的标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
<th></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="raw"></th>
<td></td>
<td></td>
</tr>
</table>
  • th:表示列或行的标题(table heading)
  • scope特性:表明此元素是列标题还是行标题

跨列/行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
<tr>
<th></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="raw"></th>
<td colspan="2"></td>
</tr>
</table>
  • colspan:跨列
  • rawspan:跨行

长表格

  • thead:标题所在元素
  • tbody:主体部分
  • tfoot:脚注所在元素

表单

表单结构

1
2
3
<form action="http://www.example.com/subscribe.php" method="get">
<p></p>
</form>
  • action:服务器一个页面的URL,这个页面用来在用户提交表单时接收表单中的信息。
  • method
    • get:表单上的值附加在action特性所指定的URL末尾,适用于短表单、检索数据
    • post:表单上的值被放在HTTP头部信息进行发送,适用于上传文件、非常长、包含敏感信息、向数据库添加/删除信息

单行文本框

1
2
3
4
<form action="http://www.example.com/subscribe.php" method="get">
<p>Username:<input type="text" name="username" size="15" maxlength="30" />
</p>
</form>
  • <input>元素用来创建多种不同的表单控件,其type特性的值决定它将要创建哪种控件。
  • type="text":创建一个单行文本框
  • name:这个特性值对表单控件进行标识
  • size:指定文本框的宽度
  • maxlength:限制用户在文本区域输入字符的数量

密码框

  • type="password":类似单行文本框,但是字符被掩盖

文本域(多行文本框)

1
2
3
4
<form action="http://www.example.com/subscribe.php" method="get">
<p></p>
<textarea name="comments" cols="20" rows="4"></textarea>
</form>
  • <textarea>:与其他input元素不同,<textarea>元素并非空元素,因此它包含起始标签和结束标签。
  • cols、rows现在应该使用CSS来控制

单选按钮

1
<input type="radio" name="genre" value="pop" />
  • name:这个问题的所有单选按钮的name特性值都应该相同
  • value:被选中时要发送到服务器的值

复选框

1
<input type="checkbox" name="service" value="itunes" checked="checked">

下拉列表框

1
2
3
4
<select>
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
</select>

文件上传域

1
2
3
4
5
<form action="http://www.example.com/subscribe.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
  • <form>元素上的method特性值必须设置为post。
  • type="file"这个类型的input会创建一个后面附有Browse按钮的类似文本框的控件。
  • type="submit"提交按钮用来将表单发送到服务器。value特性用于控制按钮上显示的文本。

图像按钮

使用图像作为提交按钮。

1
2
3
4
5
<form action="http://www.example.com/subscribe.php" method="get">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg" />
</form>

按钮和隐藏控件

1
2
3
4
<form action="http://www.example.com/subscribe.php" method="get">
<button><img src="images/add.gif" alt="add" /> Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
</form>
  • 引入<button>元素是为了让用户更好地控制按钮的显示方式,并且允许其他元素出现在<button>元素内。
  • type="hidden"表示隐藏表单控件,这类控件不会显示在页面上。

标签表单控件

每个表单控件最好使用相应的<label>元素来代替简单的文本。

  • 用法一:将文本说明和表单输入框全部包围起来
1
<label>Age: <input type="text" name="age" /></label>
  • 用法二:与表单控件分开,使用for特性来指明<label>元素所关联的表单控件
1
2
<label for="female">Female </label>
<input id="female" type="radio" name="gender" value="f" />

组合表单元素

1
2
3
4
5
6
7
8
9
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
  • <fieldset>:将置于其中的相关的表单控件分成一组
  • <legend>:直接跟在起始标签<fieldset>后面并且包含一个标题

HTML5控件

  • 表单验证:增加了一个required特性
  • 日期控件:<input type="date" name="depart" />
  • 电子邮件:<input type="email" name="email" />
  • URL输入:<input type="url" name="website" />
  • 搜索输入控件:<input type="search" name="search" />

其他标记

DOCTYPE(文档类型)

因为HTML存在多个版本,因此每个网页的开头都应该用一个DOCTYPE声明来告诉浏览器此页使用了HTML的哪个版本。

HTML5:

1
<!DOCTYPE html>

HTML中的注释

1
<!-- -->

id特性

每个HTML元素都可以附带id特性,id特性用来从页面中的其他元素中对一个元素进行唯一标识。

注意:在一个页面中,没有哪两个元素的id特性值是相同的!

class特性

每个HTML元素都可以附带一个class特性,有时候你希望有一种方法可以指定多个元素并将这些元素和页面上的其他元素区分出来。

块级元素

有些元素在浏览器窗口中显示时总是另起一行,这些元素被称为块级元素

块级元素的实例:

  • <h1>
  • <p>
  • <ul>
  • <li>

内联元素

有些元素在显示时总是与它的邻近元素出现在同一行内,这些元素被称为内联元素

内联元素的实例:

  • <a>
  • <b>
  • <em>
  • <img>

将文本和元素集中在一个块级元素中

<div>元素允许你将一组元素集中到一个块级元素内。

在浏览器中,<div>元素的内容会另起一行显示,但除了这一点,它不会使页面的呈现有什么不同。

将文本和元素集中在一个内联元素中

1
<p>Anish Kapoor won the Turner Prize in 1991 and exhibited at the <span class="gallery">Tate Modern</span> gallery in London in 2003.</p>

<span>元素就像是<div>元素的内联版本。人们使用<span>元素最常见的原因就是可以利用CSS来控制<span>元素中的内容的外观。

内嵌框架

<iframe>这一术语是inline frame(内嵌框架)的缩写。在网页中嵌入Google地图是内嵌框架的一种常用方式。内嵌框架中的内容可以是任何html页面。

<iframe>的几个特性:

  • src:指定要在框架中显示的页面的URL
  • height:指定内嵌框架高度的像素值
  • width:指定内嵌框架宽度的像素值
  • scrolling(HTML5不再支持):表明是否在内嵌框架上显示滚动条
  • frameborder(HTML5不再支持):表明是否显示框架的边框
  • seamless(HTML5的新特性):应用在不希望出现滚动条的地方

页面信息

<meta>元素位于<head>元素中并包含着所在页面的相关信息。<meta>元素是空元素,所以它没有结束标签。它通过特性来携带信息。

最常见的特性:

  • name:你要设定的属性
  • content:你想给这个属性指定的值

下面是name特性常见的值:

  • description:页面的描述信息
  • keywords:一组以逗号分隔的关键词列表
  • robots:用于指定搜索引擎是否可以将这个页面加入到它们的搜索结果中

下面是http-equiv特性常见的值:

  • author:定义网页的设计者
  • pragma:用于防止浏览器对页面的缓存
  • expires:指定页面的过期时间

下面是一个实例:

1
2
3
4
5
6
7
8
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>算法图解-图书-图灵社区</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
</head>

转义字符

有一些字符用于编写HTML代码并作为HTML的保留字符。因此,如果想要在页面中显示这些字符,你就需要使用“转义”字符

  • <:&lt;
  • >:&gt;
  • &:&amp;
  • ":&quot;
  • ':&lsquo;
  • ':&rsquo;
赞赏一杯咖啡
0%