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"> | 重置 |
1326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
