java web 之html学习一_html的容量标记符-优快云博客

本文介绍了HTML的基本概念、标记语法以及文档结构等内容，包括字体修饰、字符格式、列表和图片等元素的使用方法。

HTML简介

HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、什么大小来显示，这些都是利用HTML标记来实现。

使用Sublime Text编写；学习别人写的模板。

HTML标记的语法：

<标记符>内容</标记符>

单标记：

<标记名称 />，单一型，无属性值。如

<标记名称属性="属性值" />，单一型，有属性值。如<hr width="80%" />

双标记：

<标记名称>...</标记名称>，没有属性值。

<标记名称属性="属性值">...</标记名称>，有属性值。

HTML文档结构

通常由四对标记来构成，文档的骨架，四对基本骨架：

<html>
    <head>
        <title>
            标题
        </title>
    </head>
    <body> 
        正文 
    </body> 
</html>

解释：

<html>......</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中。
<head>......</head>标识网页文件的头部信息，如标题、搜索引擎关键字等（头部信息主要给搜索引擎看的或用于网站优化）。
<title>......</title>标识网页文件的标题（标题很重要，因为搜索引擎抓取的第一个就是标题）。
<body>......</body>标识网页文件的主体部分（body主要是针对用户看的）。

Meta标记

meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置<head></head>之间。

设置关键字：<meta name="keywords" content="value">

多个关键字内容之间可以用,分隔（value等于你想设置的关键字，如将value替换成“网页设计”），如<meta name="keywords" content="网页设计培训,编程培训">

设置描述：<meta name="description" content="value">，是对关键字进行描述或者对网页的内容进行描述，也是给浏览器或搜索引擎看的。如：<meta name="description" content="北京网页设计培训最便宜的地方,零基础也能当网页设计师">

设置作者：<meta name="author" content="作者名"> 如：<meta name="author" content="传智播客网页设计培训">

设置字符集：<meta http-equiv="content-type" content="text/html;charset=utf-8">

解释：

http-equiv主要针对http协议的。
服务器通过content-type响应头，控制浏览器以哪种方式处理数据。对于以上的设置浏览器将服务器会送过来的数据作为html文档处理。
charset就是字符集，中文网页国内一般用GBK(GBK是GB2312的一个升级)[国内常用，显示的汉字是2个字节]，UTF-8[国标码，国际上常用，显示的汉字是3个字节，会多占一些地方]。

设置页面定时跳转：<meta http-equiv="refresh" content="2;URL=http://www.itcast.cn"/>（2指的是秒数2秒）

网页主体标记body

注释：

body属性：

示例：

<html>
<head>
<title>网页标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body bgcolor="gray" text="white">
<!-- 这是网页主体的开始 -->
    轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html
<!-- 这是网页主体的开始 -->
</body>
</html>

字体修饰

标记语法：文本

注意：网页中的文本字体、字号一般通过CSS修饰。

字符格式：

这里写图片描述

段落控制标记：...

段落标题：<hx align="对齐方式">...</hx>， x取值[1~6]，hx内的文本会自动加粗显示。hx针对的对象是段落，而font针对的对象是任意的文本。

换行：

水平直线：<hr/>

特殊标记：定义一个块引用，使用文本缩进 <blockquote>......</blockquote>，如<blockquote cite="http://www.flashdream.net"> 1TB以上硬盘容量笔记本 500GB硬盘容量笔记本相关产品排行笔记本配件排行笔记本电池排行内存排行无线上网卡排行台式电脑排行上网本排行笔记本电脑新品推荐惠普15... </blockquote>

居中标记：<center>...</center>，此标记是被废弃的标记。

预格式化：<pre>......</pre>显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。

特殊字符：

这里写图片描述

列表标记

无序列表：

<ul type="项目符号类型">
    <li type="项目符号类型">内容1</li>
    <li>内容2</li>
    ...
</ul>

type属性有以下取值

这里写图片描述

有序列表：

<ol start="列表起点" type="项目符号类型">
    <li>内容1</li>
    <li>内容2</li>
    ...
</ol>

这里写图片描述

定义列表：

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

<dl></dl>定义列表。
<dt></dt>表示一个项目。
<dd></dd>表示一个项目下的更详细的内容的解释。

图片

Web上支持的图片格式：

GIF(图形交换格式)：GIF格式文件最多只能保存256种颜色。该格式支持透明颜色，支持动画效果。
JPEG(联合图像专家组)：该格式不支持透明颜色及动画，颜色可达1670万种。
PNG(网络可移植格式)：该格式支持透明颜色，但不支持动画，颜色从几种至1670万种。

图片路径分为：

绝对路径：提供目标文档的完整主机名称、路径信息及文档全称。

相对路径：从当前文档开始的路径。

根相对路径：从站点根目录开始的路径，以“/”开头。

图片标记属性：

这里写图片描述