001.前端开发知识，前端基础HTML（2020-01-07）

一、开发工具： chrome 、 sublime 、 photoshop

二、Web标准：不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

三、HTML的语言语法骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

四、HTML标签分类

1.双标签比如 <body>我是文字 </body>

2.单标签比如 <br />

五、HTML标签关系

1.嵌套关系

2.并列关系

六、文档类型

<!DOCTYPE html>

七、字符集

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

八、HTML常用标签

1.排版标签——排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

2.标题标签——HTML提供了6个等级的标题

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

3.段落标签

<p>  文本内容  </p>

4.水平线标签

<hr />是单标签

5.换行标签

<br />

6.div span标签

div——分割，分区的意思。由很多div 来组合网页。

span——跨度，跨距；范围

<body>
    <div>我是布局1</div>
    <div>我是布局2</div>
    <span>布局用3</span>
    <span>布局用4</span>
</body>

7.文本格式化标签——在网页中，有时需要为文字设置粗体、斜体或下划线效果

<body>
    我是 <b>楚乔</b>   我是宇文玥  我是 <strong>燕洵</strong>
    我是<i>倾斜</i>的  赶紧<em>脉动回来</em>
    <s>原价： 1888</s>，  现价  8.8 
    <del>原价： 1888</del>，  现价  8.8 
    <u>特殊说明</u>
    <ins>特殊说明</ins>
</body>

8.标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<hr width="400" />

9.图像标签img

<body>
    <img src="timg.jpg"  height="350" title="胡歌" />  
    <h3>title 鼠标放到图片上，显示的文字 </h3>
    <img src="timg.gif" title="梅长苏"  />  
    <h3>alt 图片显示不出的时候，替换的文字</h3>
    <img src="timg1.gif" title="梅长苏"  alt="我是梅长苏， 没了" />  
    <h3>border 图片边框</h3>
    <img src="timg.gif" title="梅长苏"  alt="我是梅长苏， 没了"  border="10"/>  
</body>

10.链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    友情链接:  
    <!-- <a href="去"></a>
    <img src="来" > -->
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
    搜狐  
    <a href="http://www.sina.com">新浪</a>
    天气预报：
       <a href="me.html">点击</a>
       空链接 : 
        <a href="#">空</a>
        产品   销售   首页   公司地址
    <a href="http://www.baidu.com"><img src="bd.png" /></a>
</body>  
</html>

11.锚点定位——通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

事例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h3>第1集(分集以TV版为准)</h3>
　　摇摇晃晃的囚车上
<h3 id="two">第2集</h3> 
　　楚乔伤病还未痊愈
<h3 id="three">第3集</h3>
　　青山院灵堂肃穆，宇文玥一身孝衣</body>
</html>

12.base 标签

　　base 可以设置整体链接的打开状态；base 写到 <head> </head> 之间；把所有的连接都默认添加 target="_blank"

13.特殊字符标签

14.注释标签

    <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + /

九、路径

路径可以分为：相对路径和绝对路径

1.相对路径

（1）图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

（2）图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

2.绝对路径——绝对路径以Web站点根目录为参考基础的目录路径。

“D:webimglogo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。