网站学习（1）

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。

容器级的标签，里面可以放置任何东西；

文本级的标签里面，只能放置文字、图片、表单元素。

 

一、图片

1、alt属性：不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字

<img src="baby.jpg" alt="巴黎结婚照"/>

2、相对路径

（1）<img src="images/baby.jpg" alt="巴黎结婚照"/>

（2）如果在很深的文件夹中，可以一直罗列下去：

<img src="images/jiehunzhao/baby.jpg" alt="巴黎结婚照" />

（3）图片在浅一层的文件夹中：

<img src="../3.jpg"alt="" />

（4）上两级：

<img src="../../shizi.jpg"alt="" />

（5）上两级的文件夹中的images文件夹中的jiehunzhao的文件夹中的baby.jpg

<imgsrc="../../images/jiehunzhao/baby.jpg" alt="" />

二、超级链接

<a href="1.html">结婚照</a>

1、title 悬停文本

<a href="09_img.html"title="很好看哦">结婚照</a>

2、target 是否在新窗口中打开

<a href="09_img.html"title="很好看哦" target="_blank">结婚照</a>

注：a是一个文本级的标签

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

 

三、页面内的锚点

<a name="wdzp">我的作品</a>或<a id="wdzp">我的作品</a>

如果有一个超级链接，指向页面中的锚点，那么就是：

<a href="#wdzp">点击我就查看我的作品</a>

网址：1.html#wdzp

四、主标题的语义 ，h是英语headline标题的意思。

<h1></h1>…….<h6></h6>

五、段落，p是英语paragraph段落的意思。

p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。

<p></p>

六、关键字和页面描述

<meta name="Keywords"content="牛逼，很牛逼，特别牛逼" />

<meta name="Description"content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

七、title标签

<title>网页的标题</title> title也是有助于SEO搜索引擎优化的：

<title>传智播客官网-传智播客提供java培训、web前端培训、php培训、C/C++培训、iOS培训、网页设计培训、平面设计培训、UI设计培训、游戏开发培训、网络营销培训服务</title>

八、列表

1、无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

 

“组标签”，要么不写，要么就要写一组。所以li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

ul标签实际应用场景：

（1）导航条：

（2）li里面放置的内容可能很多：

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，甚至于可以再放一个ul

2、有序列表

有序列表，用ol表示；ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

<ol>

         <li>小苹果</li>

         <li>月亮之上</li>

         <li>最炫民族风</li>

         </ol>

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

<ul>

<li>1. 小苹果</li>

         <li>2.月亮之上</li>

         <li>3.最炫民族风</li>

</ul>