Web技术之HTML

本文最后更新于：1 年前

HTML标题

通过 <h1> - <h6> 标签进行定义的

  • 浏览器会自动地在标题的前后添加空行
  • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题

HTML链接

HTML头部<head>

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

<title>

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<base>

定义了页面链接标签的默认链接地址

  • 定义了文档与外部资源之间的关系。

  • 通常用于链接到样式表

<style>

定义了HTML文档的样式文件

<meta>

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

<script>

用于加载脚本文件，如： JavaScript。

HTML样式CSS

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部<head> 区域使用<style>元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

内联样式

在相关的标签中使用style，多个属性之间用；间隔

  • background-color（背景色）定义一个元素的背景颜色

  • font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式

  • text-align（文字对齐）属性指定文本的水平与垂直对齐方式

内部样式表

在<head> 部分通过 <style>标签定义内部样式表

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

使用外部样式表，可以通过更改一个文件来改变整个站点的外观。

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

HTML图像

图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

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

Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像

height（高度） 与 width（宽度）

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义，即指表格数据table data）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 边框，设置<table>属性border

  • 单元格跨行/跨列，设置<th>属性rowspan/colspan

  • 格边距，设置<table>属性cellpadding

  • 格间距，设置<table>属性cellspacing

标签 描述
<table> 定义表格
<th> 定义表格的表头，显示为粗体居中的文本
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

HTML列表

  • 无序列表<ul>
  • 有序列表始于 <ol>标签
  • 有序和无序列表的每个列表项始于 <li>标签
标签 描述
<ol> 定义有序列表，里面只能包含li
<ul> 定义无序列表，里面只能包含li
<li> 定义列表项(list item)
<dl> 自定义列表(definition lists)，只能包含dd和dt
<dt> 自定义列表项目(definition term)
<dd> 定义自定列表项的描述(definition description)

HTML区块

区块元素 内联元素
在浏览器显示时，通常会以新行来开始（和结束） 显示时通常不会以新行开始
<div> <span>
定义了文档的区域，块级 (block-level) 用来组合文档中的行内元素， 内联元素(inline)

HTML 表单

表单是一个包含表单元素的区域。使用表单标签 <form> 来设置

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

<input type="text">

First name:
Last name:

密码字段

<input type="password">

Password:

单选按钮（Radio Buttons）

<input type="radio">

males:
females:

复选框（Checkboxes）

<input type="checkbox">

I have a bike
I have a car

提交按钮(Submit Button)

<input type="submit">

Username:

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的target属性必须指向iframe的name，如下实例:

RUNOOB.COM

HTML

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！