<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Html</title>
</head>
<body>
<!-- HTML的定义：HTML是超文本标记语言
超文本就是链接，标记也叫标签，带尖括号的文本
标签语法
标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多/
双标签：成对出现的标签
单标签:只有开始标签，没有结束标签
-->
<strong>我爱前端</strong>
<!-- strong标签是双标签，作用：加粗文字 -->
<hr>
<!-- hr标签是单标签，作用：生成一条水平线 -->
<br>
<!--br 标签是单标签 作用： 换行 -->
<!-- html的基本骨架
HTML的基本骨架是网页模板
html：整个网页
head：网页头部，存放给浏览器看的代码，例如css
body：网页主体，存放给用户看的代码，例如图片，文字
title：网页标题
快速生成：在html文件中按 ！（英文状态）和enter键或tab键 -->
<!-- 标签关系
作用：明确代码的书写位置
1.父子关系（嵌套关系）
2.兄弟关系（并列关系）
-->
<!-- 注释
注释就是对代码的解释和说明，能提高代码的可读性
不会在浏览器中显示
快捷键：Ctrl+/
-->
<!-- 标题标签
标签名：h1~h6（双标签）
特点：文字加粗，逐渐减小，独占一行（换行）
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 经验：h1标签在一个页面只用一次，用来放标题或logo
h2~h6则没有限制
-->
<p>段落一</p>
<p>段落二</p>
<!-- 段落标签
一般用在新闻段落，文章段落，产品描述等
标签名：p（双标签）
显示特点：独占一行，段落之间有间隙
-->
第一行内容<br><hr>第二行内容
<!-- 换行于水平线标签
换行：<br>(单标签)
水平线：<hr>标签（单标签）
-->
<strong>加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
<!-- 文本格式化标签
作用：为文本添加特殊的格式。，以突出重点，都不换行。
常见的文本格式：加粗，倾斜，下划线，删除线等
strong：加粗
em：倾斜
ins：下划线
del：删除线
-->
<!-- 图像标签
作用：在网页中插入图片
<img src='图片的URL'>
src:用于指定图像的位置和名称，是<img>的必须属性
图像标签的属性（不区分先后顺序）
属性名='属性值'
alt：替换文本，图片无法显示的时候显示的文字
title：提示文本，鼠标悬停在图片上面的时候显示的文字
width：设置宽度
height：设置高度
注意：浏览器缩放图片是等比例缩放的
-->
<!-- 路径
路径就是指从查找文件时的起点到终点所经历的路线
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
window电脑从盘符出发，Mac电脑从根目录出发
. 表示当前文件所在文件夹
/ 表示进入某个文件夹里面
..当前文件的上一级文件夹
-->
<!-- 超链接
作用：点击跳转到其他页面
<a href='xxx.xxx.xxx'>xxx</a>
-->
<a href="#" target="_blank">跳转</a>
<!-- 在新窗口打开页面 -->
<!-- 加了target='_blank' 属性跳转时可以不覆盖原网页 -->
<audio src="音频的URL"></audio>
<!-- 音频标签
常见属性：
src：必须属性，作用：音频的URL
controls：作用是显示音频控制面板
loop：作用是循环播放
autoplay：作用是自动播放,但浏览器为了用户体验会禁用
-->
<video src="视频的URL"></video>
<!--
src：必须属性，作用：视频的URL
controls：作用是显示视频控制面板
loop：作用是循环播放
muted：禁音播放
autoplay：作用是自动播放,但浏览器为了用户体验只能在静音状态下自动播放
-->
<!-- 列表
作用：布局内容排列整齐的区域
列表分类：无序列表，有序列表，定义列表
-->
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
</ul>
<!-- 无序列表
作用：布局排列整齐的不需要规定顺序的区域
标签：ul嵌套li，ul是无序列表，li是列表条目
注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容
-->
<ol>
<li>列表条目1</li>
<li>列表条目2</li>
</ol>
<!-- 有序列表
作用：布局排列整齐的需要规定顺序的区域
标签：ol嵌套li，ol是有序列表，li是列表条目
注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容
-->
<dl>
<dt>我是标题</dt>
<dd>我是描述</dd>
</dl>
<!-- 定义列表
标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
注意：dl里面只能包含dt和dd，dd和dt可以包含任何内容
-->
<table border="1">
<tr>
<th>姓名</th>
<th>数学</th>
</tr>
<tr>
<td>小雷</td>
<td>150</td>
</tr>
</table>
<!-- 表格
网页中的表格于Excel表格类似，用来展示数据
标签：table嵌套tr，tr嵌套td/th
table：表格
tr：行
th：表头单元格
td：内容单元格
注意：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小雷</td>
<td>150</td>
</tr>
</tbody>
<tfoot>
<td>第一</td>
<td>满分150</td>
</tfoot>
</table>
<!-- 表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
thead：表格头部，表格头部内容
tbody：表格主体，主要内容区域
tfoot：表格底部，汇总信息区域
不会改变网页只是让代码更清晰
-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小雷</td>
<td rowspan="2">150</td>
<!-- 上下合并150这个单元格，要加rowspan，合并几个值就写几个 -->
</tr>
<tr>
<td>小雷</td>
<!-- <td>150</td> -->
<!-- 把被合并的单元格去掉 -->
</tr>
</tbody>
<tfoot>
<td colspan="2">满分150</td>
<!-- 左右合并满分150这个单元格，要加colspan，合并几个值就写几个 -->
<!-- <td>满分150</td> -->
<!-- 把被合并的单元格去掉 -->
</tfoot>
</table>
<!-- 合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
步骤：
1.明确合并目标
2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
跨行合并，保留最上单元格，添加属性rowspan
跨列合并，保留最左单元格，添加属性colspan
3.删除其他单元格
注意：不要跨结构（tf，tb，th）合并
-->
文本框：<input type="text" placeholder="请输入文本">
<br><br>
密码框：<input type="password" placeholder="请输入密码">
<br><br>
多选框：<input type="checkbox" checked>
<!-- 默认选中 -->
<br><br>
单选框1：<input type="radio" name="gender" checked="checked">
<!-- 默认选中 -->
<br><br>
单选框2：<input type="radio" name="gender">
<br><br>
上传文件：<input type="file">
<br><br>
上传文件：<input type="file" multiple>
<!-- 表单
作用：收集用户信息
input的基本使用
input标签type属性值不同，则功能不同
<input type=''>
属性有：
text:文本框，用于输入单行文字
password:密码框
radio:单选框
checkbox:多选框
file:上传文件
input的占位文本
占位文本：提示信息
<input type='' placeholder='要提示的信息'
单选框radio
常用属性：
name：控件名称，控件分组，同组只能选中一个（单选功能）
checked：默认选中，属性名和属性值相同，简写位一个单词
上传文件 file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type='file' multiple>
多选框-checkbox
多选框也叫复选框
默认选中：checked
-->
城市：
<select>
<option>北京</option>
<option selected>广州</option>
<!-- 加了selected是可以设置默认选中广州 -->
<option>上海</option>
<option>深圳</option>
</select>
<!--下拉菜单
标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
-->
文本域：
<textarea>输入文本</textarea>
<!-- 文本域标签
作用：多行输入文本的表单控件
标签：textarea 双标签
右下角有拖拽功能，未来都会禁用的，会用css设置尺寸
-->
点文字也会选中
<!-- 完整写法 写法一 -->
<input type="radio" name="gender" id='man'><label for='man'>男</label>
<!-- 简单写法 写法二 -->
<label><input type="radio" name="gender">女</lab1>
<!-- label标签
作用：网页中，某个标签的说明文本
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
写法一：
label标签只包裹内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type ='radio' id ='man'>
<label for='man'>男</label>
写法二：
使用label标签包裹文字和表单控件，不需要属性
<label><input type='radio' 女 <label>
提示：支持label标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等
-->
<form action=''>
用户名：<input type='text'>
<br><br>
密码：<inpu1 type='password'>
<button type='submit'>提交</button>
<button type='resest'>重置</button>
<button type='button'>普通按钮</button>
</form>
<!-- 按钮标签 button
<button type=''>按钮</button>
type属性值说明：
submit：提交按钮，点击后可以提交数据到后台（默认功能）
reset：重置按钮，点击后将表单控件恢复默认值
button：普通按钮，默认没有功能，一般配合JavaScript使用
注意：表单标签要放在form表单区域才能使用,action-''是未来发送数据的地址
-->
<div>这是div<div>
<!-- div是大盒子 独占一行-->
<span>这是span<span>
<!-- span是小盒子 可以在同一行 -->
<!-- 无语义的布局标签
作用：布局网页，划分网页区域，摆放内容
div：独占一行
span：不换行
-->
我是空 格
<!-- 字符实体
作用：在网页中显示预留字符
空格： 在代码中敲键盘空格，网页只识别一个
小于号：⁢
大于号：>
-->
</body>
</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>注册信息</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<!-- 表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历：</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<br><br>
<label>学校名称：</label><input type="text">
<br><br>
<label>所学专业：</label><input type="text">
<br><br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
--
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br><br>
<!-- 协议 和 按钮 -->
<input type="checkbox"><label>已阅读并同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>
1437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
