HELLO,作为一个只学过一点点 Java 和 Python 的程序小白,为了写出自己的网站,我又一次被自己逼进了前端行业(所以 no zuo no die)

为了方便大(zi)家(ji)学习,整理了一些前端的笔记。本笔记只适用于小小白快速入门,Web 码农看看就行~

目录

1. 什么是 HTML

2. HTML 环境配置

3. 第一个 HTML 程序

4. HTML 网页结构 

5. HTML 常用基本标签

5.1 h 标签

5.2 p 标签和 br 标签

5.3 文字样式标签

5.4 img 标签

5.5 audio 标签

5.6 video 标签

5.7 iframe 标签

5.8 a 标签

5.9 让 html 可读性更强的一些标签

6. 重点:列表

6.1 无序列表

6.2 有序列表

6.3 自定义列表

6.4 拓展:表格

7. 重点:表单

7.1 表单初识

7.2 表单元素

7.3 重置与提交

7.4 get 与 post

7.5 密码框

7.6 单选框

7.7 多选框

7.8 文本域

7.9 下拉框

8. 总结 


1. 什么是 HTML

在学习 HTML 之前,要先知道前端~ 前端简单来说,就是平常看到的一个个网页~ 有听说过前端的应该都知道前端三剑客 HTML CSS 和 JS,用通俗的话来说,如果把一个网页比作一个人,那么 HTML 就是人的身体,它只是网页的结构;CSS 就是人的衣服,它可以美化网页;而 JS 就是人的大脑,它可以控制网页的行为。理解了这些之后就可以继续 HTML 了~

HTML,全称 Hyper Text Markup Language(超文本标记语言),是一种标记语言(老师评语:重复啰嗦),它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。(来源:百度百科)

接着还需要了解一下 HTML 的“前世今生”。HTML 出生于“民国时期”,它最初于1989年由CERN的Tim Berners-Lee发明。现在已经到了第五个版本 HTML 5。

然后康康 HTML 的历史,HTML历史上有如下版本:

①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 

②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 

③HTML 3.2:1997年1月14日,W3C推荐标准。 

④HTML 4.0:1997年12月18日,W3C推荐标准。 

⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 

⑥HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。(来源:百度百科)

其实 HTML 相对于 Java 和 Python 这种语言可以说是肥肠简单了,难度仅次 Scratch,可以说有手就会,所以不要有学习鸭力~

2. HTML 环境配置

也是肥肠简单,只要有一个浏览器和前端 IDE。浏览器推荐 Edge 或 Chrome 或 Firefox,因为他们仨是主流浏览器,支持的设备多,完美支持 H5 + CSS3 + ES6。即使使用 IE,也要选择最新的 IE 11,对现代技术支持比较多,不过还是建议上面三个主流。至于国内杂牌浏览器想都不用想。如果用 Mac,Safari 也不错~(喂喂,有点离题了啊)

至于 IDE,本文推荐两款:IntelliJ IDEA 和 Sublime Text。如果电脑配置比较高,推荐使用 IDEA;如果电脑内存过不了 8GB,那就乖乖用 Sublime Text 吧。如果习惯使用 VS Code,那 VS Code 也可以~

本文使用 Sublime Text,从上面的链接下载 Sublime Text,下载完安装一路 Next,汉化及让 HTML 文件在浏览器运行见 这篇文章~

3. 第一个 HTML 程序

打开 Sublime Text,新建一个 html 文件,然后输入下面的代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello</title>
</head>
<body>
	Hello World!
</body>
</html>

接下来开始一行一行剖析:

第一行声明了这是一个 HTML 文档,Sublime 自动生成(方法后面会讲);

第二行是一个 html 标签,标签里面的就是 HTML 标签。所有标签都要在 html 标签之内。Sublime 自动生成;

第三行是一个 head 标签,html 头部标签。标签里包括一些 meta 声明和 title 标签。Sublime 自动生成;

第四、五行是 meta 声明标签。用于声明一些信息。比如第四行声明网页使用 UTF-8 字符集。Sublime 自动生成;

第六行是一个 titile 标签,用于声明网页的标题。后面的 </title> 是闭合标签。一个标签必须要闭合,这个标签才完整。闭合标签的语法是 </标签名> 但一些单行标签是可以不用闭合的,如前面的 meta 标签。标签 Sublime 自动生成;

第七行是 head 标签的闭合标签,Sublime 自动生成;

第八行是一个 body 标签,代表网页的主体;

第九行,即 body 标签之内,既可以再嵌套标签,又可以直接写东西,Sublime 自动生成;

第十、十一行是 body 和 html 标签的闭合标签,Sublime 自动生成。

尝试在浏览器中运行你的 html 文件,你应该可以看到屏幕上输出 Hello World! 了!

如何让 Sublime 自动生成一些代码呢?再新建一个文件,输入 html 再 tab,即可自动生成一些代码~

看着还挺多的,十几行呢~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

</body>
</html>

4. HTML 网页结构 

看了上面的 Hello World 实例,想必大家都知道了一个 HTML 网页的基本结构。HTML 文件由很多互相嵌套的标签组成。一般来说,一个 HTML 文件的结构如下,用 Hello World 来举例:

<!DOCTYPE html>
<!-- html 文件的主体 -->
<html>
<!-- html 头标签,用于声明 meta 和 title -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello</title>
</head>
<!-- html 网页主体 -->
<body>
	Hello World!
</body>
</html>

另外也要说说 html 里的注释,一般为 <!-- 注释内容 -->,可以用 ctrl+/ 快速生成~

5. HTML 常用基本标签

一个 html 文件是由标签组成的,所以 HTML 里的标签就相当于 Java 里的一行语句(性质不一样,但长得还是差不多的)

5.1 h 标签

先来说说 h 标签。h 标签代表标题,有 h1 ~ h6 六种不同的字号。浏览器在 h 标签的前后会自动添加换行~

h 标签的一般形式为 <h1></h1> 虽然属于单行标签,但它也要闭合~

5.2 p 标签和 br 标签

然后说说 p 标签。p 标签代表段落。p 标签的一般形式为:

<p>
    两只老虎
    两只老虎
    跑得快
    跑得快
</p>

ps: 不用注意细节

但如果直接把这段代码交给浏览器,你会看到如下一幕:

你可能会发现,换行呢?

由于 HTML 里的换行只是给程序猿看的,浏览器实际处理时根本没有换行。所以又有了一个新标签:br 换行标签。它的使用肥肠简单,就一个 <br>

在 p 标签里每句歌词后面加上一个 br,再丢给浏览器:

所以养成一个好习惯:在 p 标签每写一行后面加 <br>~

5.3 文字样式标签

接下来是关于文字的~

废话不多说,直接上代码:

<!-- 加粗 -->
<strong>一只没有眼睛</strong><br>
<!-- 斜体,em 标签让我想起了 emm -->
<em>一只没有耳朵</em><br>
<!-- 上标 -->
<sub>真奇怪</sub>
<!-- 下标 -->
<sup>真奇怪</sup>

然后丢给浏览器: 

 

 效果应该大家都看到了吧~

5.4 img 标签

然后是图片标签 img,这里要知道一个标签属性,比如 <img src=""> src 就是 img 标签的属性~

上代码:

<!-- 这张图片是我电脑壁纸 -->
<img src="D:\image.jpg">

src 属性指向图像的本地路径或 URL~

废话不多说,丢给浏览器:

我们也可以用 width 和 height 属性强制指定 img 的大小:

<!-- 没错又是这张壁纸 -->
<img src="D:\image.jpg" width="300px" height="230px">

 px 全称 pixel,代表像素。虽然 HTML 数字不加单位不会报错,但后面 CSS 会呀~

所以养成一个习惯:数字后面加 px(还有 em 等单位,不过不常用)

丢给浏览器:

壁纸被压缩得扁扁的~

5.5 audio 标签

接着是音频(IE 8 及以下不支持)

<audio controls>
	<source src="D:\river.mp3" type="audio/mpeg">
</audio>

 (由于只有 mp3 格式是全浏览器支持,所以我们尽量选择 mp3 格式的音频~)

丢给浏览器,会看到一个音频播放栏,点击三角形播放键即可播放声音~

(另外,audio 是可以加入 autoplay 属性的,作用自动播放音频,语法 <audio controls autoplay>,但我亲测最新的 Edge 100 都不支持这个属性,所以就当玩玩吧)

5.6 video 标签

我想很多人都会疑惑藤训视频或爱奇艺的视频是怎么播放的,其实根本不需要 video 标签~

它们的视频实现方法是用 Flash 实现的(离题警告),但 Flash 太复杂,我们可以使用 HTML5 原汁原味的 video 标签(IE 8 及以下不支持)

video 标签和 audio 差不多:

<video controls>
	<source src="D:\movie.mp4" type="video/mp4">
</video>

丢给浏览器,你可以看到一个视频播放栏,和音频一样,点击小三角形即可播放~

如果想让视频变得大一些,可以使用 width 和 height 属性设置:

<!-- 怎么又是那只熊,看了烦 shi 了 -->
<video width="1000px" height="550px" controls>
	<source src="D:\movie.mp4" type="video/mp4">
</video>

 上效果:

怎么样,够大了吧~

5.7 iframe 标签

简单来说,iframe 标签就是在一个 html 网页中再嵌套一个网页~

废话不多说,上代码:

<!-- B站从来没有想过有一天自己会被关进 iframe -->
<iframe src="https://www.bilibili.com"></iframe>

丢进浏览器,壮观的一幕诞生了~

 如果觉得这个 iframe 太小,可以手动调整 width 和 height 属性:

<iframe src="https://www.bilibili.com" width="1000px" height="550px"></iframe>

丢进浏览器: 

5.8 a 标签

最后一个常用、简单、重要的标签——链接 a 标签~

基本语法:

<a href="">点击我</a>

举个栗子,跳转到百度:

<a href="https://www.baidu.com">点击跳转百度</a>

丢进浏览器:

点击一下那个链接,就会自动跳转百度~

由于 a 标签默认是在当前页面跳转,如何让它在新标签页跳转呢?

只需要加上一个属性 target="_blank":

<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>

再丢进浏览器,点击链接,你会发现它在新标签页打开了,且原来页面没有关闭:

如果一篇文章很长,想在底部跳转顶部?这时候就需要用到锚链接。锚链接也是 a 标签的一种。需要在要跳转的地方做上标记,然后用 a 链接跳转至标记处。举个栗子:

<!-- 用 id 属性标记 -->
<h1 id="head">我是头部</h1>
<p>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
<!-- # 号加 id 后面的标记名跳转到标记所在处 -->
<a href="#head">点击我跳转到顶部</a>

丢进浏览器,点击下面的锚链接:

你会发现它自动跳转到头部去了~

5.9 让 html 可读性更强的一些标签

下面讲的这些标签一点实质用处都没有,但是可以让整个 html 文档可读性更强(注:IE 8 及以下不支持)

下面列举一下它们:

标签名 语义作用
header 网页/文章头部(注:不是 html 文件的头部)
nav 导航栏
article 独立组件,如文章或评论区
aside 侧边栏/附属信息
section 子组件,如一篇文章的一个章节
footer 网页/文章尾部

至于它们的作用。。。就当成一个变异的 p 标签吧~

6. 重点:列表

列表其实不算重点,但又比上面几个重点一些~

6.1 无序列表

个人使用最多的一个列表,也是最重点的列表~

上代码:

<!-- ul 是列表主体 -->
<ul>
    <!-- li 是列表中的一项 -->
	<li>列表项 1</li>
	<li>列表项 2</li>
	<li>列表项 3</li>
</ul>

丢进浏览器:

6.2 有序列表

其实就是 ul 换成了 ol:

前端三剑客:
<!-- ul 换成了 ol -->
<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
</ol>

丢进浏览器:

6.3 自定义列表

这个我学了之后就从来没用过,所以不记了~

如果想了解见 这篇教程

6.4 拓展:表格

其实表格我学了也很少用,但是还是得记得(上面的自定义列表:宝宝心里苦)

上代码:

<!-- table 新建一个表,border 表示边框宽度 -->
<table border="1px">
	<!-- tr 标签新建一行 -->
	<tr>
		<!-- td 标签新建一项 -->
		<td>小明</td>
		<td>0分</td>
	</tr>
	<tr>
		<td>小红</td>
		<td>100分</td>
	</tr>
</table>

送给浏览器:

7. 重点:表单

表单,HTML 重重点~

之前听过的很多教程都是注册会员账号,今天咱们来个注销账号~

7.1 表单初识

表单没有多少花里胡哨的操作,朴朴素素才是真~

<h1>注销账号</h1>
<form method="get">
</form>

上面的 method 属性可以填 get 也可以填 post,学习建议用 get,而正式环境建议用 post,原因后面讲。而 action 属性是指定表单提交到哪去~

7.2 表单元素

一个表单是由很多个元素组成的。元素都要在 form 标签内,且都要有 name 属性。不说了先拿最简单的文本框举栗子~

用户名:<input type="text" name="username">

送入浏览器:

一个表单就是由很多这种元素组合起来的~

7.3 重置与提交

两个一起上:

<input type="reset">
<input type="submit">

与其它不同的是,这两个元素不需要 name 属性~

然后再新建一个 1.html,内容随便写~

丢进浏览器看效果:

如果觉得它们都在同一行可以 <br> ~

试着在文本框里输入一些内容,点击“重置”,刚刚的东西全被清空了~

再输入一些内容,点击提交,就自动跳转到新页面了~

7.4 get 与 post

为什么正式环境建议用 post 而不是 get 呢?

先打开之前的表单,随便输入一些数据,点击“提交”,然后跳转到新页面~

打开上方地址栏,滑到最右边,你应该会发现一个 ?username=copcin 这样的值。这就是表单提交的数据。由于 get 提交的数据就这样暴露出来了,所以不够安全~

这时候 post 就出现作用了。post 和 get 一样都可以正常提交数据,但是 post 的数据不会显示出来,被隐藏起来了。所以 post 更安全。感兴趣的童鞋可以试试~

7.5 密码框

像很多表单,都要输入自己的密码,比如登录、注册,还有今天的注销~ 像普通文本一样处理密码,显然会出现一些问题:密码显示在屏幕上了。这时候就出现了一个密码框,它能把用户输入的信息隐藏起来,保证了用户的安全(话说密码隐藏了这么多年,真的有人去看你的电脑屏幕吗)

不多说了,上代码:

密码:<input type="password" name="password">

只是 type 变成了 password~
丢进浏览器,在密码栏中随便输入一些字符,你会发现,浏览器都帮你隐藏起来了~

7.6 单选框

其实单选框跟网上考试的时候的 ABCD 差不多~ 单选框提交上去的值保存在 value 属性中。但是这里有一个问题:怎么把多个单选框分组。这时候 name 属性又起了作用。只需要把同在一组的单选框赋同一个 name 值。上代码:

性别:<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女<br>

送入浏览器。你会发现男跟女两个选项只能选一个~

如果想让一个值作为初始值被选中,可以加上 checked 属性:

性别:<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女<br>

上效果:

如果想把一个值禁用,可以加上 disabled 属性:

性别:<input type="radio" name="sex" value="boy" disabled>男
<input type="radio" name="sex" value="girl">女<br>

丢进浏览器,你会发现“男”这个选项已经被禁用了(放心我还会把它改回来~)~

7.7 多选框

和单选框差不多,只是 radio 换成了 checkbox ~

注销原因:<input type="checkbox" name="why" value="dislike">不喜欢我们了
<input type="checkbox" name="why" value="wedobad">我们做的不好
<input type="checkbox" name="why" value="wantleave">单纯想离开<br>

上效果:

同样单选框的 checked 和 disabled 属性也适用于多选框~

7.8 文本域

看起来就像是多行的文本框~

反馈:<br>
<textarea name="textarea" placeholder="您的反馈能给我们带来帮助,谢谢!"></textarea><br>

(其中 placeholder 属性是提示字,当写入东西时会自动消失,也适用于文本框~)

丢入浏览器:

textarea 也可以使用 width 和 height 属性自定义长宽,方法不再赘述~

7.9 下拉框

最后一个:下拉框~ 常用于国家,时间选择~

上代码:

国家:
<select name="country">
<option value="china">中国</option>
<option value="america">美国</option>
<option value="british">英国</option>
</select><br>

上效果:

disabled 属性在 option 中适用,但 checked 要换成 selected~

这样一个有模有样的注销账号页面就制作完成啦~

8. 总结 

HTML 只是前端的最基础,作为一个学完三件套刚不久的小白,后面的 CSS 和 JS 可以预告才是真的难~ 你学废了吗~

由于我的笔记可能写的不好或者不全,这里提供两个 HTML 学习好站点:

https://www.runoob.com/html/html-tutorial.html

https://www.bilibili.com/video/BV1x4411V75C