HTML的基本结构
<!DOCTYPE html><!---第一行是HTML5的声明固定写法，且必须首行-->
<!--注释的快捷键 CTRL+/
html是整个页面的根标记 唯一，双标记 -->
<html>
<!-- head标记是子标记 -->
<head>
<title>第一个HTML页面</title>
</head>
<!-- HTML的子标记，有且只有一个，网页中整体布局都在body标记里写 -->
<body>
HTML的学习:2024.7.15
</body>
</html>实体
<!DOCTYPE html>
<!-- 感叹号+回车 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html的实体</title>
</head>
<body>
< YoR>
</body>
</html>meta元素
<!DOCTYPE html>
<html lang="en">
<head>
<!-- mate元素可以使用属性charset来设置当前的HTML文档字符 -->
<meta charset="UTF-8">
<!-- mate元素也可以完成刷新和跳转 -->
<!-- <mate http-equiv="refresh" content="5"> -->
<meta http-equiv="refresh" content="5;url=http://www.runoob.com">
<title>mate元素的学习</title>
<style>
/* style元素用来设置HTML的样式 */
</style>
<!-- 样式过多使用独立的css文件，用link引入即可 -->
<link rel="stylesheet" href="CSS文件的地址">
<script src="js文件的地址">
//script用于书写交互代码,过多放入独立的js文件,
//也是使用script标签里的属性src引入过来即可
</script>
</head>
<body>
</body>
</html>基础标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础标签的学习</title>
</head>
<body>
<!-- 标题标签,用于设置一级到六级的标题,标签从h1到h6 -->
<h1>编程语言的学习</h1>
<h2>HTML语言</h2>
<h3>常用标签</h3>
<h4>html根标记</h4>
<h5>根标记简介</h5>
<h5>根标记联系</h5>
<h6>最小标题</h6>
<!-- hr是一个水平线标签，也是一个自结算标记 -->
<hr>
<!--段落标签:用于将一段文字包裹起来,可以设置其他各种样式,使用p标签,
双标记,属于块级元素 -->
<p>我是段落</p>
<p>段落,too</p>
<p>段落,again</p>
<hr>
<p>ooo,<br>ooooo;<br>ooooo,<br>ooooo.</p>
</body>
</html>基础标签-图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签的学习</title>
</head>
<!-- 图片标签：img，单标记 不是块级元素，是内敛元素（行内元素）
作用：在网页上插入一张图片。
属性：
src：用于书写图片的具体位置（网络&本地磁盘）
alt：给搜索引擎使用的，图片的代替文字
width：图片的宽
height：图片的高
如果只设置宽或高中的一个属性，图片会按照原图比例缩放-->
<body>
<h1>引入一张图片</h1>
<!-- 路径推荐相对路径，相对的是当前文件所在的文件夹
当前文件夹表达方式：./
./可省略
../ 返回上一层文件夹-->
<img src="./images/tangwei.jpg" alt="tangwei" width="600">
<h1>引入本地磁盘的一张图片</h1>
<img src="./images/yor.jpg" alt="yor" width="800">
</body>
</html>基础标签-超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签的学习</title>
</head>
<!-- 图片标签：img，单标记 不是块级元素，是内敛元素（行内元素）
作用：在网页上插入一张图片。
属性：
src：用于书写图片的具体位置（网络&本地磁盘）
alt：给搜索引擎使用的，图片的代替文字
width：图片的宽
height：图片的高
如果只设置宽或高中的一个属性，图片会按照原图比例缩放-->
<body>
<h1>引入一张图片</h1>
<!-- 路径推荐相对路径，相对的是当前文件所在的文件夹
当前文件夹表达方式：./
./可省略
../ 返回上一层文件夹-->
<img src="./images/tangwei.jpg" alt="tangwei" width="600">
<h1>引入本地磁盘的一张图片</h1>
<img src="./images/yor.jpg" alt="yor" width="800">
</body>
</html>基础标签-按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮button的学习</title>
</head>
<!-- 基本按钮标签：button 双标记 内容体可以放入文字或图片
建议：添加type属性 指定属性值为button -->
<body>
<button type="button" onclick="alert('你好')">点我提示你好</button>
<button type="button" onclick="alert('世界')">
<img src="./images/2.jpg" alt="1">
</button>
</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>
<h1>强调，加粗</h1>
<p>这句话是<strong>强调</strong>的，
<b>加粗的</b>
</p>
<hr>
<h1>斜体</h1>
<p>这句话是<em>斜体</em></p>
<hr>
<h1>java代码</h1>
<code>
System.out.println("java代码")
</code>
<hr>
<h1>预编译标签</h1>
<pre>
开头 有三个空格
</pre>
<hr>
<h1>文字方向改变</h1>
<bdo dir="rtl">改变方向</bdo>
<hr>
<h1>引用双引号</h1>
<p>这是引用双引号
<blockquote>--引用</blockquote> <q>引用</q>
<sup>下标</sup> 标<sub>上标</sub>
</p>
</body>
</html>列表
<!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>
<!-- - 无序列表是一个项目的列表，列表项使用粗体圆点（典型的小黑圆圈）进行标记。
- 无序列表使用`<ul>`标签，列表项使用`<li>`标签 -->
<h1>无序列表</h1>
东三省名称：
<ul>
<li>吉林省</li>
<li>辽宁省</li>
<li>黑龙江省</li>
</ul>
<hr>
<h1>有序列表</h1>
前五排名：
<ol>
<li>吕布</li>
<li>赵云</li>
<li>典韦</li>
<li>关羽</li>
<li>马超</li>
</ol>
<hr>
<h1>列表嵌套</h1>
学校排名：
<ul>
<li>一班
<ol>
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ol>
</li>
<li>二班
<ol>
<li>A </li>
<li>B </li>
<li>C </li>
</ol>
</li>
<li>三班
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
</ul>
<hr>
<h1>自定义列表</h1>
<!-- dl是父标签，dt和dd是子标签，dt是列表项，dd是列表项解释 -->
<dl>
<dt>北京</dt>
<dd>首都，人口最多</dd>
<dt>深圳</dt>
<dd>黑色城市</dd>
<dt>杭州</dt>
<dd>女孩市歌</dd>
</dl>
<hr>
</body>
</html>表格
<!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>
<!-- border: 表的外边框 10像素宽
cellspacing: 单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度 可以是具体像素，也可以是屏幕的百分比 -->
<table border="1px" cellspacing="0px" width="50%" cellpadding="10px" align="center" >
<caption>学生信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A </td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>B </td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>C </td>
<td>17</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>表格2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格2</title>
</head>
<body>
<table border="1px" cellspacing="0" width="800px" align="center">
<tr>
<td>1</td>
<td colspan="3">1</td>
<!-- <td>1</td> -->
<!-- <td>1</td> -->
</tr>
<tr>
<td rowspan="2">2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<!-- <td>3</td> -->
<td>3</td>
<td colspan="2">3</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<!-- alt+shift+鼠标拖拽 可以一次性输入多行同样的内容 -->
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</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>
<table border="1px" cellspacing="0" width="800px" align="center">
<tr>
<td colspan="4">时间/日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td colspan="3">9.30~10.15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="3">10.25~11.10</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="9"> </td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td colspan="3">13.30~14.15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="3">14.25~15.15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</table>
</body>
</html>表单form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单form的练习</title>
</head>
<body>
<!-- form是整个表单的父元素 action是form标签里的属性 用于书写提交的路径
method的属性：是用于书写提交的方式，常用得值有get/post -->
<!-- 子元素：
fieldset： 表单的整个边框 边框上如果想要使用表单标题，使用legend元素
常用子元素：
label： 用于设置文字标签，扩大点击域 。for属性用于关联某一个input，使用id值关联
input： 输入框元素，可以根据type属性的不同值，来定义不同的输入类型，比如
type属性：
text：文本框 该值为默认值，可不写
password： 密码框 用*来取代密码
radio： 单选框 name的值需要相同才能算做一组，具有单选效果
checkbox: 复选框，name的值必须相同，才能算做一组。checked默认选择
submit： 提交类型，提交整个表单里输入的说有数据，提交到服务器
file： 文件上传
hidden： 隐藏域 用于隐藏不需要展示的内容
-->
<!-- id属性：
1. 关联lable标签
2. id有唯一标识，不能重复
name属性： 用于定义向服务器提交的keyvalue中的key的名字
value属性： 接受用户输入的内容-->
<!-- select： 下拉菜单元素
name属性： 用于定义提交到服务器name的具体指。
option子元素： 用于定义下拉菜单的选项
option元素里的属性：
value： 用于定义提交到服务器的选项的具体值
selected属性： 默认选中
textarea： 文本域 注意与input的type="text"的区别 可设置行列-->
<form action="" method="">
<fieldset>
<legend>legend是标题 是fieldset的子元素</legend>
<label for="username">姓名：</label>
<input type="text" id="username" name="myname">
<br>
<label for="my">密码：</label>
<input type="password" id="my" name="mypasswd">
<hr>
<label for="">性别</label>
<input type="radio" name="gender" id="male" value="m" checked><label for="male">男</label>
<input type="radio" name="gender" id="female" value="f"><label for="female">女</label>
<hr>
<label>日期时间</label>
<input type="time" value="12:12">
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month">
<hr>
<label for="">爱好</label>
<input type="checkbox" id="read" name="hobby" value="read"><label for="read">读书</label>
<input type="checkbox" id="see" name="hobby" value="see" checked><label for="see">看书</label>
<input type="checkbox" id="eat" name="hobby" value="eat"><label for="eat">吃书</label>
<input type="checkbox" id="book" name="hobby" value="book"><label for="book">书书</label>
<hr>
<label for="">地址</label>
<select name="address" id="">
<option value="cc">长春</option>
<option value="sy">松原</option>
<option value="sp" selected>四平</option>
<option value="yj">延吉</option>
</select>
<hr>
<label for="">文件上传</label>
<input type="file" name="myfile">
<hr>
<label for="id1">自我介绍</label>
<textarea name="myself" id="id1" rows="5" cols="10">
</textarea>
<hr>
<label for="">隐藏信息</label>
<input type="hidden" value="10086">
<hr>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>div的学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div的学习</title>
<style>
#main {
border: 1px solid #e71919;
height: 800px;
background-color: antiquewhite;
}
#top {
height: 200px;
background-color: blue;
}
#center {
height: 400px;
background-color: aqua;
}
#low {
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<!--
div: 是块级元素，通常用于做页面的整体布局，无其他含义
该元素可以作为其他任何元素的容器
-->
<body>
<div id="main">
<div id="top">top</div>
<div id="center">center</div>
<div id="low">low</div>
</div>
</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>
<!-- 浏览器的自动纠正功能：
1. 打那个元素写在了根元素html外，会自动纠正到body里
2. p元素里如果放入其他块元素，则会将p元素分解为前后两个p元素，其他元素相当于挪出p元素，与p元素并列
3. 当根元素html里，出现了除了head和body两个以外的子元素，则自动纠正到body里
-->
<body>
<p>段落2
<h1>标题</h1> 你真好
<div>中有div</div>
</p>
</body>
<p>段落，too</p>
</html>
<p>段落</p>H5-音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频标签的学习</title>
</head>
<!-- 音频标签：
audio: 用于加载音频文件，支持的格式mp3，wav，ogg
属性:
src:用于书写音频文件的路径
controls： 提供用户可以操作的空间，比如播放，暂停
autoplay: 自动播放
loop： 循环播放
-->
<body>
<!-- <audio src="./resource/audio.mp3" controls autoplay></audio> -->
<!-- 考虑浏览器的兼容性。有些音频格式不支持。
可以使用source子元素，让其自上而下的寻找可用的音频文件，找到一个能播放的为止
-->
<audio controls>
<source src="./resource/audio.mp3">
<source src="./resource/audio.ogg">
</audio>
</body>
</html>H5-视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签的学习</title>
</head>
<!--
视频标签video： html5提供的新元素
属性：
src： 书写路径
controls： 提供控件
autoplay： 自动播放
loop: 循环播放
width： 宽
height： 高
宽与高，只设置一个，等比例缩放
-->
<body>
<!-- <video src="./resource/flower.webm" controls loop width="600"></video> -->
<!-- 考虑浏览器兼容性，部分格式不支持，
使用source子元素，让浏览器自上而下寻找可用文件 -->
<video controls width="1000">
<source src="./resource/a29ab5126aba3060fd64d161abfddd31.mp4">
<source src="./resource/flower.webm">
</video>
</body>
</html>H5-iframe
<!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>
<!-- iframe标签：用于将另外一个网页，嵌入当前网页
属性：frameborder 表示是否显示边框，0为不显示，1为显示
可以使用width和height属性调整窗口的宽与高
-->
<body>
<h1>当前网页</h1>
<p>这是一段话</p>
<iframe src="https://www.baidu.com" frameborder="1" width="1000" height="1000">不支持ifream</iframe>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
