# 学习环境

前端学习基本上存在浏览器和开发工具即可 浏览器使用chrome
开发工具使用 vscode 免费开源跨平台
用到后台服务器时使用 wamp、xampp、mamp根据自己的操作系统选择
chrome chrome是google推出的市场占有率最高的浏览器。因为chrome是开源的所以我们用的很多国内浏览器都是基于 chrome开发的。

查看源码 通过查看其他网站源码有助于新手学习,同时有些HTML是后台脚本如PHP渲染出来的,通过查看源码可以帮助我们分析问题。

控制台 console是使用最多的调试功能,在html/css/js都会使用到

# 基础知识

HTML 不是一种编程语言,而是一种标记语言 (Markup language),是网页制作所必备的。用于按不同标签声明网页中的内容。
1

通过下图我们可以看到,一个网页是由很多区域组合构成的,即使用 HTML 标签布局。

# 文件命名

使用小写字线命名文件,不要出现中文字符 扩展名标准是.html,当然也可以使用.htm 多个单词可以使用- 或 _ 连接,建议使用- 字符如user-create.html

# URL

统一资源定位符,用于表示资源在网络上的地址,每个部分以/进行分隔。

资源访问

https://www.houdunren.com/edu/front/lesson/298.html
1

FTP文件下载

ftp://ftp.houdunren.com/download/php.pdf
1

MAILTO邮箱地址

mailto:2300071698@qq.com
1

# 访问路径

绝对路径 绝对路径包含主机+服务器地址+目录+文件名的完整路径

https://www.houdunren.com/edu/front/lesson/298.html
1

相对路径 相对路径是指相对当前目录的地址

# 当前目录的文件
2.html 或者./2.html

# 上级目录中的文件
../3.html

# 子目录中的文件
block/user.html

# 根目录中的文件
/bootstrap.html
1
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 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 页面结构

# 语义标签

HTML标签都有具体语义,非然技术上可以使用div标签表示大部分内容,但选择清晰的语义标签更容易让人看明白。比如 h1表示标题、p标签表示内容、强调内容使用em标签。

<article>
   <h1>后盾人</h1>
   <p>在线学习平台</p>
</article>
1
2
3
4

# 嵌套关系

元素可以互相嵌套包裹,即元素存在父子级关系。

<article>
  <h1>后盾人</h1>
  <div>
    <p>在线学习平台</p>
    <span>houdunren.com</span>
  </div>
</article>
1
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>
1
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> 设定页面中程序脚本的内容   
1
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=过渡方式)”>
1
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>
1
2
3
4
5
6

# 页眉页脚

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

footer 标签定义文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

<body>
    ...
    <article>
        <h2>后盾人网站动态</h2>
        <ul>
            <li><a href="">完成签到 开心每一天</a></li>
            <li><a href="">完成签到 来了,老铁</a></li>
        </ul>
    </article>
    <footer>
        <p>
            我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
        </p>
    </footer>
</body>
1
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>
1
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>
1
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>
1
2
3
4
5
6
7
8
9

# 区块定义

使用 section 定义一个区块,一般是一组相似内容的排列组合。

<main>
   <article>
     <section>
       <h2>锁机制</h2>
     </section>
     <section>
      <h2>事物处理</h2>
     </section>
   </article>
</main>
1
2
3
4
5
6
7
8
9
10

# 附加区域

使用 aside 用于设置与主要区域无关的内容,比如侧面栏的广告等。

<body>
  <main>
    <article>
      ...
    </article>
    </main>
    <aside>
      <h2>社区小贴</h2>
      <p>后盾人是一个主张友好、分享、自由的技术交流社区。</p>
    </aside>
  </main>
</body>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 文本相关

# 基本标签

# p

p标签标记了一个段落内容。

<p>
录制视频是一个很费时的工作,老师需要时间录制更多高质量的视频教程。不可能做到随时解答问题,我们希望大家可以互相帮助提升技术,而不是直接简单的获取答案。
</p>
1
2
3

# pre

原样显示文本内容包括空白、换行等。

<pre>
        这是pre标签的显示效果
              这是换行后的内容,空白和换行都会保留
</pre>
1
2
3
4

# br

在html 中回车是忽略的,使用 br 标签可以实现换行效果。

# nobr

在标记之间的文字在显示的过程中不会自动换行。

<BODY>
<!--当浏览器宽度不够时,文本内容会自动换行显示-->
World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布式的信息资源网络。
<!--下面这段文字不会自动换显示,当浏览器宽度不够时,会出现滚动条-->
<p><nobr>World Wide Web(万维网WWW)是一种建立在Internrt上的、全球性的、交互的、多平台的、分布式的信息资源网络。</nobr></p>
</BODY>

1
2
3
4
5
6
7

# span

span 标签与 div 标签都是没有语义的,span 常用于对某些文本特殊控制,但该文本又没有适合的语义标签。

<span> 标签被用来组合文档中的行内元素。
<p><span>some text.</span>some other text.</p>
1
2

使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。

//HTML:
<p class="tip"><span>提示:</span>... ... ...</p>
//CSS:
    p.tip span {
	     font-weight:bold;
	     color:#ff9955;
	       }
1
2
3
4
5
6
7

span 标签支持 HTML 中的全局属性。 span 标签支持 HTML 中的事件属性。

# center

居中对齐标记 ,即对其所包括的文本进行水平居中。 注释:提示:请使用 CSS 样式来居中文本!

`<center>`元素是一个独立的使所标记的字符居中的元素。它的作用与使用`<p>`元素里的align=“center”类似  
1
<BODY>
<center>
<p>汉乐府《长歌行》</p>
百川东到海,何时复西归?<br/>
少壮不努力,老大徒伤悲。</center>
</BODY> 

1
2
3
4
5
6
7

# hr

使用水平线

<hr> 标签用于在页面上绘制水平线 
1
<hr> 标签属性 
Align:对齐方式,如left、center、right
Width:设置线长
Size:设置线宽
Color:设置线的颜色
Noshade:去掉水平线阴影
1
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”>
莫道不消魂,帘卷西风,人比黄花瘦

1
2
3
4
5
6
7
8

# 描述文本

# small

small 用于设置描述、声明等文本。

<small> 半年付 </small>
1

# time

标签定义日期或时间,或者两者。

<time> 2019-07-26 </time>

1
2

# abbr

abbr标签用于描述一个缩写内容

在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫 <abbr title="Uniform Resource Locator">URL</abbr> 统一资源定位符。
1

# sub

用于数字的下标内容

水的化学式为H<sub>2</sub>O
1

# SUP

用于数字的上标内容

请计算5<sup>2</sup>平方
1

# del

del 标签表示删除的内容,ins 一般与 del 标签配合使用描述更新与修正。

原价 <del>200元</del> 现价 <ins>100元</ins>
1

# s

s 标签显示效果与 del 相似,但语义用来定义那些不正确、不准确或没有用的文本。

<s>A 太阳是方的</s> <br>
B 地球是圆的
1
2

# code

用于显示代码块内容,一般需要代码格式化插件完成。

<code>
git命令
git status :查看代码修改情况
git add .\src\ :将修改添加到暂存区
git commit -m '说明文字' :将更改和日志消息一起存储到新的提交中
git pull :把gitlab上面的代码拉取下来
git push :把提交中的代码推送到gitlab上
</code>
1
2
3
4
5
6
7
8

# progress

用于表示完成任务的进度,当游览器不支持时显示内容。

<progress value="60" max="100">完成60%</progress>
1

# 强调文本

# strong

strong 标签和 em 一样,用于强调文本,但是它们的强调程度不同。

<strong>后盾人</strong>专注WEB开发技术,不断更新<em>视频教程</em>
1

# mark

用于突出显示文本内容,类似我们生活中使用的马克笔。 请认真在后盾人学习以下语言

<mark>PHP</mark>、<mark>JavaScript</mark>
1
请认真在后盾人学习以下语言 <mark>PHP</mark>、<mark>JavaScript</mark>
1

# 引用标签

# cite

cite 标签通常表示它所包含的文本对某个参考文献的引用,或文章作者的名子。

最新版PHP视频教程已经在 <cite>后盾人</cite> 录制完成。
1

# blockquote

blockquote 用来定义摘自另一个源的块引用 下而是来自某一个大叔,对失败的认知

<blockquote cite="https://www.houdunren.com">
	在坚持的人面前,失败终将被踏过。
</blockquote>
1
2
3

# q

q 用于表示行内引用文本,在大部分浏览器中会加上引号。

最新课程 <q>HTML开启WEB征途</q> 已经发布了
1

# 联系信息

# address

用于设置联系地址等信息,一般将address 放在footer 标签中。

<address>
	感谢您提交建议到 2300071698@qq.com
</address>
1
2
3

# 特殊字符

 ‘’  &quot;    //引号 <br>
 <   &lt;      //左尖括号 <br>
 >   &gt;      //右尖括号 <br>
 ×   &times;    //乘号 <br>
 §   &sect;     //小节符号 <br>
 ©   &copy;     //版权所有的符号  <br>
 ®    &reg;      //已注册的符号 <br>
 ™    &trade;     //商标符号  <br>
1
2
3
4
5
6
7
8
更新时间: 2023-1-29 18:57:07