1. 标签概念
<!--
五要素： 文档声明<!DOCTYPE html>
根标签<html></html>
头部元素<head></head>
主体元素<body></body>
注释标签
1.html文件的根标签， <html></html>所有其他标签都要放在这个标签中间
2.html文件下的一级标签
<head></head>存放不直接展示却很重要的内容
如： 1.字符集编码（以什么编码方式展示出来）
单标签<meta charset = "utf-8"/>告诉浏览器用什么字符集对文件进行解码
2.css引入
3.js引入
4.其他标签
<body></body> 体标签
页面要展示的主体内容
3.专业词汇：
1.标签tag: <>，一对尖括号即一个标签
2.属性attribute： 对标签特征进行设置的一种方式，属性一般在开始标签中定义。如：<input type = "password"?>
3.文本text：双标签中的文字
4.元素element：开始标签+属性+文本+结束标签 称之为一个元素。如：<body> 到 </body>称之为元素
-->
hello wrold
<!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>
你好世界
<h1>
hello wrold
</h1>
</body>
</html>2. 标题标签
<!--
标题：h1-h6即分为六级的标题
段落：p
换行：br:换行
hr：带横线的换行
-->
<h1>带领你的部落走向胜利！</h1>
<h2>带领你的部落走向胜利！</h2>
<p>
《部落冲突》（Clash of Clans，英文简称COC）是由芬兰游戏公司Supercell Oy
开发的一款塔防类的策略手游。
<br/>
<hr/>
</p>3. 序列标签
<!--
有序列表 ol
无序列表 ul
列表项 li
-->
<ul>
<li>
Java
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制语句</li>
<li>函数</li>
<li>面向对象</li>
</ol>
</li>
<li>HTML/css/js</li>
<li>spring全家桶</li>
</ul>4. 超链接标签
<!--
超链接 a
href 用于定义要跳转到的资源位置的地址
1.完整的url：https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343
2.相对路径：
./ 从当前资源所在的路径中寻找目标资源（默认该方式，可省略不写）
../ 从当前资源的上一级路径中开始寻找目标资源（若以该方式必须写）
3.绝对路径：指定从哪里作为出发点开始查找资源
targe 用于定义目标资源的打开方式
1._self 在当前页面直接打开
2._blank 跳转到另一页面打开
-->
<!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>
<a href="https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343" target="_self">食懵你啊1 </a>
<br>
<a href="https://blog.csdn.net/2301_79526467?spm=1011.2266.3001.5343" target="_blank">食懵你啊2</a>
<br>
<!--相对路径-->
<a href="./hello.html" target="_self">hello</a>
<br>
<!--绝对路径-->
<a href="/demo1-html/常见标签/p2列表.html" target="_self" target="_self">hello</a>
</body>
</html>5. 图片标签
<!--
img
src 定义图片的路径
title 鼠标悬停时显示的文字
alt 打开资源失败时显示的内容
width 定义图片大小，只需要输入宽会自动按照一定比列设置高
-->
<!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>
<img src="/demo1-html/img/屏幕截图 2024-03-23 162925.png" width="300" title="奶龙" alt="404" />
<br>
<img src="/demo1-html/img/屏幕截图 2024-03-23 162925.png" title="drogen" alt="404"/>
</body>
</html>6. 表格标签
<!--
表格标签 table整张表
thread 表头
tboody 表体
tfoot 表尾
tr 表格中的一行
td 表格中一行的一个单元格
th 表格中的加粗且居中的td
-->
<!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>
<!--
设置表格标题的样式
style="text-align: center;"将标题居中
-->
<h3 style="text-align: center;">部落成员竞赛表</h3>
<table borde border="1px" style="margin: 0px auto; width: 400px;">
<thread>
<tr>
<th>姓名</th>
<th>项目</th>
<th>名次</th>
<th>备注</th>
</tr>
</thread>
<tbody>
<tr>
<td>莫雪韵</td>
<td>acm</td>
<td>国一</td>
<!--
rowspan 表示行，即当前各自要横着占3格
-->
<td rowspan="5">全体起立</td>
</tr>>
<tr>
<td>吴奈</td>
<td>蓝桥杯</td>
<td>国一</td>
</tr>
<tr>
<td>张晓琳</td>
<td>双创</td>
<td>国二</td>
</tr>
<tr>
<td>分队</td>
<!--
colspan 即当前单元格要在表内竖着占3格
-->
<td colspan="2">国家队</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
</body>
</html>7. 表单标签
<!--
form 表单标签
action：定义数据的提交地址
1.url
2.相对路径
3.绝对路径
method：定义数据的提交方式
1.get
参数：url??usename=343&password=434324
数据暴露在地址栏，数据相对不安全
地址栏长度有限，提交的数据量不大
地址栏只能是字符，不能提交文件
发送数据效率相对post较高
2.post
参数默认不放在url后面
数据不暴露在地址栏，数据相对安全
数据可以单独打包发送，数据量大
可以发送文件
表单项标签的name属性一定要定义，该属性用于明确提交时的参数
表单项的value值可以定义，不定义就会使用默认的值，当输入值会将默认值覆盖
input 表单项标签
type 输入信息的表单项类型
text 单行文本框
password 密码框
submit 提交按钮
reset 按钮重置
radio 单选框（多个选项选其一）
多个单选框同时使用若要产生互斥效果则定义的属性名需要相同
checkbox 多选框，可以同时选择多个选项
file 选择文件
注意：设置默认内容需要用到checked
textarea 多行文本框（文本域）
select 下拉框
option 下拉框的内容
注意：设置默认内容需要用到selected
-->
<!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>
<!--定义往纳提交，提交方式-->
<form action="hello.html" method="get">
<!--添加表单项标签，输入用户信息-->
<!--
hidden 数据不显示出来，但是提交时会携带
readonly 即该文本框显示出来，但不能修改，该数据提交时会携带
disabled 不可用的数据，该数据提交时不会携带
-->
<input type="hidden" name="id" value="123" /> <br>
<input type="text" name="pd" value="456" readonly /> <br>
<input type="text" name="td" vlaue="789" disabled /> <br>
账号： <input type="text" name="usename" /> <br>
密码：<input type="password" name="password" /> <br>
<!--定义单选框radio，属性名为gender，选择提交后的值为1/0，不设值默认为on，
开启第一个单选框的默认选择，即两个单选框都不选则默认选择checked为true的单选框-->
性别：
<input type="radio" name="gender" value="1" checked="checked"/> 男
<input type="radio" name="gender" value="0" /> 女
<br>
爱好：
<input type="checkbox" name="hobby" value="1" /> 篮球
<input type="checkbox" name="hobby" value="2" /> 羽毛球
<input type="checkbox" name="hobby" value="3" /> 游泳
<input type="checkbox" name="hobby" value="4" /> 骑车
<br>
个人简介:
<textarea name="intro" style="width: 300px; height: 100px;"></textarea>
<br>
籍贯：
<select name="pro">
<option value="1">京</option>
<option value="2">粤</option>
<option value="3">桂</option>
<!--selected为即默认选择该内容-->
<option value="null" selected>请选择</option>
</select>
<br>
选择头像：
<input type="file" /> <br>
<!--设置登录按钮，不设置值默认为提交，设置值为登录-->
<input type="submit" value="登录"/>
<!--设置重置按钮，不设置值默认为重置，设置值为清空-->
<input type="reset" value="清空"/>
</form>
</body>
</html>8. 布局标签
<!--
css样式基础：
通过元素的style属性进行设置
stytle="样式名1: 值; 样式名2: 值; ... ;"
块元素：自己独占一行的元素
div：对于很多css样式大多都是生效的，如：长宽高等等
行元素：不会自己独占一行的元素
span：对于很多css样式都是不生效的
-->
<!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 style="background-color: blueviolet;">
<div style="border: 1px solid rgb(0, 255, 60); width: 400px; height: 200px; margin: 10px auto; background-color: cornflowerblue;">123</div>
<div style="border: 1px solid rgb(255, 106, 0); width: 400px; height: 200px; margin: auto;">456</div>
<div style="border: 1px solid rgb(238, 255, 0); width: 400px; height: 200px; margin: auto;">789
<div style="border: 1px solid blue; width: 200px; height: 100px; margin: auto;">
niubi
</div>
</div>
<span style="border: 20px; width: 2000px;">
hello world
</span>
</div>
</body>
</html>9. 实体标签
<!--
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>
<!--输出 <h1> 一级标题</h1> -->
< h1 > 一级标题 < / h1 >
<!--输出>-->
&gt
</body>
</html>
5378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
