零基础前端笔记（1）web，html，标签，锚点，路径

一时失言乱红尘 2022-11-06 01:54 136阅读 0赞

### XHTML可扩展超文本标记语言（1） ###

*  （1）网页的形成
 *  （2）浏览器内核
 *  （3）web标准
 *  （4）html骨架标签
 *  （5）html元素标签分类
 *  （6）html标签关系
 *  （7）代码开发工具
 *  （8）html模板
 *  （9）标签的语义化（含义）
 *  （10）常用标签
 *   *  排版标签
     *   *  (1)标题标签
         *  (2)段落标签
         *  (3)水平线标签
         *  (4)换行标签
         *  (5)div和span标签
     *  文本格式化标签
     *  标签属性
     *  图像标签
     *  链接标签
     *  注释标签
     *  锚点
     *  base标签
     *  预格式化文本
     *  特殊字符
 *  （11）路径

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70_pic_center_1000_C3_97300]

--------------------

# （1）网页的形成 #

[浏览器市场份额：https://tongji.baidu.com/research/site][https_tongji.baidu.com_research_site]

--------------------

# （2）浏览器内核 #

负责读取网页信息，整理讯息，计算网页的显示方式并显示页面

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>内核</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IE</td> 
   <td>Trident</td> 
   <td>IE、猎豹安全、360极速浏览器、百度浏览器</td> 
  </tr> 
  <tr> 
   <td>Firefox</td> 
   <td>Gecko</td> 
   <td>可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>webkit</td> 
   <td>现在很多人错误地把webkit叫做chrome内核（即使chrome内核已经是blink了）苹果感觉像被人抢了媳妇，都哭晕在厕所里面了</td> 
  </tr> 
  <tr> 
   <td>chrome</td> 
   <td>Chromium/Blink</td> 
   <td>在Chromium项目中研发Blink渲染引擎（即浏览器核心），内置于Chrome浏览器之中。Blink其实是WebKit的分支。大部分国产浏览器最新版都采用Blink内核二次开发</td> 
  </tr> 
  <tr> 
   <td>Opera</td> 
   <td>blink</td> 
   <td>现在跟随chrome用blink内核</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# （3）web标准 #

**三层标准**

结构（html）
    表现（css）
    行为（javascript）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70_pic_center_1000_C3_97500]

--------------------

# （4）html骨架标签 #

![在这里插入图片描述][20210307162559956.png]  
**总结**

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>定义</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;html&gt;&lt;/html&gt;</code></td> 
   <td>html标签</td> 
   <td>页面中最大的标签，我们称为 根标签</td> 
  </tr> 
  <tr> 
   <td><code>&lt;head&gt;&lt;/head&gt;</code></td> 
   <td>文档的头部</td> 
   <td>注意在head标签中我们必须要设置的标签是<code>title</code></td> 
  </tr> 
  <tr> 
   <td><code>&lt;title&gt;&lt;/title&gt;</code></td> 
   <td>文档的标题</td> 
   <td>让页面拥有一个属于自己的网页标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;body&gt;&lt;/body&gt;</code></td> 
   <td>文档的主体</td> 
   <td>元素包含文档的所有内容，页面内容 基本都是放到body里面的</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# （5）html元素标签分类 #

*  **常规**元素（双标签）  
    `<body></body>`
 *  **空**元素（单标签）  
    `<br />`

--------------------

# （6）html标签关系 #

*  嵌套关系
 *  并列关系

--------------------

# （7）代码开发工具 #

使用sublime-text  
[下载地址：http://www.sublimetext.com/][http_www.sublimetext.com]

生成页面骨架结构
    （1）html:5	按下tab'键	或者
    （2）! 按下tab键

--------------------

# （8）html模板 #

<!DOCTYPR html>
    告诉浏览器使用哪种规范

<html lang="en">
    指定html语言种类
     - en英语
     - zh-CN中文

![在这里插入图片描述][20210307164556985.png]

--------------------

# （9）标签的语义化（含义） #

结构清晰  
在合适的地方放入合适的标签

--------------------

# （10）常用标签 #

--------------------

## 排版标签 ##

### (1)标题标签 ###

![在这里插入图片描述][20210307165943342.png]

### (2)段落标签 ###

### (3)水平线标签 ###

<hr />

### (4)换行标签 ###

<br />

### (5)div和span标签 ###

<div></div>
    <span></span>
    div标签用来布局，一行只能放一个
    span标签一行可放置多个

--------------------

## 文本格式化标签 ##

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;b&gt;&lt;/b&gt;</code></td> 
   <td>文字以粗体方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;strong&gt;&lt;/strong&gt;</code></td> 
   <td>文字以粗体方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;em&gt;&lt;/em&gt;</code></td> 
   <td>文字以斜体方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;i&gt;&lt;/i&gt;</code></td> 
   <td>文字以斜体方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;del&gt;&lt;/del&gt;</code></td> 
   <td>文字以删除线方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;s&gt;&lt;/s&gt;</code></td> 
   <td>文字以删除线方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;ins&gt;&lt;/ins&gt;</code></td> 
   <td>文字以加下划线方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;u&gt;&lt;/u&gt;</code></td> 
   <td>文字以加下划线方式显示</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 标签属性 ##

外在特性，html标签属性

--------------------

## 图像标签 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>url</td> 
   <td>图像的路径</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>文本</td> 
   <td>图像不能显示时的替换文本</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>文本</td> 
   <td>鼠标悬停时显示的内容</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素（XHTML不支持%页面百分比）</td> 
   <td>设置图像的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>像素（XHTML不支持%页面百分比）</td> 
   <td>设置图像的高度（一般不设置）</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td><strong>数字</strong></td> 
   <td><strong>设置图像边框的宽度</strong></td> 
  </tr> 
 </tbody> 
</table>

注意：

1.  标签可以拥有**多个属性**，必须写在开始标签中，位于标签名后面
2.  属性之间**不分先后顺序**，标签名与属性、属性与属性之间均以**空格**分开
3.  采取键值对的格式 key=“value” 的格式

--------------------

## 链接标签 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>指定链接目标的URL地址</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>指定链接页面的打开方式，_self（默认），<strong>_blank</strong>（在新窗口打开）</td> 
  </tr> 
 </tbody> 
</table>

注意：

1.  可以为图像、表格、音频、视频等**各种网页元素添加超链接**
2.  **\#** 为空链接
3.  外部链接，[http://www.baidu.com][http_www.baidu.com]
4.  内部链接，内部页面名称

--------------------

## 注释标签 ##

快捷键：  
ctrl\+/  
ctrl\+shift\+/

**团队约定**  
一般用于简单的描述，如某些状态描述、属性描述等  
**注释内容前后各一个空格字符**，注释位于要注释代码的上面，单独占一行

推荐：

<div>...</div>

不推荐：

--------------------

## 锚点 ##

创建锚点链接分为两步：

1.使用相应的id名称标注跳转目标的位置（找目标）
    <h3 id="two">第2集</h3>
    
    2.使用<a href="#id名">链接文本</a>
    创建链接文本 （被点击的）（拉关系）我也有一个姓毕的姥爷...
    <a href="#two"></a>

![在这里插入图片描述][20210307190120682.png]

--------------------

## base标签 ##

=所有链接=默认添加\_blank

注意：**跳转锚点也是链接！！！**

--------------------

## 预格式化文本 ##

按照书写格式显示

<pre>
    		test
    	aaaaaaaaaaaaaa,
    	bbbbbbbbbbbbbb,
    	cccccccccccccc.
    </pre>

![在这里插入图片描述][2021030719070517.png]

--------------------

## 特殊字符 ##

<table> 
 <thead> 
  <tr> 
   <th>特殊字符</th> 
   <th>描述</th> 
   <th>字符的代码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>空格</td> 
   <td><code>&amp;nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于号</td> 
   <td><code>&amp;lt;</code></td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td><code>&amp;gt;</code></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

--------------------

# （11）路径 #

*  **相对路径**  
    （1）同一级路径，图片引用的时候，直接写出图片的名字就可以了  
    （2）上一级目录`../`
 *  **绝对路径**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70_pic_center_1000_C3_97300]: /images/20221023/b889db724be54ab5af5a8a5346d31963.png
[https_tongji.baidu.com_research_site]: https://tongji.baidu.com/research/site
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70_pic_center_1000_C3_97500]: /images/20221023/d2d5270b3ed94302b7a128f8ba3028dc.png
[20210307162559956.png]: /images/20221023/fc0f773baea94ef9b6523b56a8b3a2fc.png
[http_www.sublimetext.com]: http://www.sublimetext.com/
[20210307164556985.png]: /images/20221023/c9c97444591b42ab9fa1a7dc79442f2d.png
[20210307165943342.png]: /images/20221023/817b7b566f434bed81013c81ec7f4141.png
[http_www.baidu.com]: http://www.baidu.com
[20210307190120682.png]: /images/20221023/e69490f7215f44be86a9dd8188fd6197.png
[2021030719070517.png]: /images/20221023/3fb63718f0474a76aa7b341d232ba2f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221023/b9751f5105f34394bd7009db6e13fb0f.png