一.简介
HTML：超文本标记语言，标记语言是一整套标记标签。
1.超文本含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）。
2.还可以从一个文件跳转到另一个文件，与世界各国主机的文件连接（超级链接文本）。
遵循web标准：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中
二.HTML基本语法规范
概述：
标签是由尖括号包围的关键词，通常成对出现，也有单个标签，例如：<br/>；
标签关系可以分为两类：包含与并列关系。
<!--包含关系--> <head> <title></title> </head> <!-- 并列关系 --> <div></div> <table></table> 讯享网
基本结构：
讯享网<!-- 文档类型声明标签 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站 -->
<html lang="en">
<head>
<!-- 用utf-8来保存文字 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示在浏览器上方 -->
<title>Document</title>
</head>
<body>
<!-- 标签元素 -->
<div></div>
<table></table>
</body>
</html>
三.常用标签
1.标题标签：
h1~h6：加了标题的文字会变粗，字号变大，一个标题独占一行。
<!-- 文档类型声明标签 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站 -->
<html lang="en">
<head>
<!-- 用utf-8来保存文字 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示在浏览器上方 -->
<title>Document</title>
</head>
<body>
<!-- 标签元素 -->
<h1>未来欠我一个亿</h1>
<h2>未来欠我一个亿</h2>
<h3>未来欠我一个亿</h3>
<h4>未来欠我一个亿</h4>
<h5>未来欠我一个亿</h5>
<h6>未来欠我一个亿</h6>
</body>
</html>运行结果：
2.段落与换行标签：
<p></p> <br/>:文本在一个段落中会根据浏览器窗口大小调整自动换行，段落与段落之间有空隙。
3.文本格式化标签：
有时候会需要将文本设置粗体（<strong></strong>或者<b></b>），斜体(<em></em>或<i></i>)，下划线(<u></u>)，删除线(<del></del>)。
讯享网<!-- 文档类型声明标签 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站 -->
<html lang="en">
<head>
<!-- 用utf-8来保存文字 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示在浏览器上方 -->
<title>Document</title>
</head>
<body>
<!-- 标签元素 -->
<strong>未来欠我一个亿_加粗版</strong>
<br />
<i>未来欠我一个亿_倾斜版</i>
<br />
<u>未来欠我一个亿_下划线版</u>
<br />
<del>未来欠我一个亿_删除版</del>
<br />
</body>
</html>
运行结果：
4.<div></div>与<span></span>
它们就是一个盒子，div为大盒子，一行只能放一个；span是小盒子，一行可以放多个。
<!-- 文档类型声明标签 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站 -->
<html lang="en">
<head>
<!-- 用utf-8来保存文字 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示在浏览器上方 -->
<title>Document</title>
<style>
.color1 {
color: green;
}
.color2 {
color: red;
}
.color3 {
color: yellow;
}
.color4 {
color: blue;
}
</style>
</head>
<body>
<div class="color1">我是绿盒子</div>
<div class="color2">我是红盒子</div>
<span class="color3">我是小黄盒子</span>
<span class="color4">我是小蓝盒子</span>
</body>
</html>运行结果：
5.图像标签和超链接标签
图像标签（<img>）的属性有：路径，替换文本，宽高，边框粗细等
超链接标签(<a>)
讯享网<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用vscode创建的第一个页面</title>
</head>
<body>
<img src="IMG_20231123_214854.jpg" alt="图片加载中" title="这是帅哥" height="400" border="3" />
<br />
<br>
<a href="http://www.bumimi.vip" target="_self"> 布米米 </a>
</body>
</html>
运行结果：
6.注释和特殊字符
注释：<!--注释内容-->
特殊字符：
7.表格标签
表格属性有：align归定表格相对周围元素的对齐方式，border设置边框，默认为”“;cellspacing单元格之间的空格；cellpadding单元边缘及其内容之间的空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input表单元素</title>
</head>
<body>
<table align="center" border="1" cellpadding='0
' cellspacing="0">
<!-- 表头：居于第一行，加粗居中表示 -->
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<!-- 表主体部分 -->
<tbody>
<!-- 表的每一行 -->
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>下降</td>
<td>345</td>
<td>123</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td>下降</td>
<td>124</td>
<td>675432</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td>上升</td>
<td>212</td>
<td>7654</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td>上升</td>
<td>23</td>
<td>75645</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td>下降</td>
<td>121</td>
<td>7676</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td>上升</td>
<td>576576</td>
<td>123421</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td>上升</td>
<td>234</td>
<td>7686</td>
<td><a href="https://tieba.baidu.com">贴吧</a><a href="">图片</a><a href="https://baike.baidu.com/">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>运行结果：
8.列表标签
列表分为无序列表（<ul>），有序列表(<ol>)和自定义列表(<dl>)
讯享网<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input表单元素</title>
</head>
<body>
<dl>
<dt>食物</dt>
<dd>榴莲</dd>
<dd>臭豆腐</dd>
<dd>鲱鱼罐头</dd>
</dl>
</body>
</html>
运行结果：
9.表单标签：
<form action=“url地址” methed="提交方式，一般有post或者get" name="用于区分多个表单域"></form>
input的type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input表单元素</title>
</head>
<body>
<form>
<label for="text1">用户名：</label><input type="text" name="username" value="请输入值" maxlength="6" id="text1"><br>
密码：<input type="password" name="password"><br>
婚姻状况：<label for="text2">已婚</label><input type="radio" name="sex" id="text2"> 未婚<input type="radio"
name="sex"><br>
爱好：吃饭 <input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox" checked>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置"><br>
<input type="button" value="获取验证码"><br>
<input type="file" value="上传">
<select name="" id="">
<option value="">
山东
</option>
<option value="">
河南
</option>
<option value="" selected>
辽宁
</option>
</select>
<br>
今日反馈
<br>
<textarea name="" id="" cols="30" rows="10">
</textarea>
</form>
</body>
</html>运行结果：
10.综合案例：婚恋网站注册界面
界面展示：
实现代码：
讯享网<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>
青春不常在，抓紧谈恋爱
</h4>
<table width="500">
<tr>
<td>性别:</td>
<td>
<label for="nan"><input type="radio" name="sex" id="nan"> 男</label>
<label for="nv"><input type="radio" name="sex" id="nv">女</label>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select name="" id="">
<option value="">
--请选择年份--
</option>
<option value="">
2001
</option>
<option value="">
2002
</option>
</select>
<select name="" id="">
<option value="">
--请选择月份--
</option>
</select>
<select name="" id="">
<option value="">
--请选择天--
</option>
</select>
</td>
</tr>
<tr>
<td>
所在地区：
</td>
<td>
<input type="text" value="--请填入所在地区--">
</td>
</tr>
<tr>
<td>婚姻状况：</td>
<td>
<label for="stus"><input type="radio" name="marry" id="stus">已婚</label>
<label for="2stus"><input type="radio" name="marry" id="2stus" checked>未婚</label>
<label for="3stus"><input type="radio" name="marry" id="3stus">离婚</label>
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox"> 妩媚的
<input type="checkbox"> 可爱的
<input type="checkbox"> 帅气的
<input type="checkbox"> 阳光的
<input type="checkbox" checked="checked">都喜欢
</td>
</tr>
<tr>
<td>
个人介绍
</td>
<td>
<textarea name="个人简介" id="" cols="30" rows="10">
个人简介
</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" checked="checked">我同意免费注册条款和会员加入标准
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<h5>我承诺</h5>
<ul>
<li>
年满18岁
</li>
<li>
抱着严肃的态度
</li>
<li>
真诚寻找另一半
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
当然也要学着查阅文档啦!
欢迎批评指正！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/126769.html