HTML基本标签(一)
HTML:Hyper Text Markup Language 超文本标签语言,网页的“源码”
浏览器:“解释和执行”HTML源码的工具
HTML文档的结构:
<html>
<head>
<title>我的第一个网页 </title>
</head>
<body >
Hello World!
</body>
</html>
网页摘要信息利于浏览器解析和搜索引擎搜索:
1)使用<title>标签
<head>
<title>搜狐-中国最大的门户网站</title>
</head>
2)使用<meta>标签
(1)描述文档类型和字符编码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
(2)描述搜索关键字和描述
<head>
<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
<meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、……" />
</head>
HTML标签分类(方便后续的布局设计):
- 块级标签:显示为“块”状,前后隔一行 (块级块内包含多行)
- 行级标签:按行逐一显示 (行级包括文字、图片等)
根据使用场合,块级标签又细分为: 基本块级标签,常用于布局的块级标签
基本块级标签
- 标题标签
<h1>标题</h1> …… <h6>标题</h6> …… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
- 段落标签
<p>……</p> …… <body> <h1>北京欢迎你</h1> <p>北京欢迎你,有梦想谁都了不起!</p> <p>有勇气就会有奇迹。</p> </body> ……
- 水平线标签
<p>……</p>
……
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p>
<p>有勇气就会有奇迹。</p>
</body>
……
常用于布局的块级标签
- 有序列表标签
<ol> <li>列表项1</li> … … </ol> …… <body> <h3>注册步骤:</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
- 无序列表标签
<ul> <li>列表项1</li> …… </ul> <body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名?</li> <li>如何注册贵美会员?</li> <li>注册时密码设置有什么要求?</li> <li>贵美认证</li> </ul> </body>
扫描二维码关注公众号,回复: 6208573 查看本文章 - 定义描述标签
<dl> <dt>标题</dt> <dd>描述1</dd> …… </dl> …… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。</dd> <dd>可以提神,刺激神经。</dd> <dl> </body> ……
用定义描述标签实现图文混编的效果
…… <body> <dl> <dt> 图片的HTML代码(后续讲解)……<dt> <dd>商品名称:灿坤蒸气电熨斗</dd> <dd>商品价格:388元</dd> <dd>商品简介:金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> </body> ……
- 表格
<table> <tr> <td>百度</td> <td>新浪</td> </tr> …… </dl> <table>--表格 <tr> --行 <td> --列(单元格)
- 表单
<form> …… </form> 一般和table使用: <form> <table> <tr> <td>...</td> <td>...</td> </tr> ..... </table> </form>
- 分区标签
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> <h3>新人上路</h3> <ul> …… </ul> div其实就是一个...... </div> ……
一般当作结构化块状元素使用,作为逻辑分区(分块)即容器来使用
请说出实际开发常用的4种块状结构是什么?
- div-ul(ol)-li :常用于分类导航或菜单等
- div-dl-dt-dd :常用于图文混编的场合
- table-tr-td :常用于图文布局或显示数据
- form-table-tr-td:常用于布局表单
行级标签
- 图像标签
<img src= "图片地址" alt="提示文字" title="提示文字" /> …… <img src="images/drink.jpg" alt="精品热卖:高清晰,30寸等离子电视" title="精品热卖:高清晰,30寸等离子电视" /> ……
- 范围标签<span> :显示某行内的独特样式
<span >文本等行级内容</span> …… <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p> ……
换行标签 <br/>
……
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
北京欢迎你,为你开天辟地<br />
流动中的魅力充满朝气。<br />
北京欢迎你,在太阳下分享呼吸<br />
在黄土地刷新成绩。<br />
北京欢迎你,像音乐感动你<br />
让我们都加油去超越自己。<br />
</p>
……
W3C
- W3C:World Wide Web Consortium,万维网联盟
- W3C的职能:负责制定和维护web行业标准
- W3C标准包括:
列的标准: HTML
内容方面:XHTML
样式美化方面:CSS
结构文档访问方面:OM
页面交互方面:ECMAScript
……
XHTML 1.0基本规范
- 标签名和属性名称必须小写
- HTML标签必须关闭
- 属性值必须用引号括起来
- 标签必须正确嵌套 必须添加文档类型声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> …… </head> ……body部分内容…… </html> 1、声明必须位于文档的最前面 2、三种级别:Strict(严格类型) 、Trasitional(过度类型)、 Frameset(框架类型)