HTML

全称超文本标记语言，它是一种描述性的标记语言，不是编程语言

超文本是指，页面内可以包括图片、链接、甚至音乐、程序等非文字元素

标记是指，浏览器通过解析页面中的标签来正确显示这个页面

头部部分<head><head/>

charset字符集设置

设置整个网页的字符集：<meta charset="utf-8" />

name描述网页，与之对应的属性值为content

定义针对搜索引擎的关键词：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定义对页面的描述：<meta name="description" content="免费的 web 技术教程。" />

定义页面的最新版本：<meta name="revised" content="David, 2008/8/8/" />

http-equiv将告诉浏览器准备接受一个HTML文档

每 5 秒刷新一次页面：<meta http-equiv="refresh" content="5" />

主体部分<body><body/>

设置所有文本的颜色：<body text="red" ></body>

设置文档的背景颜色：<body bgcolor="greenyellow"></body>

HTML中的颜色由红、绿、蓝混合而成，有三种取值方式

RGB形式：rgb(0,0,0)，每一个值在0-255之间

16进制形式：#000000，每一位在0-f之间

英语单词形式：red,green,blue

基本块级标签

网页中所有的元素都是长方形的盒子，通过浏览器的审查元素功能可以看到每一个元素所占的盒子区域

块级标签形成的盒子在父标签中独占一行

行级标签形成的盒子则可以多个并排显示

标题标签<h1/> ~ <h6/>

段落标签<p></p>

水平线标签<hr/>：用来绘制一条分割线

size：设置水平线粗细

width：设置水平线宽度

color：设置水平线颜色

HTML中的数值单位

数值默认单位是像素（px）

数值也可以是百分比，width=50%代表此分割线的宽度始终是父容器的一半

列表

无序列表<ul></ul>

快捷编译：ul>li*10然后按tab键

type：disc圆点（默认），square方形点，circle圆环

<body>
	<h1>唐诗三百首</h1>
	<hr />
	<h2>目录</h2>
	<ul type="circle">
		<li>第一首:静夜思</li>
		<li>第二首:忆江南</li>
		<li>第三首:长恨歌</li>
	</ul>
</body>

有序列表<ol></ol>

start：设置列表的起始值

type：1-数字，A-大写字母，a-小写字母，I-大写罗马数字，i-小写罗马数字

<body>
	<h1>唐诗三百首</h1>
	<hr />
	<h2>目录</h2>
	<ol start="1" type="A">
		<li>第一首:静夜思</li>
		<li>第二首:忆江南</li>
		<li>第三首:长恨歌</li>
	</ol>
</body>

有序列表和无序列表可以互相嵌套使用

定义列表

<dl>
    <dt>定义项</dt>
    <dd>描述项</dd>
</dl>

基本行内标签

段内换行<br/>

加粗<b></b>或<strong></strong>（具有强调作用）

倾斜<i></i>或<em></em>（具有强调作用）

范围标签<span></span>

通过style属性添加他的样式

color：设置当前的字体颜色

background-color：设置标签背景颜色

font-size：设置标签中字体大小

<span style="color:red;background-color:green;font-size:40px;"></span>

图像标签<img/>

src（必须）：图片的位置

alt（必须）：图片显示不出来时的替代文本

title：鼠标滑过图片时显示的文字提示

style：可以设置当前标签中内容的样式

style="border:边框的大小边框的颜色边框的样式（solid实线，dotted点画线，dashed虚线）;"

<body>
	<h1>赠汪伦</h1>
	<p>作者:<strong>李白</strong></p>
	<img src="img/images/libai.png" alt="赠汪伦"/>
</body>

特殊字符

在HTML中显示空格、尖括号等，要使用特殊字符

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

超链接<a/>

<a href="文件的路径" target="打开方式">内容</a>

文件可以包括：网页，office文件，压缩软件，多媒体等

<a href="http://map.baidu.com" name="tj_trmap">地图</a>

<a href="#">内容</a>

#：空白链接，返回顶部

###：空白链接，返回原位置

href属性规定链接的目标，href的值是一个url地址，可能的值包括

相对路径

两个文件在同一个文件夹里：直接写文件的名称
一个文件在文件夹里，一个文件在文件夹的外面：文件夹的名称/文件的名称
两个文件在不同的文件夹里：../文件夹的名称/文件的名称（../返回上一级目录）

绝对路径

本地：E:\img\logo.jpg
网络：http://www.baidu.com/img/logo.jpg

锚地址：指向页面中的锚（href="#top"）

设置锚点，使用id属性或者name属性

页面间的锚链接（href="login.html#top"）

<a>标签的target属性用来规定在何处打开链接文档，他的取值如下

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

在所有浏览器中，链接默认的外观是

行内框架

src：规定在iframe中显示的文档的URL

frameborder：规定是否显示框架周围的边框

name：规定iframe的名称

<iframe src="-.html" frameborder="0"></iframe>

枫眠cc

发布了202 篇原创文章 · 获赞 37 · 访问量 3万+

私信关注

HTML：标签