想要学习html呢就得先了解html的标签
基础标签大致分为7种
框架标签，文本标签，列表标签， 表格标签， 网页标签，网页嵌套标签，表单标签， html标签属性
框架标签
- div 块级元素单独一块
- p 段落标签上下行距 单独一行
- h1-h6 上下行距单独一行字体变大字体加粗
- span 隔离标签没有任任何样式
- hr 水平分割线
- br 换行强制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<h2>张飞吃豆芽</h2>
<h3>吕布骑狗</h3>
<h4>俺不会</h4>
<h5>哈基米</h5>
<h6>汪汪汪</h6>
<p>倒悬山</p>
<span>不愿染是与非
<hr>
<br>怎料事与愿违
<hr>
<br>心中的花枯萎
<hr>
</span>
<div>kasablank
<br>
哟哟
<span>all black 出行
<br>他们叫我wakanda
</span>
</div>
</body>
</html>
文本标签
- b 加粗 strong
- i 斜体 em
- u 下户线
- del 中划线
- sup 上标
- sub 下标
<!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>
<div>
<h1>化学小课堂</h1>
<p>
<span>早上好</span>
<b>粗体</b>
<strong>粗体1</strong>
<i>斜体</i>
<em>斜体1</em>
<u>全力以赴</u>
<del>非常态</del>
<span style="color: red;">H<sub>2</sub>CO<sub>3</sub> = 2H<sup>+</sup>+CO<sub>3</sub><sup>2-</sup>
</span>
</p>
</div>
</body>
</html>
列表标签
- li 列表项 独占一行 不单独存在
- ol 有序列表 有序号 上下行距，左侧内补
- ul 无序列表 上下行距，左侧内补
- dl 框架 dt 列表项目没有缩进
dd 列表项目说明有缩进
<!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>
<div>
<h1>无需列表</h1>
<ul>zaijain
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
</div>
<div>
<h1>有序列表</h1>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</div>
<div>
<h1>自定义列表</h1>
<dl>错了</dl>
<dt>项目1</dt>
<dd>自定义列表1</dd>
<dt>项目2</dt>
<dd>自定义列表2</dd>
<dt>项目3</dt>
<dd>自定义列表3</dd>
</div>
</body>
</html>
表格标签
- tr th 表头单元格
td 普通单元格
属性
-
border 边框
-
cellpadding 内补
-
cellspacing 单元格间距
-
align 对齐
center -
width 宽度
80%
-
rowspan 合并同一列中的多行
-
colspan 合并同一行中的多列
<!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>
<table border="10" width="80%" cellpadding="20" cellspacing="20" align="center">
<tr>
<tr>
<th>标头1</th>
<th>标头2</th>
<th>标头3</th>
</tr>
<td colspan="2">单元格1</td>
<td >单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td colspan="2" rowspan="2" >
<table border="" width="80%" >
<tr>
<td>列1</td>
<td>列2</td>
</tr>
<td>列1</td>
<td>列2</td>
</table>
</td>
</tr>
<tr>
<td>单元格1</td>
</tr>
</table>
</body>
</html>
网页标签
<!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>
<div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<span id="789">999</span>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<div>火维地荒足妖怪</div>
<h1>音频</h1>
<audio src="./audio/bg.mp3" controls width="300"></audio>
<h1>图片</h1>
<img src="./img/暂停背景.jpg" alt="失败了" controls width="300">
<h1>视频</h1>
<video src="./video/7.mysql查询扩展.mp4" controls width="300"></video>
<br>
<a href="https://www.baidu.com/" target="_blank" width=""><h1>百度</h1></a>
<a href="./4.3p标签.html"></a>
<a href="#789">回到6669</a>
</div>
</body>
</html>
网页嵌套标签
- iframe src 引入一个页面
<!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>
<iframe src="./2.框架标签.html" frameborder="0"></iframe><br>
<iframe src="https://www.doubao.com/chat/?channel=bing_sem&source=dbweb_bing_sem_xhs_pc_01&keywordid=2752&msclkid=175eaf6754ef12ba8a84c9daaf4d0d4a" frameborder="0" width="100%" height="500"></iframe>
</body>
</html>
表单标签
<!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>
<div>
<form action="http://httpbin.org/post" method="post">
<div>
<label for="用户名">用户名</label><input required placeholder="请输入名字" name="username" id="用户名" type="text">
</div>
<div>
<label for="密码">密码</label><input required placeholder="请输入密码" name="password" id="密码" type="password">
</div>
<div>
<span>性别</span>
<label for="男">男</label><input name="sex" value="男" id="男" checked type="radio">
<label for="女">女</label><input name="sex" value="女" id="女" checked type="radio">
</div>
<div>
<span>爱好</span>
<label for="">足球</label><input name="hobby" value="足球" type="checkbox">
<label for="">篮球</label><input name="hobby" value="篮球" type="checkbox">
<label for="">乒乓球</label><input name="hobby" value="pingpangqiu" type="checkbox">
</div>
<div>
<span>年纪</span>
<input name="age" value="" type="range" min="0" max="100" size="1">
</div>
<div>
<span>喜爱颜色</span>
<input type="color">
</div>
<div>
<span>附件</span>
<input type="file">
</div>
<div>
<span>居住地址</span>
<select name="" id="">国家
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="indu">印度</option>
</select>
<select name="" id="">地区
<option value="nothon">北部地区</option>
<option value="wethon">东部地区</option>
<option value="nesthon">南部地区</option>
</select>
<select name="" id="">城市
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</div>
<div>
<span>学习语言</span>
<select multiple name="" id="">
<option value="python">python</option>
<option value="java">java</option>
<option value="c++">c++</option>
</select>
</div>
<div>
<span>文本输入</span>
<textarea required placeholder="请输入名字" name="text" id="" cols="30" rows="10"></textarea>
</div>
</div>
<input value="清空" type="reset">
<input value="注册" type="submit">
</form>
</body>
</html>
html标签属性
-
id 页面内唯一 不能以数字开头
-
class 一个标签可以有多个类名 同一个类名可以出现在多个标签
-
style 样式属性
-
name 标签名字
-
title 鼠标划入提醒
<!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>
<div>
<h1>class</h1>
<span class="span span1">span1</span>
<span class="span span2">span2</span>
<span class="span span3">span3</span>
<span class="span span4">span4</span>
<span class="span span5">span5</span>
</div>
<div>
<h1>id</h1>
<span title="span1" style="color: red;" id="span1">span1</span>
<span title="span2" style="color: rebeccapurple;" id="span2">span2</span>
<span title="span3" style="color: blue;" id="span3">span3</span>
<span title="span4" style="color: yellow;" id="span4">span4</span>
<span title="span5" style="color: yellowgreen;" id="span5">span5</span>
</div>
<div>
<h1>name</h1>
<span name="span1">span1</span>
<span name="span2">span2</span>
<span name="span3">span3</span>
<span name="span4">span4</span>
<span name="span5">span5</span>
</div>
</body>
</html>
3967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
