HTML的学习
标签
排版标签
<p>段落标签
<pr>换行标签
文本格式化标签
<hr>水平线标签
<strong>加粗标签
<em>倾斜标签
<ins>下划线标签
<del>删除线标签
图像标签
<img>图像标签
<img src="./cat1.jpg" alt="这是一只猫">
src指定图片的位置和名称，快速索引使用./
<alt>图片无法显示时显示的文字
<title>鼠标悬停在图片上时显示的文字
相对路径与绝对路径
相对路径：
./进入当前文件夹
../进入上一级文件夹
绝对路径：windows：盘符 ；Mac：根目录
\
超链接标签
<a href="http://www.baidu.com">跳转到百度</a>
href属性值是跳转地址，是超链接的必须属性
属性target="_blank"重开一个新窗口
多媒体标签
音频标签audio
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放
视频标签video
controls 显示视频控制面板
loop 循环播放
muted静音播放
autoplay 自动播放（浏览器仅支持在静音状态下自动播放）
综合训练-个人简介
<!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>
<hr>
<p>jcsdcsli恢复期我权威地位<a href="#">Vue.js</a>的开始大口径的<a href="#">HTML5</a>卡死了大苏打的思考大家卡里克多久哦埃乌斗气的好i等候i看到康拉德你的卡省的较大三等奖i的十大宣布奇怪的气味和对其我的一起玩的我的后期无敌很委屈合区i的护卫七点<a href="#">JavaScript</a> 以前我大概还是时光回溯的鼓腮u给丢啊大声对哦请回答的活撒娇还打算大户千岛湖事件安理会第hi撒大青蛙很多玩家获得今晚上婚纱回答hi萨哈是<a href="#">Vue.js</a> </p>
<img src="./校徽.jfif" alt="张三的照片" title="张三">
<h2>学习经历</h2>
<p>bcksdosah djaidjiaiOS丹佛i是否金佛i是覅偶是发货放假哦神佛i哈佛的v后的v后的粉红色的覅偶是覅送的分红i现场v就聚到i发窘山大佛i湿地松的肌肤金佛山的飞机哦v你极度反感i的那份</p>
<h2>主要成就</h2>
<p>irei发生的覅是反铐上飞机哦啊是卡佛<strong>怕时间非常漫长减肥</strong> 的口水附件是平凡的v吗v没覅发【身份<ins>富婆事件发生破的肌肤拍摄的飞机票身份</ins> 及开发票是减肥的v就卡片上的飞机</p>
<h2>社会任职</h2>
<p>jcdsifjfs就是大幅减少开发票是否觉得发生的纠纷是PDF敬佩的是发票是否开始食品发酵的时间发痘痘覅豆腐皮视频防泼水的房间泡芙惊悚的肌肤山东佛菩萨发拍摄的九分电视剧佛洞附近殴斗佛的就是破地方键盘上附件是批发价判断是否键盘发生的纠纷</p>
</body>
</html>
综合训练-Vue简介
<!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>Vue简介</title>
</head>
<body>
<h1>Vue.js</h1>
<p>上发送i发附件四减肥是的及防水等级覅升级附加赛商品房建设经费大家覅的疾风叟的粉丝基地副司机发生了i的身份和山东回复附件是的附属品富士康开始PDF决定是否宋平副教授副教授都分配的肌肤的发热就伏击几分敬畏京东佛法绝地反击批发价巨额罚金二姐夫PDF京东方飞机大炮</p>
<p>其作者为<a href="../16-综合训练一/个人简介.html" target="_blank">张三</a></p>
<h2>主要功能</h2>
<p>grjoejirgjoriie哦孙菲菲譬如几个软件光盘若干规定国家的居然跑几个热键哦i更多覅斤斤计较急急急地方各级滴哦啤酒节佛的偏高偏低股价跌破房管局的票房冠军的评价颇高拍摄的积分商品定价发票</p>
<p>cnaof操i是Casio才能升级佛挡杀佛防空炮算法计算定积分卡片上的防泼水</p>
<P>四的减肥食谱发视频佛挡杀佛的风控收到发票顺丰到付v模仿金佛</P>
<video src="../桌子.mp4" controls></video>
</body>
</html>
列表
分类：无序列表、有序列表、定义列表
无序列表:
作用：布局内容排列整齐的区域
标签：ul嵌套li，ul是无序列表，li是列表条目 <ul标签里只能包裹li标签>
有序列表:
作用：布局排列整齐的需要规定顺序的区域
标签：ol嵌套li，ol是有序列表，li是列表条目 <ol标签里只能包裹li标签，li标签里可以包含任何内容>
定义列表:
标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情 <dl里面可以包含dt和dd，dt和dd里面可以包含任何内容>
表格
标签：table(表格)嵌套tr(行)，tr嵌套td(表头单元格)/th(内容单元格)
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
表格结构标签:
thead
tbody
tfoot
合并单元格:保留最左最上,不能跨结构标签合并
保留最上：添加属性rowspan
保留最左：添加属性colspan
表单:收集用户信息
使用场景：登录页面、注册页面、搜索区域
<input type="...">
type属性值不同，功能不同
text 文本框，用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
<!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>input基本使用</title>
</head>
<body>
<!-- 输入什么就显示什么 -->
文本框：<input type="text">
<br><br>
<!-- 输入什么都显示点 -->
密码框：<input type="password">
<br><br>
单选框：<input type="radio">
<br><br>
多选框：<input type="checkbox">
<br><br>
上传文件：<input type="file">
</body>
</html>
占位文本：添加提示信息
<input type="..." placeholder="提示信息">
<!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>input基本使用</title>
</head>
<body>
<!-- 输入什么就显示什么 -->
文本框：<input type="text">
<br><br>
<!-- 输入什么都显示点 -->
密码框：<input type="password">
<br><br>
单选框：<input type="radio">
<br><br>
多选框：<input type="checkbox">
<br><br>
上传文件：<input type="file">
</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>
性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
</body>
</html>
上传文件-file
<input type="file" multiple>
<!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>
上传文件：<input type="file" multiple>
</body>
</html>
多选框-checkbox
默认选中：checked
<input type="checkbox" checked>
<!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>
兴趣爱好：
<input type="checkbox"> 敲代码
<input type="checkbox" checked> 敲前端代码
<input type="checkbox" checked> 敲前端HTML代码
</body>
</html>
下拉表单
标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
<!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>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
</body>
</html>
文本域标签
<textarea>默认提示文字</textarea>
<!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>
<!-- 右下角有拖拽功能，为了会禁用，未来工作中，会使用CSS来设置尺寸。 -->
<textarea>请输入评论：</textarea>
</body>
</html>
label标签-增大点击范围
作用：网页中，某个标签的说明文本
两种增大点击范围的写法：
<!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>label标签</title>
</head>
<body>
性别：
<input type="radio" name="gender" id="man"> <label for="man">男</label>
<label ><input type="radio" name="gender"> 女</label>
</body>
</html>
按钮-button
<button type="">按钮</button>
type属性值：submit（提交数据到后台）、reset（重置）、button（普通按钮，默认没有功能，一般配合js使用）
<!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>
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
<div>div-独占一行</div>
<span>span-不换行</span>
<!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>div和span</title>
</head>
<body>
<!-- div：大盒子 -->
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<!-- span：小盒子 -->
<span>这是 span 标签</span>
<span>这是 span 标签</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>
<!-- 在代码中敲键盘的空格，网页只识别一个 -->
乾坤未定，你我皆是黑 马。
<p>
</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>
<ul>
<li>
<img src="./1.jpg" alt="">
<h3>xdsdhais从撒泼尿精品</h3>
</li>
<li>
<img src="./2.jpg" alt="">
<h3>xdsdhais从撒泼尿精品</h3>
</li>
<li>
<img src="./3.jpg" alt="">
<h3>xdsdhais从撒泼尿精品</h3>
</li>
</ul>
</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>
8836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
