HTML
一、概念
概念：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档]格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
二、Html语法
-
文件以.html后缀
-
文件内容需要写在标签中 如
-
标签中的语法：
- 正常的标签【双边标签】 有开始、有结束 如
- 特殊标签【单边标签】 如：
- 双边标签中间可以写内容、单边标签不可以
- 标签可以嵌套标签
- 标签不区分大小写、建议小写
- 标签名不能随便写 都是定义好的
-
元素、标签、属性
- 元素：一个完整的标签
- 属性：标签中的特殊定义 如：color=”red“
-
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>
<p>这是一个段落</p>
</body>
</html>
四、常见标签
4.1文本标签
- h1\h2\h3 标题标签 加粗 加大 独占一行
- b strong 加粗标签
- i em cite 斜体标签
- sup 上标
- sub 下标
- marquee 滚动标签 【direction 方向 scrollamount 速度 loop 循环次数 】
- font 字体标签 【 color 颜色 size 大小 】
- p 段落标签
- hr 分割线
<!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>
<!-- 1、标题标签 加粗 加大 独占一行 -->
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<br>
<!-- b 、 strong 加粗标签 -->
<b>哎呀我说命运呐</b>
<br>
<strong>哎呀我说生存呐</strong>
<br>
<!-- i em cite 斜体标签 -->
<i>是否每天忙碌只为一顿饭</i>
<br>
<em>大哥你玩摇滚，玩他有啥用！</em>
<cite>迷路的鸽子啊</cite>
<br>
<!-- sup 上标 sub 下标 -->
你<sup>TM</sup>
H<sub>2</sub>O
<br>
<!-- 滚动标签 direction 方向 scrollamount 速度 loop 循环次数-->
<marquee direction="right" scrollamount="100" loop="1">滚动标签</marquee>
<br>
<!-- 字体标签 color 颜色 size 大小 -->
<font color="green" size="20">文本标签</font>
<br>
<!-- p 段落标签 -->
<p>我会牢牢记住你的脸~~~</p>
<p>我会珍惜你给的思念~~~~~~~</p>
</body>
</html>
4.2多媒体标签
- img 图片标签【src 加载的资源路径】
- 相对路径： 相对于当前页面的路径
./ 同级目录
…/ 上级目录
…/…/ 上上级目录 - 绝对路径 ：
磁盘绝对路径
C：img/xx.jpg
网络绝对路径
https://alifei05.cfp.cn/creative/vcg/veer/1600water/veer-140775274.jpg
width : 宽度
height ：高度
title ：提示 - audio 音频标签 必须加 controls
- video 视频标签 必须加 controls
<body>
<!--
img 图片标签
src 加载的资源路径
相对路径： 相对于当前页面的路径
./ 同级目录
../ 上级目录
../../ 上上级目录
绝对路径 ：
磁盘绝对路径
C：img/xx.jpg
网络绝对路径
https://alifei05.cfp.cn/creative/vcg/veer/1600water/veer-140775274.jpg
width : 宽度
height ：高度
title ：提示
-->
<img src="https://alifei05.cfp.cn/creative/vcg/veer/1600water/veer-140775274.jpg"
width="50" height="50" title="修勾">
<img src="./img/4.png" width="100" height="30">
<img src="../day_o1/img/4.png" width="100" height="30">
<!-- audio 音频标签 必须加 controls -->
<audio src="./img/a.mp3" controls></audio>
<!-- video 视频标签 必须叫controls -->
<video src="img/2.mp4" controls width="200" height="200"></video>
</body>
4.3列表标签
ul 无序列表 【 li 列表元素】
ol 有序列表 【 li 列表元素】
<body>
<h1>电子</h1>
<!-- ul 无序列表 type 指定每个元素的图标 -->
<ul type="square">
<li>手机</li>
<li>相机</li>
<li>电视</li>
<li>投影</li>
</ul>
<!-- 有序列表 type指定每个元素的图标 -->
<h1>手机</h1>
<ol type="A">
<li>iphoneX</li>
<li>iphone11</li>
<li>iphone12</li>
<li>iphone13</li>
</ol>
</body>
4.4超链接标签
可以实现点击跳转 a
属性 ：
href：跳转的目标地址
target：打开目标的方式【_self _blank _parent _top】
<body>
<!-- 超链接
href：跳转地址：url地址
target: 已指定的窗体打开目标
_self 自身窗口
_blank 新窗口
_parent 父窗口
_top 最外层窗口
锚点
指定跳转到的位置
-->
<a href="https://www.baidu.com/" target="_parent">点击跳转百度网站</a>
<a href="#ss">点击跳转</a>
<p id="ss">--------------</p>
</body>
4.5表格标签
table 表格标签
子标签
caption 表格的标题
**tr** 行标签 **th** 表头列 **td** 列标签 colspan 合并列单元格 合并两列
rowspan 合并行单元格 合并两行
属性：
**border**-边框 align-指定对齐方式 left right center
cellspacing-单元格之间的距离
**width** ：宽度 height ：高度
blackground-color:背景颜色
blackground:背景图片
<body>
<!-- table 表格 border-边框 cellspacing-单元格之间的距离
align-指定对齐方式
caption 表格的标题
tr 行标签
th 表头列
td 列标签
colspan 合并列单元格 <td colspan="2"> 合并两列
rowspan 合并行单元格 <td rowspan="2"> 合并两行
-->
<table border="2" cellspacing="0" width="400px" height="50px" align="center">
<caption>学生表</caption>
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr align="center">
<td>1000</td>
<td>王五</td>
<td colspan="2">男</td>
<!-- <td></td> -->
</tr>
<tr align="center">
<td>1001</td>
<td>张三</td>
<td>男</td>
<td rowspan="2">打篮球</td>
</tr>
<tr align="center">
<td>1002</td>
<td>李四</td>
<td>女</td>
<!-- <td>跑步</td> -->
</tr>
</table>
</body>
4.6表单标签
表单：可以实现将页面数据提交到后台服务器的标签
form表单标签 ： 提交数据到后台
action ： 后台地址
method ： 提交方法
get ： 将参数拼接在url（网址）中 安全性低 不能超过4kb 默认
post ： 携带到请求头中 相对安全 数据没有限制
enctype ： 属性规定在发送到服务器之前应该如何对表单数据进行编码
application/x-www-form-urlencoded 在发送编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为“+”加号，单不对特殊字符编码。
input : 输入框 key = value 提交
type : 内容的格式
text : 文本类型
password ： 密文
submit ： 提交按钮
radion ： 单选框
checkbox : 复选框
file : 文件上传框
button : 按钮框 结合JS使用
placeholder ： 提示信息
name ： 起名 key 如果提交数据的话 必填
value ：默认值
disabled ： 不可修改
checked ： 默认 单选或者复选框 被选中
select 下拉框
option 每一个下拉元素
textarea 文本域 输入大量的文本
button 提交按钮 默认由提交功能 写form表单中
<body>
<!--
form 提交表单
action 致我们提交的地址（URL）
method 提交方式
get: 地址中拼接参数 最多2kb
post: 以请求头的携带的方式 没有限制
input 输入框
type 输入内容的类型
text 文本内容
submit 提交按钮
button 不可提交按钮 结合JS使用后、校验表单
password 密文
radio 单选框
checknox 复选框
file 文件上传组件
value 默认值 提交数据的值
name 提交数据的key
placeholder 默认提示
disabled 默认不可修改
select 下拉框 name
option 下拉框的每一个元素 value默认值 selected默认选中
button 带有提交功能的标签
textarea 文本域 rows 高度 cols 宽度
-->
<form action="" method="">
<b>编   号 :</b> <input type="text" name="num" value="10000" disabled><br>
<b>用户名 :</b>
<input type="text" name="username" placeholder="请输入用户名"><br>
<b>密   码 :</b>
<input type="password" name="password"><br>
<b>性   别 :</b>
<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
<br><b>爱   好 :</b>
<input type="checkbox" name="hobby" value="baseketball"> 篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="swim">游泳<br>
<b>籍   贯 :</b>
<select name="pro">
<option value="hebei">河北省</option>
<option value="beijing" selected>北京市</option>
<option value="tianjin">天津市</option>
<option value="shandong">山东省</option>
<option value="hainan">海南省</option>
</select><br>
<b>个性标签:</b>
<textarea name="biaoqian" rows="1" cols="15">
</textarea><br>
<b>上传文件:</b>
<input type="file" name="photo"><br>
<br><input type="submit" value="注册">
<input type="button" value="提交">
<button>按钮</button>
</form>
</body>
4.7字符实体
字符实体 就是一些特殊的符号
4.8框架标签
框架标签
iframe 可以 加载其他的页面到当前页面中
好处： 可以复用页面
<body>
<h2>搜索</h2>
<iframe src="https://www.ujiuye.com" frameborder="0" width="800" height="1000"></iframe>
<!-- iframe -->
<iframe src="./超链接标签.html" frameborder="0" width="800" height="1000"></iframe>
</body>
框架标签 frameset 可以快速搭建后台管理系统的首页
rows ： 分上下部分
noresize ： 不能充值比例
frameborder ： 是否显示边框 0 不显示 1 显示
<!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>
<!-- 每个标签都有的属性： name value -->
<frameset rows="75px,*" noresize frameborder="0">
<frame src="top.html">
<frameset cols="15%,*">
<frame src="left.html">
<frame src="" name="right">
</frameset>
</frameset>
</html>
left.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 style="background-color: azure;">
<ul>
<li>
<a href="表格标签.html" target="right">学生信息</a>
</li>
<li>
<a href="表单标签.html" target="right">学生注册</a>
</li>
</ul>
</body>
</html>
效果：
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
