HTML 学习记录
html是超文本标记语言，是一种标记语言
超文本：链接
标记：也叫标签，带尖括号的文本
标签语法
1.标签成对出现，中间包裹内容
2.<>里面放英文字母
3.结束标签比开始标签多一个 /
例如
<strong> 你好 </strong>
拓展：
双标签：成对出现
单标签：只有开始标签，没有结束标签
<br>
<hr>
基本骨架
<html>
<head>
<title>网页标题 </title>
</head>
<body>
网页主体
</body>
</html>
HTML 部分
html是超文本标记语言，是一种标记语言
超文本：链接
标记：也叫标签，带尖括号的文本
标签语法
1.标签成对出现，中间包裹内容
2.<>里面放英文字母
3.结束标签比开始标签多一个 /
例如
<strong> 你好 </strong>
拓展：
双标签：成对出现
单标签：只有开始标签，没有结束标签
<br>
<hr>
基本骨架
<html>
<head>
<title>网页标题 </title>
</head>
<body>
网页主体
</body>
</html>
标签关系
各种标签
1.标题标签 h1-h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.段落标签
<p> </p>
3.单标签
<hr> //水平线
<br> //换行
4.文本格式化标签
<strong>你好</strong> //加粗 b(另一种方式)
<em>strong</em> //倾斜 i
<ins>strong</ins> //下划线 u
<del>strong</del> //删除线 s
5.图像 img
<img src="" alt="加载失败" title="这是一张图片">
//src 是路径
//alt 是如果图片加载不出来会有什么提示
//title 提示文本，鼠标悬停的时候就会进行显示
注意:浏览器缩放图片是等比例进行缩放的
属性： 属性名 = ” 属性值“
写在尖括号里面，标签的后面属性之间用空格隔开，不区分先后顺序
6.超链接
<a href="https://www.w3school.com.cn/" target = "_blank">w3</a>
href 是跳转地址，是超链接的必须属性
target 是属性
_blank 在新窗口打开页面
7.音频
<audio src="屏幕录制 2025-01-23 213903.mp4" controls loop autoplay></audio>
controls 显示控制面板
loop 循环播放
autoplay 自动播放
8.视频
<video src="屏幕录制 2025-01-23 213903.mp4" controls loop autoplay muted></video>
controls 显示控制面板
loop 循环播放
autoplay 自动播放
muted 静音播放
浏览器支持在静音状态下进行自动播放
9.列表
注意：ul ，ol 标签里面只能有 li标签，dl标签里面只能有dt和dd
li dt dd标签里面可以包裹任何内容
//无序列表，有序列表，定义列表
<!-- 无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>yes</li>
<li>yes</li>
<li>yes</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
<dd>订单查询</dd>
</dl>
10.表格
table 是表格
tr 代表行
th 代表表头单元格
td 代表内容单元格
thead 表格头部
tbody 表格内容
tfoot 表格底部
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>lisi</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
</table>
合并单元格
1.跨行合并 2.跨列合并
步骤：保留最左最上的单元格，添加属性（取值为数字）
跨行合并 rowspan 跨列合并 colspan
最后删除其他单元格
//跨行合并
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>lisi</td>
<td>98</td>
<td>198</td>
</tr>
</table>
//跨列合并
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>lisi</td>
<td>98</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</table>
11.表单
input
<input type="text" placeholder="请输入电话"> //文本框
<input type="password" placeholder="请输入电话"> //密码框
<input type="radio"> //单选框
<input type="checkbox"> //多选框
<input type="file"> //上传文件
placeholder 是提示文本
radio 常用属性
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
//name属性 控制多个变量，只选择其中一个
//checked属性 进入页面即选中
file 属性
<input type="file" multiple>
//multiple 属性支持上传多个文本
多选框属性
//checked属性 默认选中
<input type="checkbox" checked>
下拉菜单
请选择一个数字
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="" selected>3</option>
<option value="">4</option>
</select>
//有几个选项就有几个option，selected是默认选中
文本域
多行输入文本的表单控件
<textarea>请输入评论</textarea>
右下角有拖拽功能，未来会禁用
label标签
作用：绑定文字和表单控件的关系，增大表单控件的点击范围
//写法一
<input type="radio" id="man">
<label for="man">男</label>
//id属性和label的for属性相同，label只包裹内容，不包裹表单控件
//写法二
<label><input type="radio">女</label>
button
<button type="submit">确定</button> //默认属性
<button type="reset"></button> //重置，配合form标签进行使用
<button type="button"></button> //普通按钮，配合js使用
form：表单区域，进行统一管理
其中action属性，是发送数据的地址
12.布局标签 div span
作用：布局网页
div 独占一行
span 不换行
<div>hello world</div>
<span>hello</span>
字符实体
如果代码中敲键盘空格，网页只识别一个
<p>乾坤未定，你<我皆>是黑 马</p>
< 小于号
> 大于号
空格
路径
1.相对路径 从当前文件位置出发寻找目标文件
/ 表示进入某个文件夹里面
. 表示当前文件所在文件夹
… 表示进入上一级文件夹
2.绝对路径 从盘符出发查找目标文件
