# 学习环境
前端学习基本上存在浏览器和开发工具即可
浏览器使用chrome
开发工具使用 vscode 免费开源跨平台
用到后台服务器时使用 wamp、xampp、mamp根据自己的操作系统选择
chrome
chrome是google推出的市场占有率最高的浏览器。因为chrome是开源的所以我们用的很多国内浏览器都是基于 chrome开发的。
查看源码 通过查看其他网站源码有助于新手学习,同时有些HTML是后台脚本如PHP渲染出来的,通过查看源码可以帮助我们分析问题。
控制台 console是使用最多的调试功能,在html/css/js都会使用到
# 基础知识
HTML 不是一种编程语言,而是一种标记语言 (Markup language),是网页制作所必备的。用于按不同标签声明网页中的内容。
通过下图我们可以看到,一个网页是由很多区域组合构成的,即使用 HTML 标签布局。
# 文件命名
使用小写字线命名文件,不要出现中文字符 扩展名标准是.html,当然也可以使用.htm 多个单词可以使用- 或 _ 连接,建议使用- 字符如user-create.html
# URL
统一资源定位符,用于表示资源在网络上的地址,每个部分以/进行分隔。
资源访问
https://www.houdunren.com/edu/front/lesson/298.html
FTP文件下载
ftp://ftp.houdunren.com/download/php.pdf
MAILTO邮箱地址
mailto:2300071698@qq.com
# 访问路径
绝对路径 绝对路径包含主机+服务器地址+目录+文件名的完整路径
https://www.houdunren.com/edu/front/lesson/298.html
相对路径 相对路径是指相对当前目录的地址
# 当前目录的文件
2.html 或者./2.html
# 上级目录中的文件
../3.html
# 子目录中的文件
block/user.html
# 根目录中的文件
/bootstrap.html
2
3
4
5
6
7
8
9
10
11
# 注释
使用注释对一段html代码进行说明,方便自己或同事在未来清楚的明白代码意图。
<!-- 这是导航条 START -->
<header role="navigation">
<nav>
<ul>
<li>
<a href="">后盾人首页</a>
</li>
<li>
<a href="">系统课程</a>
</li>
</ul>
</nav>
</header>
<!-- 这是导航条 END -->
2
3
4
5
6
7
8
9
10
11
12
13
14
# 页面结构
# 语义标签
HTML标签都有具体语义,非然技术上可以使用div标签表示大部分内容,但选择清晰的语义标签更容易让人看明白。比如 h1表示标题、p标签表示内容、强调内容使用em标签。
<article>
<h1>后盾人</h1>
<p>在线学习平台</p>
</article>
2
3
4
# 嵌套关系
元素可以互相嵌套包裹,即元素存在父子级关系。
<article>
<h1>后盾人</h1>
<div>
<p>在线学习平台</p>
<span>houdunren.com</span>
</div>
</article>
2
3
4
5
6
7
# 基本结构
下面是HTML文档的基本组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="keyword" content="Mysql,Laravel,Javascript,HTML,CSS,ES6,TYPESCRIPT,后盾人,后盾人教程" />
<meta name="description" content="后盾人专注WEB开发,高密度更新视频教程" />
<title>后盾人</title>
</head>
<body>
这里是页面显示的内容
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
标签 | 说明 |
---|---|
DOCTYPE | 声明为HTML文档 |
html lang | 网页的语言,如en/zh等,非必选项目 |
head | 文档说明部分,对搜索引擎提供信息或加载CSS、JS等 |
title | 网页标题 |
keyword | 搜索引擎说明你的网页的关键词 |
description | 向搜索引擎描述网页内容的摘要信息 |
body | 页面主体内容 |
头部标记如下表所示
<base> 当前文档的URL全称(基底网址)
<basefont> 设定基准的文字字体、字号和颜色
<title> 设定显示在浏览器左上方的标题内容
<isindex> 表明该文档是一个可用于检索的网关脚本,由服务器自动建立
<meta> 有关文档本身的元信息,例如用于查询的关键字,用于获取该文档的有效期等
<style> 设定CSS层叠样式表的内容
<link> 设定外部文件的链接
<script> 设定页面中程序脚本的内容
2
3
4
5
6
7
8
# meta标记
meta元素提供的信息是用户不可见的,它不显示在页面中,一般用来定义页面信息的名称、关键字、作者等。 在HTML中,meta标记不需要设置结束标记,在一个尖括号内就是一个meta内容,而在一个HTML头页面中可以有多个meta元素。 meta元素的属性有两种:name和http-equiv,其中name属性主要用于描述网页,以便于搜索引擎机器人查找、分类。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(关键字)。
<meta>元素位于<head></head>之间,常有以下用法:
用来标记搜索引擎在搜索你的页面时所取出的关键词
<meta name=“keywords” content=“具体的关键字">
用来标记文档的作者
<meta name=“author” content=“作者的姓名">
用来标记你的页面的解码方式
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>
用来描述页面是为了便于搜索引擎的查找
<meta name=“description” content=“对页面的描述语言”>
用来设置编辑工具
<meta name=“generator” content=“编辑软件的名称">
用来限制搜索方式
<meta name=“roborts” content=“搜索方式">
用来设置网页的定时跳转
<meta http-equiv=“refresh” content=“跳转时间;url=链接地址”>
用来设定有效期限,一旦过期则必须到服务器上重新调用。
<meta http-equiv=“expires” content=“到期的时间”>
用来禁止从缓存中调用
<meta http-equiv =“cache-control" content=“no-cache">
<meta http-equiv =“pragma" content=“no-cache">
用来删除过期的cookie
<meta http-equiv =“set-cookie” content=“到期的时间">
用来强制打开新窗口
<meta http-equiv=“window-target” content=“_top”>
用来设置网页的过渡效果
<meta http-equiv=“过渡事件” content=“revealtrans(duration=过渡效果持续时间,transition=过渡方式)”>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 内容标题
标题使用 h1 ~ h6 来定义,用于突出显示文档内容。
从 h1到h6对搜索引擎来说权重会越来越小 页面中最好只有一个h1标签 标题最好不要嵌套如 h1内部包含 h2 下面是使用默认样式的标题效果,掌握CSS后我们就可以随意美化了。
<h1>后盾人</h1>
<h2>houdunren.com</h2>
<h3>hdcms.com</h3>
<h4>houdunwang.com</h4>
<h5>doc.houdunren.com</h5>
<h6>www.hdcms.com</h6>
2
3
4
5
6
# 页眉页脚
# header
header标签用于定义文档的页眉,下图中的红色区域都可以使用header标签构建。
<body>
<header>
<nav>
<ul>
<li><a href="">系统学习</a></li>
<li><a href="">视频库</a></li>
</ul>
</nav>
</header>
<article>
<h2>后盾人网站动态</h2>
<ul>
<li><a href="">完成签到 开心每一天</a></li>
<li><a href="">完成签到 来了,老铁</a></li>
</ul>
</article>
...
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# footer
footer 标签定义文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
<body>
...
<article>
<h2>后盾人网站动态</h2>
<ul>
<li><a href="">完成签到 开心每一天</a></li>
<li><a href="">完成签到 来了,老铁</a></li>
</ul>
</article>
<footer>
<p>
我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
</p>
</footer>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 导航元素
在HTML中使用nav设置导航链接。
<header>
<nav>
<ul>
<li>
<a href="">系统学习</a>
</li>
<li>
<a href="">视频库</a>
</li>
</ul>
</nav>
</header>
2
3
4
5
6
7
8
9
10
11
12
# 主要区域
HTML5中使用 main 标签表示页面主要区域,一个页面中main元素最好只出现一次。
<body>
...
<main>
<article>
<h2>网站动态</h2>
<ul>
<li><a href="">完成签到 开心每一天</a></li>
<li><a href="">完成签到 来了,老铁</a></li>
</ul>
</article>
</main>
...
</body>
2
3
4
5
6
7
8
9
10
11
12
13
# 内容区域
使用 article 标签规定独立的自包含内容区域。不要被单词的表面意义所局限,article 标签表示一个独立的内容容器。
<main>
<article>
<h2>后盾人网站动态</h2>
<ul>
<li><a href="">完成签到 开心每一天</a></li>
<li><a href="">完成签到 来了,老铁</a></li>
</ul>
</article>
</main>
2
3
4
5
6
7
8
9
# 区块定义
使用 section 定义一个区块,一般是一组相似内容的排列组合。
<main>
<article>
<section>
<h2>锁机制</h2>
</section>
<section>
<h2>事物处理</h2>
</section>
</article>
</main>
2
3
4
5
6
7
8
9
10
# 附加区域
使用 aside 用于设置与主要区域无关的内容,比如侧面栏的广告等。
<body>
<main>
<article>
...
</article>
</main>
<aside>
<h2>社区小贴</h2>
<p>后盾人是一个主张友好、分享、自由的技术交流社区。</p>
</aside>
</main>
</body>
2
3
4
5
6
7
8
9
10
11
12
# 通用容器
div 通用容器标签是较早出现的,也是被大多数程序员使用最多的容器。不过我们应该更倾向于使用有语义的标签如article/section/aside/nav 等。
有些区域这些有语义的容器不好表达,这时可以采用div容器,比如轮播图效果中的内容。
</header>
<main>
<article>
<section>
<h2>事物处理</h2>
</section>
</article>
<aside>
<h2>社区小贴</h2>
<p>后盾人是一个主张友好、分享、自由的技术交流社区。</p>
</aside>
</main>
<footer>
<p>
我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
</p>
</footer>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 文本相关
# 基本标签
# p
p标签标记了一个段落内容。
<p>
录制视频是一个很费时的工作,老师需要时间录制更多高质量的视频教程。不可能做到随时解答问题,我们希望大家可以互相帮助提升技术,而不是直接简单的获取答案。
</p>
2
3
# pre
原样显示文本内容包括空白、换行等。
<pre>
这是pre标签的显示效果
这是换行后的内容,空白和换行都会保留
</pre>
2
3
4
# br
在html 中回车是忽略的,使用 br 标签可以实现换行效果。
# nobr
在标记之间的文字在显示的过程中不会自动换行。
<BODY>
<!--当浏览器宽度不够时,文本内容会自动换行显示-->
World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布式的信息资源网络。
<!--下面这段文字不会自动换显示,当浏览器宽度不够时,会出现滚动条-->
<p><nobr>World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布式的信息资源网络。</nobr></p>
</BODY>
2
3
4
5
6
7
# span
span 标签与 div 标签都是没有语义的,span 常用于对某些文本特殊控制,但该文本又没有适合的语义标签。
<span> 标签被用来组合文档中的行内元素。
<p><span>some text.</span>some other text.</p>
2
使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。
//HTML:
<p class="tip"><span>提示:</span>... ... ...</p>
//CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
2
3
4
5
6
7
span 标签支持 HTML 中的全局属性。 span 标签支持 HTML 中的事件属性。
# center
居中对齐标记 ,即对其所包括的文本进行水平居中。 注释:提示:请使用 CSS 样式来居中文本!
`<center>`元素是一个独立的使所标记的字符居中的元素。它的作用与使用`<p>`元素里的align=“center”类似
<BODY>
<center>
<p>汉乐府《长歌行》</p>
百川东到海,何时复西归?<br/>
少壮不努力,老大徒伤悲。</center>
</BODY>
2
3
4
5
6
7
# hr
使用水平线
<hr> 标签用于在页面上绘制水平线
<hr> 标签属性
Align:对齐方式,如left、center、right
Width:设置线长
Size:设置线宽
Color:设置线的颜色
Noshade:去掉水平线阴影
2
3
4
5
6
<BODY>
<h3 align="center">李清照 </h3>
<hr noshade size="3" align="center" width="30%">
<hr size="5" align="left" width = "80%" >
<hr noshade color="#CC3300" size="7" >
<P align=“center”>
莫道不消魂,帘卷西风,人比黄花瘦
2
3
4
5
6
7
8
# 描述文本
# small
small 用于设置描述、声明等文本。
<small> 半年付 </small>
# time
标签定义日期或时间,或者两者。
<time> 2019-07-26 </time>
2
# abbr
abbr标签用于描述一个缩写内容
在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫 <abbr title="Uniform Resource Locator">URL</abbr> 统一资源定位符。
# sub
用于数字的下标内容
水的化学式为H<sub>2</sub>O
# SUP
用于数字的上标内容
请计算5<sup>2</sup>平方
# del
del 标签表示删除的内容,ins 一般与 del 标签配合使用描述更新与修正。
原价 <del>200元</del> 现价 <ins>100元</ins>
# s
s 标签显示效果与 del 相似,但语义用来定义那些不正确、不准确或没有用的文本。
<s>A 太阳是方的</s> <br>
B 地球是圆的
2
# code
用于显示代码块内容,一般需要代码格式化插件完成。
<code>
git命令
git status :查看代码修改情况
git add .\src\ :将修改添加到暂存区
git commit -m '说明文字' :将更改和日志消息一起存储到新的提交中
git pull :把gitlab上面的代码拉取下来
git push :把提交中的代码推送到gitlab上
</code>
2
3
4
5
6
7
8
# progress
用于表示完成任务的进度,当游览器不支持时显示内容。
<progress value="60" max="100">完成60%</progress>
# 强调文本
# strong
strong 标签和 em 一样,用于强调文本,但是它们的强调程度不同。
<strong>后盾人</strong>专注WEB开发技术,不断更新<em>视频教程</em>
# mark
用于突出显示文本内容,类似我们生活中使用的马克笔。 请认真在后盾人学习以下语言
<mark>PHP</mark>、<mark>JavaScript</mark>
请认真在后盾人学习以下语言 <mark>PHP</mark>、<mark>JavaScript</mark>
# 引用标签
# cite
cite 标签通常表示它所包含的文本对某个参考文献的引用,或文章作者的名子。
最新版PHP视频教程已经在 <cite>后盾人</cite> 录制完成。
# blockquote
blockquote 用来定义摘自另一个源的块引用 下而是来自某一个大叔,对失败的认知
<blockquote cite="https://www.houdunren.com">
在坚持的人面前,失败终将被踏过。
</blockquote>
2
3
# q
q 用于表示行内引用文本,在大部分浏览器中会加上引号。
最新课程 <q>HTML开启WEB征途</q> 已经发布了
# 联系信息
# address
用于设置联系地址等信息,一般将address 放在footer 标签中。
<address>
感谢您提交建议到 2300071698@qq.com
</address>
2
3
# 特殊字符
‘’ " //引号 <br>
< < //左尖括号 <br>
> > //右尖括号 <br>
× × //乘号 <br>
§ § //小节符号 <br>
© © //版权所有的符号 <br>
® ® //已注册的符号 <br>
™ ™ //商标符号 <br>
2
3
4
5
6
7
8