1、HTML有关概念
万事俱备: Hyper Text 马克up Language(超文本标记语言)
其文件扩充名为“.html”或“.htm”
* 超文本 – 在一般的公文基础上,添加超链接、图片、音频或视频等
* 标记 – 标记就是HTML中的标签(元素),特点:<a>
* 语言 – 近期目标所能识其余
本子: HTML 4.01 <4.01与4.0不是一个版本>; HTML 5;
XHTML:严厉版本的HTML
- Ø 基本构造:
附:<!doctype html>:
评释版本,则浏览器可以事先掌握文档类型,从而不利展现网页内容
<meta charset=”UTF-8″> : 设置编码格式
meta标签提供了元数据(不显得在页面上,但会被浏览器解析)。
meta元素常用于指定网页的叙说、关键词、文件的最后修改时间、作者、和此外元数据。元数据可采用浏览器(怎么样展现内容或再一次加载页面),搜索引擎(关键词),或另外Web服务。
eg:为寻找引擎定义关键词、为网页定义内容、为网页定义作者….
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
<meta name=”description” content=”Free Web tutorials on HTML and
CSS”>
<meta name=”author” content=”King”>
- Ø 元素
空元素 – 只有伊始标签,没有终止标签;
起初元素 – 具有最先标签和竣工标签 —–成对出现
注: 元素名(大小写均可)- W3C预定义,指出使用小写
- Ø 属性
效益:定义当前因素的信息 格式:属性名=”属性值”
(a.属性必须定义在起头标签中 b.同一个因素具有多少个特性)
i 通用属性 – 几乎所有的HTML元素都拥有的性质
id: 表示近来因素的标识(唯一的) name: 表示近期元素的名目
style: 表示定义CSS样式 class: 表示定义CSS样式
i 私有属性 – 某个元素独有的属性
- Ø 注释
效能:解释当前的要素的听从 特点:不会显得在浏览器的页面中
格式:<!– 注释内容 –> 快速键:CTRL + ?
2、HTML常见元素
ü 标题 <h1> ~ <h6> (常用的<h1> ~
<h3>,尤其是<h1>)
<h1>:用于搜索引擎抓取HTML页面
搜寻引擎抓取HTML内容时,优先级:
<title>元素中的内容 大于 <meta name=”keywords”
content=””>大于<h1>元素
ü 段落 <p></p>
特色:自动换行,行间距相比大
eg: <p> </p> <p></p>
或 <p> </p>
<p> </p>
eg: <p> <br> </p>
ü <hr> – 水平线
ü <br> – 换行 [快捷键 – 标签名 + TAB]
3、列表
(1)有连串表 (2)无体系表 (3)定义列表
<ol> <ul> <dl>
– 表示定义列表
<li></li> <li></li>
<dt></dt> – 表示列表项(列表的题目)
</ol> </ul>
<dd></dd> – 表示列表项的叙述(列表项)
</dl>
不变列表 type属性:规定列表类型1、A、a、l、i; start属性:规定起头数字
快捷键:标签:*数码 + TAB; alt+鼠标左键
4、链接元素
格式:<a href=” “></a>
属性:<a href=”当前要跳转到的地点”></a> <a
name=”当前元素的称呼”></a>
a链接会自带下划线,若去除下划线,则 a{ text-decoration: none;}
href:去往的路径即跳转的页面(必写属性)
title:提醒文本,也就是鼠标放到链接上展现的文字
target = ’_self ’
默认值,在自我页面打开(关闭自身页面,打开链接页面)
target = ’_blank ’ 打开新页面 (自身页面不关门,打开一个新的链接页面)
效果: 实现页面跳转(默认);
实现回到顶部[锚点(#name)]即指向某定点地点;实现发送邮件
eg: <a name=”top”>这是下面</a>
<a href=”mailto:82328769@qq.com” >邮箱地址</a>
<a href=”#top” >回到顶部</a> <a href=”#middle”
>回到中间</a>
² 相对路径
即相对于文件自身出发,就是相对路径。
文件和图表(html文档)在同一个索引(文件夹) ,直接写文件名。
图表(html文档)在文件在下一流目录里。文件夹名称/图片(html)名称
图表(html)在文件的上一级目录里,.. /图片(html)名称
图片在文书的上顶级的任何目录里,../文件夹名称/图片名称
² 相对路径
5、图片元素
<img src=”当前引入图片的路线” alt=” text文本” width=”图片宽度”
height=”图片中度” >
图片元素的加载原理