HTML页面的组成
HTML文件结构
快捷生成html基础结构：输入html然后按tab
常用标签
HTML字体
字体大小：为1-7，超过7的都为7号字体的大小
字体颜色：英文字母(该方法对于描述如深红、浅红等不方便)，RGB,16进制
font在HTML 4中不赞成使用；在HTML 5中已经不支持使用了
段落
可以只有<p>没有</p>，系统会默认在下一个<p>之前有</p>,换段会有段间距
<br>是换行,换行没有段间距
标题
通常在一个页面里只使用前三级标题：可以当做大标题、副标题、栏目标题
注释
img标签
alt：图片不存在时给用户提示
height：高度
width：宽度
地址中的斜杠，用正斜杠/和反斜杠\都可以
-
相对路径：图片地址要从当前所处位置出发，在其上的地址用返回上一级
../是返回上一级（相对路径使用更多） -
绝对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../image/headlogo/1.gif" alt="not find">
<img src="D:\HTMLDEMO\html\image\headlogo\1.gif" alt="not find">
</body>
</html>
超链接
打开外网时必须加入http://
<html>
<head>
<title>first.html</title>
</head>
<body>
<a href="welcome.html">打开新页面</a>
<a href="http://www.imooc.com">慕课网</a>
<a href="image/headlogo/8.gif">打开一个图片</a>
<!--通过点击图片打开新页面-->
<a href="http://www.imooc.com"><img src="image/headlogo/8.gif"></a>
<!--通过点击图片在另一个页面内打开新页面-->
<a href="http://www.imooc.com" target="_blank">
<img src="image/headlogo/8.gif">
</a>
</body>
</html>
锚点
锚点要保证打开的最后一页是完整的
跳转到当前页面锚点：
<html>
<head>
<title>first.html</title>
</head>
<body>
<a href="welcome.html">打开welcome.html</a>
<p><a href="#num-1">锚点1</a></p>
<p><a href="#num-2">锚点2</a></p>
<p><a href="#num-3">锚点3</a></p>
<p><a href="#num-4">锚点4</a></p>
<p><a href="#num-5">锚点5</a></p>
<a name="num-1">
<p>num-1慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</a>
<a name="num-2">
<p>num-2慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</a>
<a name="num-3">
<p>num-3慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</a>
<a name="num-4">
<p>num-4慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</a>
<a name="num-5">
<p>num-5慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p>慕课网是垂直的互联网IT技能免费学习网站.以独家视频教程、在线编程工具、学习计划、问答社区为核心特色.在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</a>
</body>
</html>
跳转到其他页面锚点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的新页面</h1>
<a href="first.html"> 单击此处返回首页 </a>
<a href="www.imooc.com">慕课网</a>
<p><a href="first.html#num-1">w锚点1</a></p>
<p><a href="first.html#num-2">w锚点2</a></p>
<p><a href="first.html#num-3">w锚点3</a></p>
<p><a href="first.html#num-4">w锚点4</a></p>
<p><a href="first.html#num-5">w锚点5</a></p>
</body>
</html>
列表
无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul>
</body>
</html>
有序列表
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
