HTML简介
HTML是超文本标记语言(HyperText Markup Language)的缩写,是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。
准备工作
环境搭建
在本次学习过程中我使用的浏览器是MIcrosoft Edge,使用的编辑器是VScode,同时还安装了Auto Close Tag,Live Server等插件以便于对HTML文件的编辑操作。
创建文件
在VScode中把文件路径创建完毕后即可在目标文件夹中创建文件,创建文件时需要自己加上拓展名,在文件名后加上.html即可创建html文件。
HTML文档的结构
HTML文档由许多元素组成,一个元素由开始标签,结束标签以及标签中的元素组成。
构成一个HTML文档所需的主要元素有:
<!DOCTYPE html>
:声明文档类型,现在可以不加。
<html></html>
: 这是包含整个页面的根元素,其余元素都嵌套在其中。
<head></head>
:包含想要出现在搜索结果中的关键字,页面描述,CSS样式等内容。
<title></title>
: 包含出现在浏览器标签上的页面标题。
<body></body>
:包含页面上出现的所有内容。
文本常用元素说明
元素 | 说明 |
---|---|
<p> | 段落 |
<h1> ~<h6> | 分别对应从大到小六级标题 |
<del> | 使文本带删除线 |
<small> | 使文本变小 |
<big> | 使文本变大 |
<strong> | 字体加粗 |
<em> | 使文本变斜体 |
<mark> | 文本高亮 |
<u> | 加下划线 |
<br> | 换行 |
<hr> | 水平分割线 |
<pre> | 预格式化的文本 |
超链接使用方法
超链接的语法为:
<a href="" target=""> </a>
href后面的引号中放入目标页面的URL。target后面的引号中加_self
表示在当前页面打开超链接,加_blank
表示在新的页面打开超链接。标签中间加入供浏览者点击的内容。
插入图片
采用绝对路径插入图片的语法为:
<img src="" alt="pic" width="" height="">
src后面的引号中为要显示的图片文件的位置 URL。alt后面的引号中为图片未正常显示时出现的文字。可用width和height为图片设置宽高,但不建议使用。
采用相对路径插入图片时
语法 | 说明 |
---|---|
<img src="文件名.jpg"> | 该图片文件与当前html文档在同一目录中 |
<img src="./x/picture.jpg"> | 该图片文件在当前目录下的x目录中 |
<img src="../picture.jpg"> | 该图片文件在当前目录的上一级目录中 |
表格与列表
表格
使用<table>
标签创建表格。
<tr>
表示行, <td>
表示行中的单元, <th>
是表头的单元。
列表
列表分为有序列表与无序列表。
使用<ul>
标签创建无序列表,<li>
表示列表中的项,ul后面可用typy=""
更改每项前的标志。
使用<ol>
标签创建有序列表,<li>
表示列表中的项,ol后面可用typy=""
更改每项前的标志。
表单
使用<form>
标签创建表单
代码 | 说明 |
---|---|
<input type="text"> | 文本框 |
<input type="password"> | 密码框 |
<input type="number"> | 数字输入框 |
<input type="radio"> | 单选按钮 |
<select> | 下拉列表,使用option标签添加选项 |
<input type="checkbox"> | 多选框 |
<input type="date"> | 日期选择器 |
<input type="file"> | 文件选择器 |
<textarea> | 文本输入区域 |
<input type="submit"> | 提交 |
<input type="reset"> | 重置 |