前言
Web前端开发是从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。
本次我们就简单总结一下HTML的学习。
一、HTML是什么?
HTML(Hyper Text Markup Language),即超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。HTML文件的扩展名为htm(因为之前的文件系统最多只支持三位扩展名)或html。
超文本(Hyper Text)是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联,这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是位于地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源连接起来,便于人们查找、检索信息。HTML 的“超文本”特性,主要指文本中包含了所谓“超级链接”点。
二、学习HTML
(一).Html文档基本结构
打开VScode,新建html文档,输入感叹号(英文输入法),就可以快速生成了一个HTML的框架,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
基本结构
-
<!DOCTYPE html>
是 Document Type Declaration 的简称,用来声明文档,也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码,此处使用的是 HTML 5 的版本。出于历史原因需要,现在可有可无。 -
<html>
表示页面编写的代码都是 HTML 代码。它是成对出现的标签,直到</html>
结束。除了声明文档外的所有代码都必须写在<html></html>
中间;这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。 -
<head>
表示页面的"头部",页面的 title(标题)一般写在<head></head>
中间;这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。 -
<meta charset="utf-8">
这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。 -
<title>
设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。 -
<body>
表示页面的"身体",页面中的绝大部分内容都可以写在<body></body>
之间。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
(二)基本元素
1.标题
标题(Heading)是通过 <h1> - <h6>
标签进行定义的。
<h1>
定义最大的标题。 <h6>
定义最小的标题。
<h1>This is heading 1</h1>
<hr>
<h2>This is heading 2</h2>
<hr>
<h3>This is heading 3</h3>
<hr>
<h4>This is heading 4</h4>
<hr>
<h5>This is heading 5</h5>
<hr>
<h6>This is heading 6</h6>
<hr>
效果如下
其中 <hr>
表示添加一条水平直线。
2.文本格式
常用的标签如下
html标签 | 实现的功能 |
---|---|
<mark></mark> | 用于文本高亮显示 |
<del></del> | 会显示一条删除线 |
<ins></ins> | 显示一条下划线 |
<small></small> | 缩小字体 |
<strong></strong> | 特别强调,一般为粗体 |
<b></b> | 粗体 |
<em></em> | 特别强调,一般为斜体 |
<i></i> | 斜体 |
<cite></cite> | 用于引证、举例,一般为斜体 |
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><b>This line rendered as italicized text.</b></p>
<p><em>This line rendered as italicized text.</em></p>
<p><i>This line rendered as italicized text.</i></p>
<p><cite>This line rendered as italicized text.</cite></p>
效果如下
注意:Html5貌似已经不支持
<big></big>
标签了,可以使用font-size属性和font-weight属性实现字体加大加粗。
3.超链接
![请添加图片描述](https://img-blog.csdnimg.cn/163accba0572491cbeefc58d146dd70c.gif)
-
href即为要跳转去的地址 URL(Uniform Resource Locator)
-
target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
-
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
当target属性为_blank效果如下
点击超链接打开了一个新的界面
如果删除target属性,则效果如下
点击超链接后,直接在当前界面打开网页,覆盖了原有的网页
4.图片
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
src属性为要显示图片文件的位置 URL,即图片文件的路径
alt属性当获取图片出现问题时显示的文字(占位符)
可为图片指定高宽度,但不建议(可能导致图片变形)
为获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
我们在网页中一般使用绝对路径,通过URL(资源定位符访问)
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="300" height="200">
<img src="http://image.qianye88.com/pic/fbfcfae637bcf3bf2b6205130e34d38d" alt="MDB Logo" width="300" height="200">
<img src="http://pic.kuaizhan.com/g3/6a/4c/91b3-5fbf-4b92-b6db-348a7e1825a975" alt="MDB Logo" width="300" height="200">
<img src="https://img.zcool.cn/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="300" height="200">
插入图片后的效果如下
5.锚点
下面我们来介绍一下锚点。锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
其本质还是一种超链接,只不过是在页内的一种超链接,通过ID判断其在页面中的位置
<p>
<!-- 文档其余部分 -->
<h2 id="C4">第四章 行以致远</h2>
<div><img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="300" height="200"></div>
<div><img src="http://image.qianye88.com/pic/fbfcfae637bcf3bf2b6205130e34d38d" alt="MDB Logo" width="300" height="200"></div>
<div><img src="http://pic.kuaizhan.com/g3/6a/4c/91b3-5fbf-4b92-b6db-348a7e1825a975" alt="MDB Logo" width="300" height="200"></div>
<div><img src="https://img.zcool.cn/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="300" height="200"></div>
<a href="#C4">跳到第四章</a>
实例效果如下
6.表格
有时,页面的内容需要用表格来进行呈现。我们使用
等标签即可
<table>
定义表格,生成的表格在一对<table></table>
中;
<caption>
定义表格标题,当表格需要标题时,使用<caption>表格标题</caption>
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tbody>
定义表格的主体
<th>
定义表格的表头,一般是表头中的内容会被加黑;
<tr>
定义表格的行
<td>
定义表格单元格
<col>
定义用于表格列的属性
<colgroup>
定义表格列的组
<!--无边框-->
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>灰姑娘</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为2-->
<table border="2">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>灰姑娘</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为10-->
<table border="10">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>灰姑娘</td>
<td>女</td>
</tr>
</table>
关于HTML的表格样式还有很多、包括单元格边框、合并单元格、单元格对齐、背景色、单元格边距、边框等。
具体可参考
HTML表格(HTML 表格的使用,收藏这一篇就够了)
HTML中的表格和表单
7.表单
网页中,需要跟用户交互,收集用户资料,此时需要表单。
HTML中,一个完整的表单通常由表单控件(也称表单元素)(即表单中出现的如输入框按键之类的小方框)、提示信息和表单域(表单整体区域)3个部分构成。
基本元素
- 文本框-语法
<input type="text"(文本框) name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
- 密码框语法
<input type="password "(密码框) name="pass"(密码框的名称) size="20"(密码框的长度) />
- 单选按钮语法
<input name="gen" type="radio"(单选按钮框) value="男"(值) checked(单选按钮选中状态) />男
<input name="gen" type="radio" value="女" />女
- 列表框语法
<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>
这里只是一些简单的语法应用,具体可参考
HTML-表单(非常详细)
应用实例
<form>
<!-- 文本框,注意有 placeholder 提示符 -->
用户名:<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码:<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄:<br>
<!-- 数字输入框,注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表,注意 selected 属性 -->
党派:<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具:<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期:<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域,注意 rows 和 cols 属性 -->
您的建议:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
显示效果
8.区块元元素和内联元素
区块元素的特点:
- 每个元素独占一行,默认情况下宽度等于父元素的宽度
- 不设置高度时,高度为0,有内容时高度由内容撑开,不解析换行符
- 可以设置width、height、margin、padding属性
- dispaly:block
内联元素的特点:
- 相邻的元素会排列在同一行,排不下时会自动换行
- 不支持宽高属性,宽高完全由内容撑开,会解析换行符
- 使用部分样式会出错(上下margin和padding等),只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
- dispaly:inline
简单区别一下,如何设置为区块元素的话,无论是否该行还存在空间,都会另起新行显示;而内联元素的话则是如果有空间则在后面继续显示,当该行没有足够空间时,才会在下一区域显示。
实例
<img src="https://img.zcool.cn/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="400" height="400">
<img src="http://wifi.changbaishan.gov.cn/place/zbjq/201803/W020180323393781391748.jpg" alt="MDB Logo" width="400" height="400">
加入区块<div></div>
后,效果如下
<div><img src="https://img.zcool.cn/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="400" height="400"></div>
<div><img src="http://wifi.changbaishan.gov.cn/place/zbjq/201803/W020180323393781391748.jpg" alt="MDB Logo" width="400" height="400"></div>
<img></img>
默认是内联元素,所以当该区域后面如果存在空间,则继续在该空间后面显示;
当强制转换成<div></div>
变为区块,则默认会再找一块空白区域显示。
总结
关于HTML的简单学习就到此为此,本篇文章只是简单的介绍了HTML的一些基本语法和操作,想要精通Web网页设计还有很远的路要走。
文章若有不当之处,敬请指教。
参考