1 什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。
~HTML 指的是超文本标记语言: HyperText Markup Language
~HTML 不是一种编程语言,而是一种标记语言
~标记语言是一套标记标签 (markup tag)
~HTML 使用标记标签来描述网页
~HTML 文档包含了HTML 标签及文本内容
~HTML文档也叫做 web 页面
2 HTML编辑器
VS Code
VsCode的全称是Visual Studio Code,是微软于2015年发布的一款免费开源的现代化轻量级且跨平台的代码编辑器(IDE),支持Windows、 OSX和Linux。内置JavaScript、TypeScript和Node.js.拥有丰富的插件生态环境,安装简单方便,可以通过安装插件来支持C++、C#、Python等语言的编写,也就是其涵盖的范围特别广泛,这也满足了我们编写程序时需要嵌入或引入其他语言的需求。
VS Code 安装教程参考:VScode 教程 | 菜鸟教程
3 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>
<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>网页</title>
</head>
<body>
你好,HTML。
</body>
</html>
结果:
HTML标题
标题标签 <h1>-<h5>
<!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>标题</title>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
</body>
</html>
结果:
段落标签<p>
<!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>段落</title>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>
</html>
结果:
换行标签 br
<!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>换行</title>
</head>
<body>
出淤泥而不染<br>濯清涟而不妖
</body>
</html>
结果:
链接<a>
<!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>链接</title>
</head>
<body>
<a href="https://www.baidu.com/"></a>
</body>
</html>
图像<img>
<!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>图像</title>
</head>
<body>
<img src="./img/1.png" alt="" height="300px" >
</body>
</html>
常用标签
颜色值设置
1、直接使用英文的单词
2、使用十六进制 000000~FFFFFF
3、使用函数rgb(十进制,十进制,十进制) 0~255、rgba(十进制,十进制,十进制,十进制) 0~255 0~1
rgb(红,绿,蓝) rgba(红,绿,蓝,rgb(红,绿,蓝,不透明度)
实体字符 转义字符
< <
> >
© ©
空格
列表
有序列表 ol
无序列表 ul
列表项 li
<!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>常用标签</title>
</head>
<body>
<p>段落1.1<br>段落1.2</p>
<p>段落2.1<br>段落2.2</p>
<ol>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="A">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="a">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="I">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
<li>列表项06</li>
<li>列表项07</li>
<li>列表项08</li>
<li>列表项09</li>
<li>列表项10</li>
</ol>
<ol type="i">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
<li>列表项06</li>
<li>列表项07</li>
<li>列表项08</li>
<li>列表项09</li>
<li>列表项10</li>
</ol>
<ol type="1" start="5">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ul>
<li>导航01</li>
<li>导航02</li>
<li>导航03</li>
<li>导航04</li>
<li>导航05</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dd>White cold drink</dd>
</dl>
</body>
</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>表格</title>
</head>
<body>
<table border="1px" align="center">
<thead>
<caption>大标题</caption>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
<th>标题五</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</tbody>
</table>
</body>
</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>表单</title>
</head>
<body>
<fieldset>
<legend>常用表单</legend>
<form action="" method="get" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
性别:
<label for="male">男</label>
<input type="radio" name="gender" value="1" id="male" checked>
<label for="female">女</label>
<input type="radio" name="gender" value="0" id="female">
<br>
爱好:
<label for="swimming">游泳</label>
<input type="checkbox" name="hobby" value="swimming" id="swimming" checked>
<label for="running">跑步</label>
<input type="checkbox" name="hobby" value="running" id="running">
<label for="skiing">滑雪</label>
<input type="checkbox" name="hobby" value="skiing" id="skiing">
<br>
籍贯:
<select name="hometown" id="hometown">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="jilin" selected>黑龙江</option>
</select>
<br>
水果:
<select name="fruits" id="fruits" multiple>
<option value="banana">香蕉</option>
<option value="apple">苹果</option>
<option value="pear" selected>梨</option>
</select>
<br>
slogan
<br>
<textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
<br>
年龄:
<input type="number" name="age" id="age">
<br>
时间:
<input type="time" name="time" id="time">
<br>
周:
<input type="week" name="week" id="week">
<br>
日期:
<input type="date" name="date" id="date">
<br>
datetime-local:
<input type="datetime-local" name="datetime-local" id="datetime-local">
<br>
URL:
<input type="url" name="url" id="url">
<br>
电话:
<input type="tel" name="tel" id="tel">
<br>
邮箱:
<input type="email" name="email" id="email">
<br>
文件:
<input type="file" name="file" id="file">
<br>
预定义控件:<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output>
<br>
<input type="submit" value="提交">
</form>
</fieldset>
</body>
</html>
结果: