第一章 HTML5基础
HTML(超文本标记语言)
HTML网页基本结构
<!DOCTYPE html><!--DOCTYPE声明:告诉浏览器使用什么规范--> <html> <head><!--网页头部--> <meta charset="utf-8" /><!--网页字符编码--> <meta name="keywords" content="关键词1,关键词2" /> <meta name="description" content="标题下内容描述(搜索时)" /> <title></title><!--<title>标签:显示页面标题--> </head> <body><!--主体部分--> </body> </html>
标题标签
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
段落标签
<p></p>
换行标签
<br/>
水平线标签
<hr/>
字体样式标签
<strong></strong><!--加粗--> <em></em><!--斜体-->
注释和特殊符号
特殊符号 字符实体 空格   ; 大于号(>) > ; 小于号(<) < ; 引号(“) " ; 版权符号@ © ;
图像标签
<img src="path" alt="text" title="text" width="x" height="y" />
- src – 图像地址
- alt – 图像的替代文字(图片不能正常显示时)
- title – 鼠标悬停提示文字
- width – 图像宽度
- height – 图像高度
链接标签
<a href="path" target="目标窗口位置(打开方式)">链接文本或图像</a>
href – 链接路径
target – 打开方式
(常用值:_ self – 默认,在现有的窗口中打开新页面,原窗口将被覆盖。
_ blank -- 在新的窗口中打开新页面。)
锚链接
实例:当前页面锚链接
<!-- 设置图片名称 --> <a name="f0"><img src="img/img1.png"/></a> <a name="f1"><img src="img/img2.png" /></a> <a name="f2"><img src="img/img3.png" /></a> <a name="f3"><img src="img/img4.png" /></a> <a name="f4"><img src="img/img5.png" /></a> <!-- 锚链接跳至特定图片位置处 --> <p> <a href="#f0">首页</a><br/> <a href="#f1">F1</a><br/> <a href="#f2">F2</a><br/> <a href="#f3">F3</a><br/> <a href="#f4">F4</a> </p>
跨页面锚链接
<p> <!-- 跳转到上面的页面特定位置 --> <a href="jdgw1.html#f0">首页</a> <!-- 格式为:跳转页面路径#图片name名称 --> <a href="jdgw1.html#f1">F1</a> <a href="jdgw1.html#f2">F2</a> <a href="jdgw1.html#f3">F3</a> <a href="jdgw1.html#f4">F4</a> </p>
功能性链接
<a href="del:xxxxx">电话号</a>
行内元素和块元素
- 块元素 – 无论内容多少,该元素独占一行(p、h1-h6…)
- 行内元素 – 内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)