从一个简单例子入手开始了解HTML结构
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页选项卡名字</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<a href="http://www.baidu.com/">访问百度<a>
</body>
</html>
分析
1. <!DOCTYPE html> 表示浏览器这是一个html文件(没有也可以)
2. <html> </html>表示这之间的内容是html网页的html元素
3. <head> </head>表示网页的头部信息,不显示在网页内部
4 <body></body>表示页面显示部分
5.<h1></h1>表示一级标题部分
6.<p></p>表示普通文字的部分
HTML元素的一些介绍
1.这里先列出基本的元素,上面介绍了一些
开始标签 | 元素含义 | 结束标签 |
---|---|---|
<p> | 普通文本内容 | </p> |
<a href=“default.htm” > | 所连接网址 | </a> |
<br > | 换行符 | |
<!–这是一个注释,注释在浏览器中不会显示–> |
2.关于结束标签
可以不写,浏览器也能正常解析,但是为了避免出现意想不到的状况,还是写上比较好。
3.关于大小写
HTML 标签对大小写不敏感,许多网站都使用大写的 HTML 标签。
4.关于HTML 空元素
有些标签不是成对存在的,没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。在现在版本的html中
就是换行,但是为了更长远的考虑,所有的标签都要关闭,换行要用<br/>
5.关于html整体
整体可以分为两个部分头部<head></head>和正文部分<body><\body>
HTML属性
例子中,这个html元素有一个href关键字,这个关键字叫做属性,在起始标签头部指定。还有许多其他的关键字
<a href="http://www.baidu.com/">访问百度<a>
其他常用的属性
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名(classname)
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制,移动,或链接,或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式(inline style)
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translateNew 指定是否一个元素的值在页面载入时是否需要翻译