目录
一、html基本框架
<html>
<head>
<title>标题</title>
</head>
<body>
主体内容
</body>
</html>二、标签
1.排版标签
<!--标题（分为6级，分别有不同大小和粗细）-->
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<!--段落-->
<p>文字</p>
<!--换行-->
<br>
<!--水平线-->
<hr>2.文本格式化标签
<!--无语义--> <!--有语义-->
加粗 <b></b> <strong></stong>
下划线 <u></u> <ins></ins>
倾斜 <i></i> <em></em>
删除线 <s></s> <del></del>
3.媒体标签
路径src
绝对路径（用得比较少）：
目录下的绝对位置，通常从盘符开始
如：D:\day01\images\1.jpg
相对路径：从当前文件开始出发找目标文件的过程
<!--同级目录-->
<img src="目标图片.gif">
<!--或-->
<img src="./目标图片.gif">
<!--下级目录-->
<img src="文件夹名/目标图片.gif">
<!--上级目录-->
<!--先出当前文件夹，用..-->
<img src="../images2/t1/jpg">（1）图片标签
<img src=" " ,属性名=" "...> <!--可以有多个属性-->常见属性:
alt 替换文本 （图片加载失败时显示）
title 提示文本 （鼠标悬停时显示）
width 宽
height 高 （若宽和高只设置了一个，则等比例缩放）
（2）音频标签
<audio src=" " 属性></audio>常见属性：
src 路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
注：音频标签目前支持三种格式：MP3,Wav,Ogg
（3）视频标签
<video src=" " 属性></video>属性与音频相同
注：视频标签目前支持三种格式：MP4,WebM,Ogg
4.链接标签
<a href="./目标网页.html 属性>超链接名</a>属性target：（网页的打开方式）
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）
5.列表标签
（1）无序列表
<ul>
<li>内容</li>
...
</ul>
<!--ul标签中只允许包含li标签，li标签可以包含任意内容>（2）有序列表
<ol>
<li>...</li>
</ol>（3）自定义列表（网页底部导航）
<dl></dl> <!--表示自定义列表的整体，用于包裹dt/dd-->
<dt></dt> <!--表示自定义列表的主题-->
<dd></dd> <!--表示自定义列表的针对主题的内容-->
<!--注：dd前会默认显示缩进效果，dt/dd可包含任意内容-->6.表格标签
（1）基本标签
table <!--表格整体，可包裹多个hr-->
caption <!--表格标题-->
th <!--表头单元格标签，默认内部文字加粗并居中显示-->
tr <!--行，可用于包裹td-->
td <!--单元格，可用于包裹内容-->例：
<table>
<caption>标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>属性：
border 边框宽度
width 表格宽度
height 表格高度
<!--例-->
<table border="1" width="600" height="400">
...
</table>（2）结构标签（内部包裹tr）（可省略）
作用：让表格的内容结构分组，突出表格的不同部分
thead 头部
tbody 主体
tfoot 底部例：
<table>
<thead>
<tr>
...
</tr>
</thead>
</table> （3）合并单元格
步骤：
1）明确合并哪几个单元格
2）确定保留住谁（最上/最左）
3）给保留的单元格设置
属性：
rowspan 跨行合并
colspan 跨列合并注：不能跨结构标签合并
例：
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
</tr>
<tr>
<td>李四</td>
</tr>
</tbody>
<tfoot>
...
</tfoot>
</table>
7.表单标签
（1）input系列
基本语法：<input type=" ">
type的取值如下：
（1）text 文本框，用于输入单行文本
占位符 placeholder
例：<input type="text" placeholder="请输入用户名">
（2）password 密码框
（3）radio 单选框
属性：
name 分组，有相同name属性值的单选框为一组，只能选一个
checked 默认选中
（4）checkbox 多选框
（5）file 文件选择，用于上传文件
上传多个文件：multiple
<input type="file" multiple>
（6）submit 提交按钮
（7）reset 重置按钮
（8）button 普通按钮，默认无功能，之后配合js添加功能
另外 value="" ，类似注释
注：常用form将一组标签包裹
例：
<form action=" ">
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<input type="submit">
<input type="reset">
</form>（2）button
<button type=" ">...</button>
属性：
submit
reset
button
注：谷歌浏览器中button默认是提交按钮
button是双标签，更便于包裹其他内容：文字、图片等（3）select——下拉菜单标签
<select>
<option>北京</option>
<option>上海</option>
<option selected>深圳</option>
</select>（4）textarea文本域标签（多行输入）
属性：
cols 文本域可见宽度
rows 文本域可见行数
例：
<textarea col="60" rows="30"></textarea>注：右下角可拖拽改变大小
实际开发针对样式效果推荐用CSS设置
（5）label标签
用于绑定内容与表单标签的关系
法1
<input type="radio" name="sex" id="man"><label for="man">男</label>
法2
<label><input type=...></label>8.语义化标签
（1）没有语义的布局标签
<div></div> 一行只显示一个
<span></span> 一行可以显示多个（2）有语义的布局标签
header 头部
nav 导航
footer 底部
aside 侧边栏
section 区块
article 文章9.字符实体
显示特殊符号
结构：&英文
常用： 空格  
（网页不认识多个空格）
参考资料：bilibili黑马程序员
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
