HTML基本标签
一、 什么是HTML?
超文本标记语言
网页的主体结构
浏览器:“解释和执行”HTML源码的工具
目前网页中常用的html标准是xhtml 1.0.
HTML的结构:
<html>
<head> -------头部
<title></title>
<head>
<body> -------主体部分
</body>
</html>
主体部分可包括文本,图像,链接等信息。
1.使用<title标签>
网页摘要信息利于浏览器解析和搜索引擎搜索
例:<title>搜狐-中国最大的门户网站</title>
2.使用<meta>标签
(1)描述文档类型和字符编码
(2)描述搜索关键字和描述
例:
<meta http-eqiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="淘宝,网上购物,在线交易,交易市场"/>
<meta name="description" content="淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容。家居、数码、......"/>
可以在关键字和描述里重复关键词提高搜索引擎搜到的排名
3.HTML标签分类
块级标签:显示为块状,前后隔一行。(块级元素在显示器上单独占一行)
行级标签:按行逐一显示。(行级元素逐一分布在显示器上)
分类好处:方便以后的布局设计。
根据使用场合,块级标签又分为
基本块级标签
常用于布局的块级标签
基本块级标签:<h1></h1> 标题标签 放大标题,前后隔一行。
< p></p> 段落标签,前后换行,并隔一行。
<hr/> 水平线标签,用于内容分割,单闭合标签,前后隔一行
4.列表
一种内容的表现形式,把内容排好列在显示器上展示出来,使内容的层次化更清晰(HTML语言化)
也是常用于布局的块级标签。
列表的分类: 无序列表 <ul><li></li></ul>
有序列表 <ol><li></li></ol>
自定义列表 <dl><dt></dt><dd></dd></dl>
4.1 有序列表(列表项前面有序号,前面不能随意调换位置)
<ol> ----------声明有序列表
<li></li> ----------声明列表项
......
</ol>
例如: <h1>注册步骤</h1>
<ol>
<li>填写信息</li>
<li>收地址邮件</li>
<li>注册成功</li>
</ol>
有序列表的类型:type="" 看type取何值
1 使用数字作为项目符号,默认取值
a/A 使用英文字母作为项目符号(选大小写)
I/i 使用罗马字母作为项目符号(选大小写)
4.2 无序列表(列表项前面没有序号,只有圆点等符号,可以随意调换位置)
<ul> ----------声明无序列表
<li></li> ----------声明列表项
......
</ul>
例如: <h3>新人上路指南 </h3>
<ul>
<li>如何激活会员名?</li>
<li>如何注册贵美会员?</li>
<li>注册时密码设置有什么要求?</li>
<li>贵美认证</li>
</ul>
无序列表的类型:type="" 看type取何值
disc 列表项前面为实体圆心,默认值
circle 列表项前面为空心圆
square 列表项前面为实体方心
4.3 自定义列表(列表项前面没有符号,常用于图文混编场合)
<dl>
<dt>标题</dt>
<dd>描述1</dd>
……
</dl>
一个dt列表项,后面可以有多个dd列表项内容,直至遇到下一个dt为止。
5. 表格:一次描述一列数据
<table>--表格
<tr> --行
<td> --列(单元格)
</td>
</tr>
</table>
6. 表单:用于提交用户信息,一般与table一起使用,用table标签来给表单元素布局。
<form>
……
</form>
7.<div> 分区标签,常作容器,划分逻辑区域。
<div>
......
</div>
实际开发中常用的四种块状结构:
1、div-ul(ol)-li :常用于分类导航或菜单等
2、div-dl-dt-dd :常用于图文混编的场合
3、table-tr-td :常用于图文布局或显示数据
4、form-table-tr-td:常用于布局表单
8. 行级标签<img> 图像标签,专门用于引用图像
<img src="path" alt="text" title="text" width="x" height="y" />
图像地址 替代文本 图像悬停提示文字 图像宽度 图像高度
例如:
<img src="image/hetao.jpg" width="160" height="160"
alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
9. 换行标签<br/> 前后不换行 与<p>作对比
10. 字体样式标签:
字体样式标签
加粗:<strong>…</strong> 删除线<del>…</del>
斜体:<em>…</em> 下划线<ins>…</ins>
11. 范围标签<span> :显示某行内的独特样式。
<span></span>
12. W3C提倡的web标准:
W3C提倡的Web结构:
1、内容(结构)和表现(样式)分离
2、HTML内容结构要求语义化
13. XHTML 1.0基本规范
标签名和属性名称必须小写
HTML标签必须关闭
属性值必须用引号括起来
标签必须正确嵌套
必须添加文档类型声明