本文记录了一位设计师转行前端学习的第一周经历。在拉勾教育的大前端就业急训营中，通过录播加直播的课程形式学习HTML基础知识，包括基本骨架、标题、段落、换行、文本格式化、图像标签等内容。作者强调了HTML标签如<h1>、<p>、<img>等的重要性，并分享了学习过程中的笔记和体会。
拉勾教育–大前端就业急训营3期
作为一名小小的设计师，毕业后虽是顺利找到了工作，但工作内容全是一些琐碎的事。几个月下来心生辞职再谋出路的想法，最长逛的拉勾招聘专注于互联网招聘，与我想进互联网公司的想法很是契合。在看拉勾招聘中课程专栏的时候看到了前端训练营的资料,于是找拉勾的小姐姐拿到学习课程表，课程表模块清晰并有模拟项目，且与大学时候的网页制作课程比较相近，并听拉勾小姐姐说设计与前端两门技术很是契合，于是进入了前端学习之旅。
第一周的学习感受
课程是录播加直播的形式，在看录播课程的时候可能会担心自己不够自觉，从而中途偷懒，但是班级的老师会时常提醒你注意学习的进度，并且主动询问在学习上是否存在问题，对于我这腼腆的小伙汁来说简直不要太好，有种被关心的感觉。在班级群众，老师同学们都很热情，同学门经常抛出自己学习上出现的问题请教老师，老师也及时做出回应。
总的来说，第一周的学习难度适宜，能顺利跟上学习进度。
以下是第一周的部分笔记
基本骨架
HTML文件最基本的四个标签，组成了网页的基本骨架，包括：<html>、<head>、<title>、<body>四组标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<html>标签
- 作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>标签内部。
<head>标签
- 作用：用于存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。
- 注意在<head>标签中我们必须要设置的标签是title。
<title>标签
- 作用
- 1:让页面拥有一个属于自己的标题。
- 2:title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
- 3:内部的内容会显示在搜索结果的标题部分。
- 4:作为浏览器收藏夹默认的网页标题。
- 5:建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。
<body>标签
- 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签<p>,<h1>,<a>,<div>等。
- <body>内部的元素内容会显示在浏览器的窗口中。
html常用标签
###注释语法
在很多代码技术中都可以添加注释内容，我们也可以向 HTML 源代码添加注释。
- HTML注释语法：
<!-- 书写注释内容 -->
- vscode快捷键：ctrl+/
- 特点：注释仅再源码中显示，浏览器窗口不显示
- 用途：
- 1.在源代码中添加描述性的提示信息，便于我们阅读代码。
- 2.对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。
- 3.暂时注释掉一部分不用的代码，便于后期恢复代码。
HTML常用标签(标题)
标题标签
- 标题（Heading），是通过<h1>-<h6> 六个标签分别来对六个级别的标题进行定义的。
- <h1>定义最大的标题，<h6>定义最小的标题。
- <h1>-<h6> 标签都是双标签，且是容器级标签。
- 例如
一级标题
一级标题
一级标题
一级标题
一级标题
一级标题
标题级别
标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标
题解释说明的是前面距离最近的上一级标题
- 正确写法
<h1>一级标题</h1>
<h2>二级标题</h2>
- 错误写法
<h1>
<h2>二级标题</h2>
</h1>
权重
- 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推。
- <h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
- <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果
- 一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只会出现一个<h1>。
##HTML 常用标签(段落和换行)
段落标签
- 段落（paragraph）是通过<p>标签进行定义的。
- <p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等。
<p>这是一个段落</p>
- 作用：
-
标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的。
-
换行标签
- <br/>（breaking）标签是HTML中一个简单的换行符。
- <br/>标签是一个单标签。
- 在需要换行的位置可以使用<br/>标签书写，但是<br/>与<p>不同，<br/>没有建立新的段落的语义，只是简单的进行强制换行。
<p>这是第一<br/>个段落</p>
<p>这是第二个段落</p>
显示如下：
这是第一
个段落
这是第二个段落
- 注意：
- 每一对儿<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义。
- 正确写法
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
- 错误写法
<>这是第一个段落<br/>这是第二个段落<br/>这是第三个段落</p>
HTML常用标签(文本格式化标签)
文本格式化
文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
| 标签 | 描述 |
|---|---|
| b | 粗体文字，bold |
| big | 大号字 |
| em | 着重文字，emphasis，斜体效果 |
| i | 斜体字，italic |
| small | 小号字 |
| strong | 加重语气，加粗效果 |
| sub | 下标字，subscript |
| sup | 上标字，superscript |
| ins | 插入字，下划线效果，insert |
| del | 删除字，delete |
| s | 不赞成食用，用del代替，strike的简化 |
| strike | 不赞成食用，用del代替 |
| u | 定义下划线，不赞成使用，使用css中样式替代，underline |
- 演示如下
文本格式化-----b
文本格式化-----em
文本格式化-----i
文本格式化-----small
文本格式化-----strong
文本格式化文本格式化-----sub
文本格式化文本格式化-----sup
文本格式化-----ins
文本格式化-----del
文本格式化-----s
文本格式化-----u
HTML常用标签(图像)
图像标签
- 图像（image）由<img>标签进行定义。
- <img>标签是单标签，本身相当于一个特殊的文本。
- <img>标签的作用是在指定的位置插入一张图片。
- 在HTML文件，常用的插入图片的类型有：jpg、png、gif。
- 标签属性
- 由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
- <img>常用属性展示：
| 标签 | 描述 |
|---|---|
| src | 图片路径 |
| width | 图片宽度 |
| height | 图片高度 |
| border | 边框属性 |
| title | 提示文本 |
| alt | 设置图像没找到事的替换文本 |
src属性和路径
如果需要插入一张图片到HTML中，<img>标签必须设置src属性。
src：全称source资源，属性值是图片查找的路径。
路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
<img src="lagoujiaoyu.png">
宽度和高度
width：图片的宽度
height：图片的高度
属性值：以px为单位的数值，或者省略px不写。
如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。
<img src="lagoujiaoyu.png" width="100px">
<img src="lagoujiaoyu.png" height="200px">
<img src="lagoujiaoyu.png" width="200" height="100">
边框border
border：设置图片的边框。
属性值：数值，数值是几表示边框宽度为几像素。
<img src="lagoujiaoyu.png" border="10">
注意：border属性可以使用css进行设置，css中的边框有更多的设置效果。
提示文本title
title：设置的是鼠标悬停时的提示文本。
属性值：自定义的提示文字内容。
<img src="lagoujiaoyu.png" title="拉勾教育">
鼠标放置于图片上查看效果
替换文本alt
alt：设置的是图片查找错误时，出现的替换文本。
如果能正常找到图片，替换文本是不显示的。
属性值：自定义的替换内容。
<img src="cuowulujing.png" alt="这是一张拉勾教育的图片">
总结
<img>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利
于SEO搜索引擎优化。其他属性可以根据需求进行设置。
<img src="smile01.png" alt="这是一张微笑的表情">
HTML常用标签(路径)
相对路径
- 相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
- 同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；
\<img src="lagoujiaoyu.png">- 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
\<img src="images/lagoujiaoyu.png"> \<img src="images/tupian/lagoujiaoyu.png">- 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。
\<img src="../../lagoujiaoyu.png" /> \<img src="../images/lagoujiaoyu.png" />
绝对路径
- 绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
- 盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件。
<img src="C:/Users/teacher/Documents/html/case/images/lagoujiaoyu.png" />
- 网址形式：要查找的文件是来自网络资源，路径写法以http://开头。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />
- 从盘符出发的绝对路径的缺点：
- 1.盘符出发的路径不可移植，不可移动。
- 2.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
路径实际应用
- 1.建议多使用相对路径，可以适当使用网址形式的绝对路径。
- 2.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
视频&音频标签
- 音频标签audio
- 音频文件支持的格式包括：.mp3、.ogg、.wav。
<body>
<video src="音频.mp3" controls="controls"></audio>
</body>
- 视频标签video
- 视频文件支持的格式包括：.mp4、.ogg、.webm。
<body>
<video src="视频.mp4" controls="controls"></video>
</body>
- 控制条controls
- 音频&视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls
controls="controls"
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
