三小时入门前端教程笔记HTML篇
视频教程来自B站,本教程供大家参考复习以及参照学习。本文档用于解决一些学习疑问,以及简单入门,我十分推荐大家访问阅读“菜鸟教程”
视频教程链接: b站前端快速入门教程
让我们开始学习吧!
菜鸟教程链接:菜鸟教程
- 前端入门,看完总会有收获的
1.前端简介
简单来说前端主要是由HTML,CSS,以及JavaScript三大技术组成,下面我们将以房子为例子与大家介绍。
HTML简介
这是一种超文本标记语言,主要负责网页开发中内容(也就是文本)的编辑,正如同我现在正在使用的Markdown语法编辑这篇文章。HTML正如毛坯房,未加任何装饰,仅仅是文字的堆砌。
CSS简介
它是网页页面的装修工,它对网页及HTML文本进行外表上的加工,使网页更加美观。
JavaScript简介
这是一门编程语言,它的作用正是使网页动态效果和与人的交互性更加良好。它通过各种已建成库的使用,使网页更加智能。它就像房子中的智能家居,优化人们的住房体验。
2.安装 vs code 开发环境(此处根据视频p2安装下载即可)
3.HTML简介及环境搭建
HTML是以标签(对)为基本组成,来对文本进行编辑。
视频对html基本组成进行了相关介绍,了解即可此处不加赘述。
搭建环境
- 进入vscode的方式:可以是新建文件夹-在文件夹下目录页输入cmd进入命令行输入code .进入vscode;或者直接进入vscode打开文件夹。
- 新建文件,命名为demo.html(demo是演示的意思—当然也可以是其他任何名字,.html是文档后缀格式)
- 在代码部分输入!按下tab即可生成HTML框架
- 标题在title标签对中进行更改,右键open with live serve即可在网页中查看。
- else每次编程结束后按下ctrl+s保存后网页内容才会更改。也可在vscode后端更改设置,让代码自动保存,这样网页就可实时显示。接下来的内容都会在标签对中进行书写。
4.常用文本标签(对)
- 加粗,斜体,下划线以及删除线的实现标签对
加粗<b>
;斜体<i>
;下划线<u>
;删除线<s>
- 表格(无序列表,有序列表,以及列表)的实现形式
无序列表<ul>
;有序列表<ol>
表格<table>//表格 <tr>//行标签 <th>//表格列标题,<td>//表格数据
表格加边框<table border="1"></table>
5.HTML的标签属性
- 标签属性介绍
<开始标签名 属性名=“属性值”>
例如上边的border就是属性名(不区分大小写),1就是属性值(区分大小写)。 - 通用标签属性(了解即可,后边学到css会用到)
属性 描述 class 为HTML元素定义一个或多个类名(类名从样式文件引入) id 定义元素唯一的id style 规定元素的行内样式 - 链接标签及图片标签其属性
- 链接标签
<a href=""></a>
href属性代表地址,属性内容填写链接地址
<a href=""target=""></a>
target属性代表链接打开方式,属性内容self
表示从当前页面跳转,而blank
表示从新的标签页跳转 - 图片标签
<img src="" alt="">
src属性代表地址,属性内容输入图片地址alt属性代表文本内容,属性内容输入文本,当src地址失效无法显示的情况下alt显示。
width属性和height属性调整图片大小和宽度
- 链接标签
<br><hr>
单标签
<br>
换行标签<hr>
分隔标签,由于他们都无内容,所以无需成对标签。上边的链接标签和图片标签都是行内,所以一般要依靠他们来换行。由于我现在使用的markdown语法与html如出一辙,我现在演示以下标签效果
代码内容1<br>2
换行效果如下:
1
2
代码内容1<hr>2
分隔线效果如下:
1
2
6.块元素与行内元素
- 块元素:在页面中占据整行宽度,可以包含其他块级元素和行元素。eg:
<div><p><h><ol><ul><table><li><form>
等
<div>
全称Division(分隔),在菜鸟教程中描述是** 定义文档中的节**,就是一个“容器”,能容纳其他块元素和行内元素。
- 行元素:在页面内占据部分行宽度,仅可以包含其他行元素。eg:
<span><a><strong><em><img><br><input>
等
<span>
全称Span(范围),在菜鸟教程中描述也是** 定义文档中的节**,本身也是个“容器”,但只能容纳其它行内元素,不能容纳块元素。
- else
- 视频中的举例
<div class="nav">
class是分类属性,nav意思是导航,这串始标签的意思是创建一个类别为导航栏的块,打开方式可以是.+属性内容;若包含id则是#+标签内容 - 总的来说,
<div>和<span>
都是“容器”标签,不同的是div创建的是块节,span创建的是行节,它们一般都与css和js相配合使用。
7.HTML表单
表单—简单可以理解为表格,主要通过<form>和<input>
标签实现,下图为典型的表单页面。
这个页面中主要实现三类:第一二行,第三四行以及最后一行。也就是type属性对应的三种不同的值,分别是文本,选择和提交。
其中文本-text;选择-radio(单选),checkbox(多选);提交-submit
其余视频中都有讲,这里要补充的是
- lable 标签中的for属性有什么用?
答案是绑定,那绑定干什么呢?—绑定后当你点击lable标签中的文字,例如下图中的账号: 这几个字符它会自动点开后边的文本框。
<form action="#">
<label for="account">账号:</label>
<input type="text" name="账号" placeholder="请输入账号" id="account">
<br>
<label for="password">密码:</label>
<input type="password" name="password" placeholder="请输入密码" id="password">
<br>
<label >性别:</label>
<input type="radio" name="gender" >男
<input type="radio" name="gender">女
<input type="radio" name="gender">else
<br>
<label >爱好:</label>
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<br>
<input type="submit" value="确定">
</form>