相对路径_绝对路径
相对路径
引用图片
- 同级
<body><!-- "./" 为当前位置--><imgsrc="./(图片名)"alt=""></body>- 不同级
比当前文件夹小一级
<body><!-- "/" 为一级级深入，直至找到图片 --><imgsrc="./a/(图片名)"alt=""></body>比当前文件大一级<imgsrc="../">绝对路径
本地绝对路径
C.D盘图片地址网路绝对路径
地址要为最纯粹的图片
常见图片格式
- jpg
有损压缩
优点：颜色丰富，占用空间小
缺点：不支持透明背景、动图 - png
无损压缩
优点：颜色丰富，支持透明背景
缺点：占用空间略大，不支持动图
使用：logo，重要配图 - bmp
不压缩
优点：颜色丰富，细节更多
缺点：占用空间极大，不支持透明背景、动图
使用：大型游戏 - gif
优点：支持简单透明背景，支持动图
缺点：颜色256种
使用：网页中的动图 - webp
专门用在网页中呈现图片，以上效果全支持，但兼容性不好 - base64
通过浏览器打开传统看图软件无法打开
进行base64编码，形成一串文本
超链接
标签名
1.跳转页面
<body><!-- '_blank' 新建一个标签打开 '_self'在当前标签打开 'href'要跳转的具体位置--><ahref="(网址)"target="_self">去秒杀</a><ahref="(网址)"target="_blank">去秒杀</a></body>也可跳转本地网页
a为行内元素，但可包含除自身外的任何元素
2.跳转文件
与跳转页面相同
1.1浏览器直接打开
1.2浏览器不能直接打开，会自动触发下载
1.3强制触发下载
<!--download=""可不写属性值 => download 属性值为下载的文件名--><ahref="(网址)"download="">去秒杀</a>3.跳转锚点
<!--第一种跳转方式--><ahref="#htl">看灰太狼</a><!--此标签在最前面--><aname="htl"></a><!--此标签一般在目标代码前--><ahref="(网址)"alt="灰太狼"><!--第二种--><pid="atm">一直很能打的奥特曼</p><!--id不能数字开头--><ahref="(网址)"alt="奥特曼"><ahref="#">回到顶部</a><ahref="">刷新页面</a><ahref="javascript:alert(666);">点我弹窗</a>有href属性的a标签为超链接，有name属性的a标签为锚点
name、id区分大小写
4.唤起指定应用
<ahref="tel:电话号码">电话联系</a><ahref="mailto:邮箱">邮箱联系</a><ahref="sms:电话号码">短信联系</a>超文本含义：连接单个网站内或多个网站间的网页的链接
列表
有序列表（ol）
<ol><li></li></ol>无序列表（ul）
<ul><li></li><li><span><!--嵌套，有序列表类似--><ul></ul><li></li>m</span></li></ul>定义列表（dl）
<dl><dt>术语名称</dt><dd>对术语的描述</dd></dl>注意事项
1.ol、ul中的子元素一定为 li
2.li 不要单独使用
表格
基本结构
<tableborder="1"t><!--表格标题--><caption>学生信息</caption><!--表格头部--><thead><!-- border="1" 边框 --><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!--表格主体--><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!--表格脚注--><tfoot><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot></table>表格头部的单元格为 th
表格主体与表格脚注为 td
每一行为 tr
常用属性
1.<table
border 表格边框 属性值大于1，只能调节外边框
width 表格宽度
height 高度
cellspacing 单元格间距
2.<thead
height
align(文字水平对齐方式)
左对齐 left 右对齐 right 居中对齐 center
valign(垂直对齐)
上 top 中 middle 下 bottom
3.<tbody / tfoot / tr
与thead 一样
4.th / td
width / height / 对齐方式
跨行和跨列
rowspan 要跨的行数
colspan 要跨的列数
先用（）-（）表示
补充常用标签
<!-- 换行标签 --><br><!-- 分割线 --><hr><!-- 按原文显示 --><pre></pre>表单
基本结构
<formaction="https://www.baidu.com/s"><inputtype="text"name="wd"><button>搜索</button></form>常用控件
<formaction="https://search.jd.com/search"><!-- 文本输入框 常用属性 name:数据名称 value:输入框的默认值 maxlength:输入框的最大输入长度 -->账户：<inputtype="text"name="account"value="zhangsan"><br><!-- 密码输入框 常用属性 与文本输入框相同 -->密码：<inputtype="password"name="pwd"value="zhangsan"><br><!-- 单选框 checked:让单选框/复选框默认选中 单选框/复选框一点要写 value -->性别：<inputtype="radio"name="gender"value="male">男<inputtype="radio"name="gender"value="female"checked>女<br><!-- 多选框 -->爱好：<inputtype="checkbox"name="hobby"value="eat">吃<inputtype="checkbox"name="hobby"value="play"checked>玩<br><!-- 文本域 rows:默认显示行数，影响文本域高度 cols:显示列数，影响宽度 不能编写type属性 -->其他：<textareaname="other"cols="23"rows="3"></textarea><br><!-- 下拉框 建议设置value值 option标签设置了selected属性：默认选中 -->籍贯：<selectname="place"><optionvalue="冀">河北</option><optionvalue="鲁"selected>山东</option><optionvalue="川">四川</option></select><!-- 隐藏域 用户不可见的输入区，提交表单时携带一些固定数据 value:提交的真正数据 --><inputtype="hidden"name="tag"value="toutiao"><br><!-- 确认按钮_第一种--><!-- <button>确认</button>--><!-- 确认按钮_第二种 确认按钮中不写name --><inputtype="submit"value="确认"><br><!-- 重置按钮_第一种--><!-- <button type="reset">重置</button>--><!-- 第二种--><inputtype="reset"value="点击重置"><br><!-- 普通按钮 type：值为button,如不写，type值为submit会引起表单提交 --><buttontype="button">检测账户是否注册</button><inputtype="button"value="检测账户是否注册"><br></form>禁用表单控件
<!-- disabled:可用在input / textarea / button / option-->label 标签
可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点
按钮不需要关联
两种方式
1.让label标签的for值等于表单控件的id
<labelfor="zhanghu">账户：</label><inputid="zhanghu"type="text"name="account"value="zhangsan"><br>2.把表单控件嵌套在label标签里
<label>账户：<inputtype="text"name="account"value="zhangsan"></label><br>fieldset与legend
<fieldset><legend>主要信息</legend>账户：<inputtype="text"name="account"value="zhangsan"><br>密码：<inputtype="password"name="pwd"value="zhangsan"><br>性别：<inputtype="radio"name="gender"value="male">男<inputtype="radio"name="gender"value="female"checked>女</fieldset>fieldset可以为表单控件分组 、legend标签时分组标题
框架标签
<!-- 利用iframe嵌入一个普通网页--><iframesrc="https://www.toutiao.com"width="900"height="300"frameborde="1"></iframe><!-- 与超链接的target属性配合使用--><ahref="https://www.toutiao.com"target="tt">点我看新闻</a><!-- 与表单的target属性配合使用--><formaction="https://so.toutiao.com/search"target="container"><inputtype="text"name="keyword"><button>搜索</button></form><iframename="tt"frameborder="0"width="900"height="300"></iframe>frameborder：是否显示边框值，值0 /1
字符实体
用特殊的形式来表示某个符号
 : ; 表示空格
<: />；：左右尖括号
&； ：为&符
¥； ；为￥
©； ；版权所有
×；：*
÷；：/