2019-07-04 1.分组元素；2.超链接和路径；3.表格元素（重点）

1、知识点

单标签 br hr img base
图像元素
1.基本图像插入方式
<img src="wo.jpg"/>
2.带有alt 的图像文字代替显示不出来的图像
<img scr=“wo1.jpg” alt=“这是我的大头贴”/>
3.带有title的图像悬停时显示文字
<img scr="wo.jpg" title="火星星的图像"/>
4.带有宽度的图像大小
<img scr="wo.jpg" title="火星星的图像" width=“300”/>
链接标签
5.<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
注意外部链接需要添加http：//ww.baidu.com | <a href="http://www.baidu.com">百度</a> | <a href="http://www.sina.com">新浪网</a>

内部链接直接链接内部页面名称即可比如<a href="index.html">首页</a> | <a href="image/senlin.jpg"target="_blank">今日头条</a>
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#），表示该链接暂时为一个空链接。|<a href="#"target="_blank">我的未完作品</a>
不仅可以创建文本链接，在网页中各种网页元素，如图像、网格、音频、视频等都可以添加超链接。| <a href="image/senlin.jpg"target="_blank">今日头条</a>
target="目标窗口的弹出方式"|<a href="http://www.baidu.com" target="_blank">百度</a>
锚点定位
9.<a href="#dingwei" >锚点定位</a> | id="dingwei"
base标签
10.base 可以设置整体链接的打开状态 <base target="_blank"/>
<meta charset="UTF-8">
<base target="_blank"/>
<title>我的第二个网站</title>
11.当前窗口打开链接target=“_self”|<a href="http://www.baidu.com" target="_self" >当前窗口打开百度</a>
特殊字符
12.------&nbsp&nbsp特殊字符&nbsp&nbsp------
13.我们的段落标签语法格式是：<p&gt；段落</p&gt；
注释标签
14.
注释是写给队友看的，浏览器是不执行的。多谢注释是非常好的写代码习惯，团队协作更顺畅。
相对路径
15.<img src="../../tu.jpg"/> ../../ 上两级
16.绝对路径：图片标签+复制的图片地址/图片路径+图片名
无序列表
17.你是煞笔吗？uI里只能放li标签 li里面可以放多元素
<ul>
<li>是</li>
<li>不是</li>
<li>是</li>
<li>不是</li>
<li>是</li>
<li>不是</li>
<li>你是</li>
<li><h4>萝卜芹菜？</h4></li>
<li>萝卜</li>
<li>芹菜</li>
</ul>
有序列表
18.你住在哪个国家？ol里只能放li标签 li里面可以放多元素
<ol>
<li>中国</li>
<li>美国</li>
<li>英国</li>
<li>俄罗斯</li>
</ol>
自定义列表
19.<dl>
<dt>19.北京</dt>
<dd>朝阳</dd>
<dd>海淀</dd>
<dd>通州</dd>
<dd>顺义</dd>
<dd>昌平</dd>
</dl>

2、代码

<hr>
<h3  id="dingwei">图像插入</h3>
1.<img src="image/senlin.jpg" height="375" width="500"/><br>
2.<img src="image/senlin1.jpg" height="375" width="500" alt="这不是我的图片"/><br>
3.<img src="image/senlin.jpg" height="375" width="500" title="这才是我的图片"/><br>
4.<img src="image/senlin.jpg" height="375" width="500"/>
<hr>
<h3>友情链接</h3>
5.<a href="http://www.baidu.com">百度</a>
  <a href="http://www.sina.com" >新浪网</a>
6.<a href="image/senlin.jpg" >今日头条</a>
7.<a href="#">我的未完作品</a>
8.<a href="http://www.baidu.com" target="_self" >百度</a>
<hr>
<h3>锚点定位</h3>
9.<a href="#dingwei" >锚点定位</a>
<hr>
<h3>base标签</h3>
10.代码第五行base标签的用法：可以设置整体链接的打开状态
11.<a href="http://www.baidu.com" target="_self" >当前窗口打开百度</a>
<hr>
<h3>特殊字符</h3>
12.------&nbsp&nbsp特殊字符&nbsp&nbsp------
13.我们的段落标签语法格式是：&lt;p&gt；段落&lt;/p&gt；
<hr>
<h3>注释标签</h3>
14.<!--注释标签就是你是一只傻狗<br>-->注释是写给队友看的，浏览器是不执行的。多谢注释是非常好的写代码习惯，团队协作更顺畅。
<hr>
<h3>相对路径</h3>
15.相对路径<br>
<img src="image/ti.jpg" height="120" width="192"/><br>
16.绝对路径：图片标签+复制的图片地址/图片路径+图片名
<hr>
<h3>无序列表</h3>
<h4>17.你是煞笔吗？</h4>
<ul>
    <li>是</li>
    <li>不是</li>
    <li>是</li>
    <li>不是</li>
 <li>是</li>
    <li>不是</li>
    <li>你是</li>
    <li><h4>萝卜芹菜？</h4></li>
    <li>萝卜</li>
    <li>芹菜</li>
</ul>
<hr>
<h3>有序列表</h3>
<h4>18.你住在哪个国家？</h4>
<ol>
    <li>中国</li>
    <li>美国</li>
    <li>英国</li>
    <li>俄罗斯</li>
</ol>
<hr>
<h3>自定义列表</h3>
<dl>
    <dt>19.北京</dt>
    <dd>朝阳</dd>
    <dd>海淀</dd>
    <dd>通州</dd>
    <dd>顺义</dd>
    <dd>昌平</dd>
</dl>

3、结果

image.png