Day 02
Author : ScorpioDong
1. HTML 文本格式化
1.1 文本格式化标签
| 标签 |
描述 |
<b> |
粗体文本 |
<em> |
着重文字 |
<i> |
斜体 |
<strong> |
加重语气 |
<small> |
小号字体 |
<sub> |
下标 |
<sup> |
上标 |
<ins> |
插入字 |
<del> |
删除字 |
1.2 计算机输出标签
| 标签 |
描述 |
<code> |
计算机代码 |
<kbd> |
键盘码 |
<samp> |
计算机代码样本 |
<var> |
变量 |
<pre> |
预格式文本 |
1.3 引用，引文和标签定义
| 标签 |
描述 |
<abbr> |
定义缩写 |
<address> |
定义地址 |
<bdo> |
定义文字方向 |
<blockquote> |
定义长引用 |
<q> |
定义短引用 |
<cite> |
定义引用、引证 |
<dfn> |
定义一个定义项目 |
2. HTML 超链接
- HTML使用标签
<a> 来设置超文本链接。
- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
- 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
- 在标签
<a> 中使用了href属性来描述链接的地址。
- 默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
- target属性可以定义被连接的文档在何处显示
- id可以创建一个HTML文档书签，可以使用另一个超链接连接到这个书签
<a herf="www.google.com">Google</a>
<a herf="www.google.com" target="_blank">Google</a>
<a id="hello">Hello</a>
<a herf="#hello">Link Hello</a>
3. HTML <head>
<head> 元素包含了所有的头部标签元素- 在
<head> 中可以插入脚本、样式文件以及各种meta信息
| 标签 |
描述 |
| <<head> |
定义了文档的信息 |
| <title> |
定义了文档的标题 |
| <base> |
定义了页面链接标签的默认链接地址 |
| <link> |
定义了一个文档和外部资源之间的关系 |
| <meta> |
定义了HTML文档中的元数据 |
| <script> |
定义了客户端的脚本文件 |
| <style> |
定义了HTML文档的样式文件 |
3.1 <title>
<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必须的。<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
3.2 <base>
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
3.3 <link>
<link> 标签定义了文档与外部资源之间的关系<link> 标签通常用于链接到样式表
3.4 <style>
<style> 标签定义了HTML文档的样式文件引用地址.- 在
<style> 元素中你也可以直接添加样式来渲染 HTML 文档
3.5 <meta>
<meta> 标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。- META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
- 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="author" content="ScorpioDong">
<meta http-equiv="refresh" content="30">
3.6 <script>
<script> 标签用于加载脚本文件，如： JavaScript。
4. HTML 表格
<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>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
| 标签 |
描述 |
| <table> |
定义表格 |
| <th> |
定义表格的表头 |
| <tr> |
定义表格的行 |
| <td> |
定义表格单元 |
| <caption> |
定义表格标题 |
| <colgroup> |
定义表格列的组 |
| <col> |
定义用于表格列的属性 |
| <thead> |
定义表格的页眉 |
| <tbody> |
定义表格的主体 |
| <tfoot> |
定义表格的页脚 |
5. HTML 列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
6. HTML 区块
<div> 元素通常作为容器使用，本身没有特殊含义，可以通过样式文件定义其属性<span> 元素可用作文本的容器，本身没有特殊含义，可以通过样式文件定文本样式<div> 和 <table> 也常用于网页页面的布局使用
7. HTML 框架
<iframe> 元素可以让一个网页内显示另一个网页的内容- 语法：
<iframe src="URL"></iframe>
- height 和 width属性可以设置iframe高度和宽度
- frameborder属性可以设置iframe的边框
- name属性配合
<a>的target属性可以是iframe显示a的链接
8. HTML 表单
8.1 文本域
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:
8.2 密码
<form>
Password: <input type="password" name="pwd">
</form>
Password:
8.3 单选按钮
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female
8.4 复选按钮
<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>
I have a bike
I have a car
8.5 提交按钮
- 当用户单击确认按钮时，表单的内容会被传送到另一个文件
<form name="input" action="target.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
