HTML5基础-HTML（上）
Posted 光霁同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5基础-HTML（上）相关的知识，希望对你有一定的参考价值。
1.html语法规范
html骨架标签，超链接标签，图片标签，alt与title的区别，相对路径三种形式
1.1基本语法
1.标签是由尖括号包围的关键词，如<html><head>
2.双标签
3.单标签，如<br />
1.2标签关系
包含关系、并列关系
2.HTML基本结构标签 *
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
html标签 | 根标签 |
<head></head> |
文档头 | head里面必须设置title |
<title></title> |
文档标题 | 标题 |
<body></body> |
文档主体 | 包含文档所有内容 |
eg：
<html>
<head>
<title>空页面</title>
</head>
<body>
#Error:404
</body>
</html>
3.骨架标签新增代码
<!DOCTYPE>文档类型声明，用于声明哪类html版本
eg：
<!DOCTYPE html>
注：
1.<!DOCTYPE>声明必须位于文档最前面位置，<html>标签之前。
2.<!DOCTYPE>不是一个html标签，它就是 文档类型声明标签。
lang语言类型，用来定义当前文档显示的语言
eg：
<html lang="en">
<!--英文网页-->
</html>
or
<html lang="zh-CN">
<!--中文网页-->
</html>
字符集，以便计算机能够识别和存储各种文字
eg：
<head>
<meta charset="UTF-8">
</head>
4.HTML常用标签 *
| 标签名 | 定义 | 说明 |
|---|---|---|
<h1></h1>------<h6></h6> |
标题标签 | 共有6级标题，大小依次递减 |
<p></p> |
段落标签 | 根据浏览器大小自动换行，段落之间保有空隙 |
<br /> |
换行标签 | 强制换行 |
<strong></strong>或者<b></b> |
加粗 | 文本加粗 |
<em></em>或者<i></i> |
倾斜 | 文本倾斜 |
<del></del>或者<s></s> |
删除线 | 文本删除线 |
<ins></ins>或者<u></u> |
下划线 | 文本下划线 |
<div></div> |
布局盒子 | 一行只能放一个div。大盒子 |
<span></span> |
布局盒子 | 一行可以放多个span。小盒子 |
5.图像标签 *
<img />
属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 图像路径 | 图像的路径 |
| alt | 文本 | 替换文本。图像显示不出来用文字替换 |
| title | 文本 | 提示文本。鼠标放到图片上，提示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框 |
相对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 文件位于html文件同一级 eg<img /> |
|
| 下一级路径 | / | 文件位于html文件下一级 eg<img /> |
| 上一级路径 | ../ | 文件位于html文件上一级 eg<img /> |
绝对路径
eg："D:\web\img\logo.gif" or "http://www.itcast.cn/images/logo.gif"
6.超链接标签 *
<a> anchor 锚
6.1链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址（必） |
| target | 用于指定链接页面的打开方式，其中" _self"为默认值，" _blank"为新窗口打开页面 |
6.2链接的分类
1.外部链接
<a href="http://www.baidu.com" target="_blank">百度搜索</a>
2.内部链接
<a href="other_pages.html" target="_blank">其他页面</a>
3.空链接
<a href="#">空页面</a>
4.下载链接
<a href="download_packages.zip">下载文件</a>
5.网页元素链接
<a href="xxxxxxxx"> <img src="img.jpg" /> </a>
6.锚点链接：用于快速定位到页面中的某个位置（目录的感jio）
在链接文本的href属性中，设置属性值为 #name ，如
<a href="#birthday">生日</a>在目标位置标签，里面添加 id属性 = "name"，如
<h3 id="birthday">生日详情</h3>
7.注释标签
<!-- 注释语句 --> 快捷键：ctrl + /
8.特殊字符
以上是关于HTML5基础-HTML（上）的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段