HTML基础
HTML概念
HTML(Hypertext Markup language)即超文本标记语言
HTML发展史：
1993（IETF）HTML1.0-1995~2000(W3C)HTML2.0—2000（W3C）XHTML1.0—-2004HTML5草案-2008（合并）HTML正式版-2014HTML5定稿
HTML特点
-HTML不需要编译，直接由浏览器执行
-HTML文件是一个文本文件
-HTML文件必须使用html或htm为文件名后缀
-HTML大小写不敏感，HTML和html是一样
开发工具
记事本、word、Sublime等
基础语法
-HTML基本结构
HTML文件<html></html>、头部信息<head></head>、网页内容<body></body>
-HTML标签
<html></html>等开始标签和结束标签
-HTML元素
<head>
<title>hello</title>
</head>
标签加内容
-HTML属性
语法：<标签名 属性名1=“属性值” 属性名2=“属性值”...>...</标签名>
注释
<!--注释内容 -->
文档声明和META标签
<!DOCTYPE >声明必须放在HTML文档第一行
<!DOCTYPE >声明不是HTML标签
<!DOCTYPE html>
网页编码设置
当网页出现乱码时，在<head></head>标签之间添加：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
文字和段落
标题标签：<h1></h1>~<h6></h6>
段落标签：<p></p>
align对齐属性：left：左对齐内容，right：右对齐内容，center：居中对齐内容，justify：对行进行伸展，这样每行都可以有相等的长度
换行标签：</br>
空格：手动敲的空格是不起作用的，使用 ；表示空格。
预格式化标签：<pre></pre>保持文本内容样式标签
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>hello</title>
</head>
<body >
<h3 align="center">《早发白帝城》</h3>
<p align="center">早辞白帝彩云间，千里江陵一日还。</p>
<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>
修饰标签和特殊符号
-修饰标签：
文字斜体:<i></i>,<em></em>
加粗：<b></b>,<strong></strong>
下标：<sub></sub>
上标：<sup></sup>
-特殊符号
< < 小于或显示标记
> > 大于或显示标记
® ® 已注册
© © 版权
™ ™ 商标
不断行的空白
列表标签
-无序列表标签（ 用小黑圆点来标记）
<ul type="">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
type属性值：
disc:圆点
square:正方形
circle:空心圆
-有序列表标签(I II III,123,abc)
<ol type="">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
type属性值：
1:数字1，2，3...
a:小写字母a,b,c...
A:大写字母A,B,C
i:小写罗马字母i
I:大写罗马字母I
-定义列表标签()
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
...
</dl>
<dt></dt>和<dd></dd>是同级标签
例子：
<h3>我是标题</h3>
<dl>
<dt>我很帅</dt>
<dd>真的吗</dd>
<dd>真的吗</dd>
<dt>我很帅</dt>
<dd>真的吗</dd>
</dl>
图像和超链接
-图像标签
语法:<img src="" alt="" .../>
img属性：
src(必写):url（显示图像的URL）
alt:文字（图像替代文本，当网速太慢，src属性中的错误，浏览器禁用图片，用户无法查看图像，alt属性可以代替图像）
height:数值(px)和百分比（图像的高）
width:数值(px)和百分比（图像的宽）
-HTML路径：
1、相对路径：相对自己而言的文件如果图片在文件的同一级：<img src="kfzx_bj@2x.png"/>,如果图片在文件的下一级：<img src="文件名/kfzx_bj@2x.png"/>
超链接标签
语法：
<a href="">内容</a>
属性：
href:链接地址
target:_self,_blank,_top,_parent 链接目标窗口
title:链接提示文字
<p>一幅图像：<a href="https:baidu.com" target="_blank" title="我很帅"><img src="图片/kfzx_bj@2x.png" alt="马图" width="50%" height="200px" alt="center" /></a>
</p>
name:链接命名
href:链接地址，可以是内部链接或外部链接（文件引用规则同图片引用）
站内链接：在网站内部跳转（相对路径）
站外链接：跳转新网站（使用绝对路径）
-空链接：
<a href="#">内容</a>
锚链接(同一页面)
<a href= "#锚名1">目录1</a>
<a href= "#锚名2">目录2</a>
<a href= "#锚名3">目录3</a>
<a name="锚名1">内容</a>
<a href="..." name="锚名2">内容</a>
<a href="..." name="锚名3">内容</a>
总结：1.先定义锚的位置和锚名、2。设置寻找锚的链接
锚链接(不同页面)
网页1：<a href= "网页名称#锚名"></a>
网页2：<a name="锚名"></a>
链接拓展功能
-电子邮件链接：
<a href="mailto:邮件地址"></a>
<a href="mailto:844532305@qq.com">844532305@qq.com</a>
-文件下载：
<a href="下载文件的地址"></a>
例子：<a href="hello.zip"></a>
注意：1、下载文件要压缩。2、直接写下载的文件名，会打开文件
浙公网安备 33010602011771号