HELLO,作为一个只学过一点点 Java 和 Python 的程序小白,为了写出自己的网站,我又一次被自己逼进了前端行业(所以 no zuo no die)
为了方便大(zi)家(ji)学习,整理了一些前端的笔记。本笔记只适用于小小白快速入门,Web 码农看看就行~
目录
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 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 学习好站点: