HTML
< head >标签
< head >标签中包含< title>、< meta>、< link>、< style>标签。
1.< title >标签
指定整个网页的标题,在浏览器最上方显示。
2.< meta >标签
提供有关页面的基本信息。
属性:
(1)charst 属性
定义文档的字符编码。
<meta charset="utf-8" />
(2)name 属性
把 content 属性关联到一个名称。
值:
author:规定文档的作者的名字。
description:规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
keywords:规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的)。
application-name:规定页面所代表的 Web 应用程序的名称。
generator:规定用于生成文档的一个软件包(不用于手写页面)。
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,JavaScript" />
<meta name="author" content="Hege Refsnes" />
</head>
(3)http-equiv 属性
把 content 属性关联到 HTTP 头部。
值:
content-type:指定文档的内容类型和编码类型。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
refresh:定义文档自动刷新的时间间隔; 重定向 2 秒后跳转到对应的网址,注意分号
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com" />
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com" />
x-ua-compatible:告诉 IE 浏览器以最高级模式渲染当前网页
<meta http-equiv="x-ua-compatible" content="IE=edge" />
**注意:**如果设置了 http-equiv 属性,则不应该设置 name 属性。
(4)content 属性
定义与 http-equiv 或 name 属性相关的元信息。
(5)scheme 属性
HTML5 不支持。 定义用于翻译 content 属性值的格式。(了解)
3.< link >标签
4.< base>标签
5.< style>标签
6.< script>标签
7.< noscript>标签
< body>标签
1.标题
标题(Heading)是通过 < h1> - < h6> 标签进行定义的。< h1> 定义最大的标题。 < h6> 定义最小的标题。
2.段落
(1) < p>标签
段落,段落间会有空行。
(2) < br>标签
换行,换行后上下文没有空行。
3.超链接
< a href ="链接地址" target="目标值" title="提示文字">文本< /a>
属性:
1.href:地址
2.target:用于指定链接页面的打开方式;
值:_blank:在新窗口打开
_self:在本窗口打开(默认)
_parent:表示点击超链接后在父窗口中打开(跟框架有关)
_top:在当前浏览器中打开,而框架会消失(跟框架有关)
3.title:提示文字,即在鼠标放在超链接上时出现的提示信息
锚点链接:
1.空链接:< a href="#">文本< /a> 作用:用于页面中回到页面顶部
2.同页面跳转:
< h1 id="key">跳转到这< /h1>
< a href="#key">页面某个模块的某个页面要素< /a>
注:id:定义锚记标记名称,不能用 name。
<a href="http://www.qq.com"></a>
<a href="img.zip">下载文件</a>
<a href="http://···"><img src="···" /></a>
4.图像
< img src=" " alt=" " >
属性:
**src **:图片路径。
alt:替换文本,图片不能显示时显示的文字。
title:将鼠标放在图像上时显示的文字。
width:宽。
height:高。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
5.表格
< table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 < tr>、< th> 或 < td> 元素组成表格结构;其中: < tr> 元素定义表格行,< th> 元素定义表头,< td> 元素定义表格单元。
1.表格标签
NO | 表格标签 | 用处 |
---|---|---|
1 | < table> | 定义表格,生成的表格在一队< table>< /table>中; |
2 | < caption> | 定义表格的标题,当表格需要标题时,使用< caption>表格标题< /caption> |
3 | < thead> | 定义表格的页眉 |
4 | < tbody> | 定义表格的主体 |
5 | < tfoot> | 定义表格的页眉 |
6 | < th> | 定义表格的表头,一般是表头中的内容会被加黑; |
7 | < tr> | 定义表格的行 |
8 | < td> | 定义表格单元格 |
9 | < col> | 定义用于表格列的属性 |
10 | < colgroup> | 定义表格列的组 |
<body>
<table border="1">
<caption>
标题
</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
2.合并单元格
1.合并行单元格(colspan):
2.合并列单元格(rowspan):
3.单元格边框
4.表格格式设置
(1)单元格的对齐
(2)背景颜色&图片 bgcolor& background
(3)单元格边距cellpadding
(4)单元格之间的距离cellspacing
(5)显示部分边框
注:详情见:https://blog.csdn.net/weixin_47139649/article/details/109099704?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163040446416780261979857%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163040446416780261979857&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-109099704.first_rank_v2_pc_rank_v29&utm_term=html%E8%A1%A8%E6%A0%BC&spm=1018.2226.3001.4187
6.列表
1.有序列表:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
2.无序列表:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
3.自定义列表:
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
7.区块
大多数 HTML 元素被定义为块级元素或行内元素(内联元素)。
常见块级元素:
< div> < p> < ul> < li> < h1>···< h6>
常见内联元素:
< a> < strong> < b> < em> < i> < del> < s> < ins> < u> < span>
8.表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置;
表单域< form>< /form>
属性:
action:规定当提交表单时向何处发送表单数据。
method:规定用于发送表单数据的 HTTP 方法。
name: 规定表单的名称。
······
表单元素
< input>:
< textarea>:定义一个多行的文本输入控件。
< button>:定义一个按钮。
< select>:用来创建下拉列表
< option>:定义下拉列表中的一个选项(一个条目)。
< label>:label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
< label> 标签的 for 属性应当与相关元素的 id 属性相同。
< optgroup>:经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用< optgroup> 标签能够很简单的将相关选项组合在一起。
< fieldset>:可以将表单内的相关元素分组。会在相关表单元素周围绘制边框。
9.文本格式化
标签 | 描述 |
---|---|
< b> | 定义粗体文本。 |
< em> | 定义着重文字 |
< i> | 定义斜体字 |
< small> | 定义小号字 |
< strong> | 定义加重语气 |
< sub> | 定义下标 |
< sup> | 定义上标 |
< ins> | 定义插入字 |
< del> | 定义删除字 |
10.特殊字符
字符 | 实体名称 |
---|---|
空格 |   |
< | < |
> | > |
& | & |
" | " |
' | &apos |
© | © |
® | ® |
× | × |
÷ | ÷ |
平方 | ² |
立方 | ³ |