前言:这部分我们将要了解到哪些前端内容
直接切入正题,对于Web前端,最基础的内容是 HTML、CSS、JavaScript三个东西,其中JavaScript是最为核心内容,如果说html和css决定一个前端工程师的下限,那么javascript将决定它的上限。
三者对于一个产品的关键词在于:
html:结构 ->(页面的内容结构);
css:样式 -> (内容的外貌);
javascript:动力 -> (使内容动起来的核心);
在进入之前我们需要做哪些准备呢?你可能会需要这些编辑器(博主认为比较好用的工具)
Web开发的IDE(任选一款,均为官网链接,无脑安装即可):
HBuilder:HBuilderX-高效极客技巧 (dcloud.io)https://dcloud.io/hbuilderx.html
WebStorm: WebStorm: The Smartest JavaScript IDE, by JetBrainshttps://www.jetbrains.com/webstorm/
VSCode: Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/浏览器:
谷歌浏览器、火狐浏览器、Edge浏览器等主流浏览器均可,这里推荐谷歌浏览器,兼容性较高。
相关的环境配置,可以自行百度或者查阅相关博客和文档。
一、认识HTML
1.在认识什么是HTML之前,首先先了解一下网页,顾名思义网页就是我们平时打开浏览器所看到的内容,他们在web中有静态网页和动态网页。
静态网页:页面的内容和显示效果基本不会发生变化的网页。
动态网页:页面的内容可以随着时间、数据改变等操作而发生改变的网页。
2.HTML不是一种编程语言,是一种标记语言(全名超文本标记语言)。该标记语言拥有一套标记标签,HTML使用标记标签描述网页内容。内容包括标题、文本、图片、链接等。
下面是HTML的一个基本结构:
<!DOCTYPE html>
<html>
<!--头部,完成一个网页的相关设置-->
<head>
<meta charset="utf-8"><!--汉字编码--> <!--meta:元,主要用来完成对应设置的-->
<meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
<meta name="description" content=""><!--网站的描述内容-->
<title>网页标题</title><!--标题-->
<!--设置网站小图标-->
<link rel="shortcut icon" href="#" type="image/png">
<style>
/*写样式的地方*/
</style>
<link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>
<!--主体-->
<body>
<p>这是一个段落</p>
</body>
<script>
// 放脚本代码的地方
</script>
</html>
总体结构如图:
二 、HTML中的常用标签
2.1 HTML基本标签
html中每一种标签都有自己对应的属性,当然标签也有很多,那么这么多,我们只需要记住常用的就行,不常用的我们需要知道有这个属性或者这个标签,这样在实际开发中可以节省很多事情。
注:在html中大部分标签都是成对存在的,只有少数标签单独存在。即
<p></p> <!--这是成对存在的-->
<img src="" alt="" title=""/> <!--这是单独存在的-->
那么基础标签:
<!-- 文本基础标签 -->
<!-- 标题标签有 h1-h6, 随着数字的增大标题的呈现效果会(改变)变小 -->
<h1>这是标题标签</h1>
<!-- 这是段落标签 -->
<p>这是段落标签</p>
<!-- 这是分区标签 -->
<div>html通过div标签来划分分区</div>
<!-- 行内文本标签,包裹的内容会显示到一行中 -->
<!-- 区别于<p></p>标签,p标签会另起一行 -->
<span>这是行内标签</span>
<!-- 这是换行标签,效果相当换行符,常用到的单标签之一 -->
<br>
<!-- 这是超链接标签,常用到的单标签之一 -->
<!-- href:链接地址, target:设置跳转方式, -->
<a href="" target=""></a>
<!-- 这是图片标签,常用到的单标签之一 -->
<!-- src:图片地址,本地地址/超链接地址, alt: 图片无法显示时的代替文本, title: 鼠标移动到此出时显示的文字 -->
<img src="" alt="" title="">
<!-- 文本格式化标签 -->
<!-- 文字变粗,strong表强调 -->
<b></b>
<strong></strong>
<!-- 文字斜体,em表强调 -->
<i></i>
<em></em>
<!-- 定义小型文本 -->
<small></small>
<!-- 定义上标、下标文本,分别是sup、sub -->
<sup>这是上标标签</sup>
<sub>这是下标标签</sub>
2.2 功能标签
2.2.1 列表标签
列表标签需要嵌套使用,分为有序列表、无序列表和定义列表
<!-- 列表标签 -->
<!-- ul:无序列表, ol: 有序列表, dl: 定义列表 -->
<!-- 这是无序列表 -->
<ul>
<li>这是一号</li>
<li>这是二号</li>
</ul>
<!-- 这是有序列表 -->
<ol>
<li>这是一号</li>
<li>这是二号</li>
</ol>
<!-- 这是定义列表 -->
<dl>
<dt>这是标题一</dt>
<dd>这是文本一</dd>
<dt>这是标题二</dt>
<dd>这是文本二</dd>
</dl>
2.2.2 table表格标签
HTML内置有table表格,标签组成为:
table:主标签; thead: 表格头; tbody: 表格主体; tfoot: 表格表尾
th(table head):表的键的标签,字体会自动加粗;
tr(table row):表的行,与th的区别在于文字不会加粗;
td(table date):表的数据,每一个格子内的数据;
例子看代码:
<!-- 表格标签 -->
<table border="1" cellpadding="0" cellspacing="0">
<!-- 表格的表头 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表格的主体内容 -->
<tbody>
<tr>
<td>王五</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</tbody>
<!-- 表格的页脚内容 -->
<tfoot>
<tr align="center">
<td colspan="2">底部</td>
</tr>
</tfoot>
</table>
2.2.3 form表单标签
HTML的表单元素有: <input>, <textarea>, <button>, <select>
<form>表单允许用户在表单中输入信息的元素。
<input>标签:根据不同的 type 属性来改变输入的方式。
<textarea>标签: 富文本标签。
<button>标签: 定义一个按钮,button的类型会随着type的改变而改变。
<select>标签: 定义一个可选或者多选的下拉菜单,其中每个选项<option>
<!-- 表单标签 -->
<!-- action属性: 规定提交表单的表单地址 -->
<form action="">
<!-- input标签 -->
<!-- type="text": 定义文本的单行输入 -->
<input type="text">
<!-- type="password": 输入为密码,会隐藏且加密 -->
<input type="password">
<!-- radio类型: 单选按钮 -->
<input type="radio">
<!-- checkbox类型: 复选框 -->
<input type="checkbox">
<!-- button类型: 定义普通按钮 -->
<input type="button">
<!-- reset类型: 重置按钮 -->
<input type="reset">
<!-- file类型: 文件框 -->
<input type="file">
<!-- submit类型: 表单提交按钮 -->
<input type="submit">
<!-- textarea标签 -->
<!-- 富文本标签 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- button标签 -->
<!-- button:定义一个按钮,随着type不同而改变类型 -->
<button>普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<!-- select标签 -->
<!-- select: 定义可选或者多选下拉菜单,包括多个选项 option -->
<select name="" id="">
<option value="">选项一</option>
<option value="">选项二</option>
</select>
三、HTML标签的标签属性
通过上面我们了解到HTML中一些常用的标签,可以看到每个标签后有的会跟随一些属性(如:value="")。事实上每个标签都有这样的属性,比如:
id 属性:定义元素的唯一id,不能重复;
class 属性: 定义元素的类名;
style 属性: 定义元素的样式;
<!--具体案例-->
<div class="head" id="head" style="background: blue;"></div>
那么让我们进一步了解标签的属性:
由于标签过多,并且每个标签属性值数量很多,具体细节可以参考W3school提供的HTML参考手册,查询相关的标签及其属性来使用:
HTML 声明 (w3school.com.cn)https://www.w3school.com.cn/tags/tag_doctype.asp
四、再认识HTML
通过上述描述,如果你有实际操作过的话,相信你一定对HTML有所了解了,那么接下来我们再对上述进行一遍整理和拓展。
4.1 HTML的块级元素和行内元素
如果把一个界面比如成个方框,那么我们要做到就是使用这些标签填满这些方框,并通过CSS样式来改变它的表现形式。而这些标签在分为单标签、双标签的同时又分为块级和行内。
每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为block,成为“块级”元素(block-level);而span元素的默认display属性值为inline,称为“行内”元素
块级元素:独占一行,一般情况下,宽度和高度根据内容来决定,同时还可以设置 width, height 两个属性来固定这个块。
包含以下标签:
<!-- 块级元素 -->
<address></address>、 <div></div>、 <dl></dl>、 <dt></dt>、 <dd></dd>、
<fieldset></fieldset>、 h1~h6、 <menu></menu>、 <p></p>、 <table></table>、 <ul></ul>等
行内元素:相邻的行内元素会排列在同一行里,一行排不下才会换行,其宽度随元素的内容而变化,行内元素设置width和height无效。
包含以下标签:
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
区别:
块级元素(block)
- 从新的一行开始
- 高度、宽度可以通过width、 height控制
- 宽度没有设置时,默认为100%
- 块级元素中可以包含块级元素和行内元素
行内元素(inline)
- 和其他元素在一行
- 高度、宽度以及内边距都是不可控的
- 宽高由内容撑开
- 行内元素只能行内元素,不能包含块级元素
4.2 HTML的转义字符
在HTML中,编辑内容时,我们常常会使用一些字符,比如空格、大于号、小于号等,在html中我们使用转义字符来实现,其格式为 一个和号(&) + 实体名称(xxx) + 分号(;):
显示结果 | 描述 | 实体字符 |
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
还有很多字符,需要了解可以自行百度。
五、结束
该片文章到此结束,文章有不足之处还请指出,大家一起进步学习。
该栏未完待续......