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>
<!--框架生成是!加tab或回车 -->
<!-- 注释是ctrl+/ -->
</body>
</html>
标签的分类:
<!-- 双标签:前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
单标签:自成一体,无法包裹内容 -->
<!-- <br>文字强制换行 <hr>添加一个横线-->
<hr>测试<br>测试二
标题标签:
<!-- 标题标签:
h系列标签 -->
<h1>一级标签</h1>
<hr>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--
语义:1~6级标签,重要程度一次递减
特点:文字都有加粗
文字都有变大,并且从h1到h6文字逐次减小
独占一行
-->
段落标签:
<!-- 段落标签 p
特点:段落之间存在间隙
独占一行
-->
<p>
这是一 <br> 段文字
</p>
文本格式化标签:
<!--
文本格式化标签:
(加粗) 标签b 或 Strong
(下划线) 标签u 或 ins
(倾斜) 标签i 或 em
(删除线) 标签s 或 del
特点: 默认不换行
表示强调语义的推荐用右边的单词
-->
<b>加粗</b>
<strong>加粗2</strong>
<u>下划线</u>
<ins>下划线2</ins>
<i>倾斜</i>
<em>倾斜2</em>
<s>删除线</s>
<del>删除线2</del>
图片标签:
<!-- 图片标签 -->
<img src="博哥.png" alt="博哥666" title="这是博哥" width="500">
<!-- src=""图片路径(只写名字,只能用本文件夹的图片,用其他路径参照下边知识点)
alt=""替换文本(图片不显示时,就显示替换文本)
title=""鼠标悬停的时候,显示的效果
width和height只要设置一个值,另一个等比例缩放,好处就是图片不变形
-->
<!-- 路径 -->
<!--
绝对路径:(了解)指目录下的绝对位置,可直接到达目标位置,通常从盘 符开始的路径.
例如:D:\day01\images\1.jpg
完整的网络路径:https://www.itcast.cn/2018czgw/images/logo.gif-->
<!--
相对路径:(常用)
概念:
当前文件:当前的html网页
目标文件:要找到的图片
从当前文件开始出发找目标文件的过程
*同级目录:
方法一:<img src="目标图片.gif">
方法二:<img src="./目标图片.gif">
./表示当前的意思 当前文件夹名称
-->
<img src="./博哥.png" alt="替换文字" title="这是博哥" width="300">
<!--
*下级目录:
目标文件在下级目录
-->
<img src="./思尘/小黄人.png" alt="替换文字" title="这是小黄人" width="400">
<!--
*上级目录:
目标文件在上级目录
../返回上一级,./表示这一级,前边加一个点就返回一级
-->
<img src="../网页练习/大佬.png" alt="替换文字" title="这是大佬" width="300">
音频标签:
<!--
音频标签:
在页面中插入音频
代码:<audio src="./目标文件"></audio>
src:音频的路径
controls:播放音频的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
音频标签现在支持三种格式:MP3,Wav,Ogg;
-->
<audio src="../黑马12.30/mp3/4.mp3" controls loop></audio>
视频标签:
<!--
视频标签:
代码:<video src="./目标文件"></video>
controls:播放音频的控件
autoplay:自动播放(谷歌浏览器中需配合muted实现静音播放)
loop:循环播放
视频标签目前支持三种格式:MP4,WebM,Ogg;
-->
<video src="./MP4/二手玫瑰乐队 - 仙儿.mkv" controls autoplay muted loop width="500"></video>
连接标签:
<!--
链接标签:
代码: <a href="./目标网页">超链接</a>
href:跳转地址
属性名:target 属性值:网页打开的形式
(1) _self 默认值,在当前窗口中跳转(覆盖原网页)
(2) _blank 在新窗口中跳转(保留原网页)
注意:当开发网站的初期,不知道跳转地址的时候,href的值书写为#
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<br>
<a href="../网页练习/旋转.html">小风车</a>
<a href="#">空链接</a>
列表标签:
<!--
列表标签:
(1)无序列表:无序的,谁先谁后无所谓
(2)有序列表:要有明确的排序
(3)自定义列表:
-->
无序标签:
<!-- 无序列表:
ul:表示无序列表的整体,用于包裹和标签
li:表示无序列表的每一项,用于包含每一行的内容
特点:列表的每一项前边默认显示圆点标识
注意:ul标签中只允许包含li标签
li标签可以包含任意内容
-->
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
</ul>
有序标签:
<!-- 有序列表:
ol:表示有序列表的整体,用于包裹和标签
li:表示无序列表的每一项,用于包含每一行的内容
特点:列表的每一项前边默认显示数字排序标识
注意:ul标签中只允许包含li标签
li标签可以包含任意内容
-->
<ol>
<li><a href="../黑马12.30/12.30案例/仙儿视频.html" target="_blank">仙儿</a></li>
<li>第二:99</li>
</ol>
自定义标签:
<!-- 自定义列表:
dl:表示自定义列表的主体,用于包裹dt/dd标签
dt:表示自定义列表的主题
dd:表示自定义列表的针对主题的每一项内容
特点:dd前会默认显示缩进效果
注意:dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
-->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
表格标签:
<!--
表格标签:
table:表格整体,可用于包裹多个tr
tr:表格每行,可用于包裹td
td:表格单元格,可用于包裹内容
注意点:标签的嵌套关系:table->tr->td
-->
<!--
属性名: border 属性值:数字 效果:边框宽度
属性名: width 属性值:数字 效果:表格宽度
属性名: height 属性值:数字 效果:表格高度
注意点:实际开发中推荐在css中设置宽高
-->
<!-- 表格标题和表头单元格标签:
标签名:caption 表格大标题: 表示表格整体大标题,默认在表格整体顶部居中位置显示
标签名:th 表头单元格: 表示一列小标题,通常用于表格第一行.默认内部文字加粗并居中显示
注意点:caption 标签书写在table标签内部
th 标签书写在tr标签内部(用于替换td标签)
-->
<!-- -->
<table border="1">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./12.30案例/仙儿视频.html" target="_blank"><img src="./博哥.png" alt="替换文字" title="这是博哥" width="100"></a></td>
<td>100分</td>
<td>小哥哥真淘气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</tfoot>
</table>
合并单元格:
<!--
合并单元格:
(1)跨行合并:(垂直合并一个)
(2)跨列合并:(水平合成一个)
步骤:
(1)明确合并哪几个单元格
(2)通过左上原则,确定保留谁删除谁
*上下合并->只保留最上的,删除其他
*左右合并->只保留最左的,删除其他
(3)给保留的单元格设置:跨行合并(rowspan),跨列合并(colspan)
注意点:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨thead,tbody,tfoot)
-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
表单标签:
<!--
表单标签:
(1)input系列标签
(2)button按钮标签
(3)select下拉菜单标签
(4)textarea文本域标签
(5)label标签
(6)form表单域标签
登录,注册,搜索功能时要用
-->
<!-- form表单域标签:
<form action=""></form>
action将来数据要提交的地方
-->
<!-- input系列:
场景:在网页中显示收集用户信息的表单效果,如:登录页,注册页
input标签可以通过type属性值的不同,展示不同效果
input+
*text 文本框,用于输入单行文本
(属性名:placeholder 占位符,提示用户输入)
*password 密码框,用于输入密码
(属性名:placeholder 占位符,提示用户输入)
*radio 单选框,用于多选一
(属性名:name:分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中)
(属性名:checked 默认选中 )
*checkbox 多选框,用于多选多
(属性名:checked 默认选中 )
*file 文件选择,用于之后上传文件
(属性名: multiple 多文件上传)
*submit 提交按钮,用于提交(提交按钮,点击之后提交数据给后端服务器)
*reset 重置按钮,用于重置(重置按钮,点击之后恢复表单默认值)
*button 普通按钮,默认无功能,之后配合js添加功能
-->
<!-- 写什么就显示什么 -->
<form action="">
文本框:<input type="text" placeholder="请输入账号" >
<br>
<br>
密 码: <input type="password" placeholder="请输入密码">
<br>
<br>
性别:<input type="radio" name="性别">女
<input type="radio" name="性别" checked>男
<br>
<input type="checkbox" checked>思尘
<br>
选择文件:<input type="file" multiple>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="测试">
</form>
按钮标签:
<!--
button按钮标签:
属性名:submit 提交按钮,点击之后提交数据给后端服务器
属性名:reset 重置按钮,点击之后恢复表单默认值
属性名:button 普通按钮,默认无功能,之后配合js添加功能
(谷歌中默认是提交按钮)
button标签时双标签,更便于包裹其他内容:图片,文字等
-->
<button><img src="../黑马12.30/博哥.png" alt="替换文字" title="这是博哥" width="50"></button>
下拉框标签:
<!--
select下拉菜单标签:
标签组成:
select标签:下拉菜单的整体
option标签:下拉菜单的每一项
常见属性:
selected:默认选中
-->
<select>
<option value="">北京</option>
<option value="">深圳</option>
<option value="">上海</option>
<option value="" selected>河南</option>
</select>
文本域标签:
<!--
textarea文本域标签:
常见属性:
cols:规定文本域中的可见宽度
rows:规定文本域中的可见行数
注意点:
(1)右下角可以拖拽改变大小
(2)实际开放时针对样式效果推荐使用css设置
-->
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
label标签:
<!--
label标签:
绑定内容与表单标签的关系
使用方法(1):
1.使用label标签吧内容(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法(2):
1.直接使用label标签把内容(如:文本)和表单标签一起包裹
2.需要把label标签的for属性删除即可
-->
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label><input type="radio" name="sex">女</label>
语义化标签:
<!--
语义化标签:
(无语意的标签)
场景:实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
(有语义的布局标签)
场景:(手机网页的制作)
标签名:
-->
空格的转义:
<!--
网页不认识多个空格,只认识一个
字符实体:
在网页中展示特殊符号效果时,需要使用字符实体替代
最常用的就是空格的是: (后边要加;)
-->
测试爱上层楼开始 就好看的房间号
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
