前端学习----HTML

朴灿烈づ我的快乐病毒、 2023-07-03 02:53 19阅读 0赞

**目录**

第一章：HTML简介

1.1， 软件架构

1.2， 软件开发流程

1.3，W3C万维网联盟

1.4，乱码

1.5，字符集

第二章：HTML—超文本标记语言

2.1，开发工具：

2.2，最基本的HTML页面

2.3，页面详解

第三章：HTML知识

3.1，常用标签（元素）

3.2，其它标签元素

3.3，属性

3.4，实体（转义字符）

3.5，标签详解（列表&图片&超链接）

3.6，语法规范

3.7，内联框架

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

[资料分享：百度网盘][Link 1]

[视频链接：哔哩哔哩][Link 2]

[参考手册：W3C学院][W3C]

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

##  第一章：HTML简介 ##

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

### 1.1， 软件架构 ###

*   C/S：客户/服务器模式，如：360，office，XMind，QQ
 *  特点：使用前需安装，服务器/客户端同时更新，不能跨平台使用，采用自有协议
 *  B/S：本质C/S，使用浏览器作为客户端，如：京东，淘宝
 *  特点：不需安装，客户端不需更新，可跨平台，采用HTTP协议（相对不安全）

### 1.2， 软件开发流程 ###

*  网页设计师根据需求设计网页
 *  前端工程师将设计做成静态网页（HTTP）
 *  后台工程师将静态网页改成动态网页（JSP）

### 1.3，W3C万维网联盟  ###

*  结构：页面的整体结构，哪里是标题/段落/图片等（HTML）
 *  表现：用于控制页面中元素的样式，字体大小/颜色，位置等（CSS）
 *  行为：用于响应用户的操作，页面和用户的交互行为（JavaScript）
 *  一个设计优良的网页要实现结构，表现，行为分离

### 1.4，乱码 ###

*  原因：编码和解码采用的字符集不同，中文浏览默认GB2312进行解码
 *  编码：依据一定的规则，将字符转换为二进制编码的过程
 *  解码：依据一定的规则，将二进制编码转换为字符的过程，浏览器
 *  计算机内保存的任何内容，都需要转换成0 1 二进制编码保存

### 1.5，字符集  ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&nbsp;字符集</td> 
   <td>功能（解码和编码所采用的规则）</td> 
  </tr> 
  <tr> 
   <td>&nbsp;ASCII</td> 
   <td>英语</td> 
  </tr> 
  <tr> 
   <td>GB2312/GBK</td> 
   <td>中文系统的默认编码，简体/简繁中文</td> 
  </tr> 
  <tr> 
   <td>UTF-8</td> 
   <td>万国码，支持地球上所有的文字</td> 
  </tr> 
  <tr> 
   <td>&nbsp;ANSI</td> 
   <td>自动以系统的默认编码来保存文件</td> 
  </tr> 
 </tbody> 
</table>

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

## 第二章：HTML—超文本标记语言 ##

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

###    2.1，开发工具： ###

*  文本编辑器： Notepad++(免费) –Sublime Text (收费)
 *  IDE：DreamWeaver（收费）– WebStorm（收费）– Hbuilder（免费）
 *  使用：新建记事本编辑，修改扩展名为.html打开 ，改代码（用记事本打开）

### 2.2，最基本的HTML页面 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"/>
    <title>网页标题</title>
    </head>
    <body>
    <h1>网页正文</h1>
    </body>
    </html>

### 2.3，页面详解 ###

*  <!DOCTYPE html> ：文档声明，告诉浏览器，当前使用的页面是根据HTML5标准编写的，必写
 *  <html>：网页根标签，只有一个，所有内容写在它内部
 *  <head>：网页头部，只有一个，内容不可见
 *  < meta/> ：提供页面信息，自结束标签
    
     *  修改页面字符集(charset)
     *  设置关键字(name=”keywords”content=””)
     *  网页描述(name=”description”content=””)
     *  请求重定向(http-equiv="refresh" content="秒数 url=地址" )
 *  <title>：网页标签，显示在浏览器标签栏，重要
 *  <body>：主体，网页可见部分

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

## 第三章：HTML知识 ##

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

### 3.1，常用标签（元素）  ###

*  类型：<标签名> </标签名>，<标签名/>
 *  换行： br ，简写
 *  水平：<hr   
 *  居中：cente  ，不推荐 
 *  注释：<!—注释内容 --> ，页面中不会显示，源码中显示 
 *  标题：h1-6 重要性逐渐降低 ，h1仅次于title，h4-6一般不用
 *  段落：p，默认独占一行，段与段间有一个间距，字符之间写再多空格也只会显示一个空格

## 3.2，其它标签元素 ##

<table> 
 <thead> 
  <tr> 
   <th style="width:150px;">文本格式化标签</th> 
   <th style="width:109px;">&nbsp;</th> 
   <th style="width:161px;">"计算机输出"标签</th> 
   <th style="width:112px;">&nbsp;</th> 
   <th style="width:172px;">引用，引文，标签</th> 
   <th style="width:118px;">&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:150px;">加粗</td> 
   <td style="width:109px;">b/strong</td> 
   <td style="width:161px;">计算机代码</td> 
   <td style="width:112px;">code</td> 
   <td style="width:172px;">缩写</td> 
   <td style="width:118px;">abbr</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">斜体</td> 
   <td style="width:109px;">i/em &nbsp;</td> 
   <td style="width:161px;">键盘码</td> 
   <td style="width:112px;">kbd</td> 
   <td style="width:172px;">地址</td> 
   <td style="width:118px;">address&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">删除字</td> 
   <td style="width:109px;">del</td> 
   <td style="width:161px;">计算机代码样本</td> 
   <td style="width:112px;">samp</td> 
   <td style="width:172px;">文字方向</td> 
   <td style="width:118px;">bdo</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">缩小/放大</td> 
   <td style="width:109px;">small/big &nbsp;</td> 
   <td style="width:161px;">定义变量</td> 
   <td style="width:112px;">var</td> 
   <td style="width:172px;">长的引用</td> 
   <td style="width:118px;">blockquote</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">插入字</td> 
   <td style="width:109px;">ins</td> 
   <td style="width:161px;">定义预格式文本</td> 
   <td style="width:112px;">pre</td> 
   <td style="width:172px;">短的引用</td> 
   <td style="width:118px;">q“ ”</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">下标</td> 
   <td style="width:109px;">sub</td> 
   <td style="width:161px;">打字机文本</td> 
   <td style="width:112px;">tt</td> 
   <td style="width:172px;">引用，引证</td> 
   <td style="width:118px;">cite</td> 
  </tr> 
 </tbody> 
</table>

### 3.3，属性  ###

*  设置标签效果，名值对结构，只能在开始/结束内
 *   一个标签内可以设置多个属性，属性之间用，隔开
 *   举例：
    
     *  <标签名 属性名=“属性值”，属性名=“属性值”></标签>
     *  <标签名 属性名=“属性值”，属性名=“属性值”/>      
 *  提示：通过W3C进行文档查阅

### 3.4，实体（转义字符）  ###

*  语法：&实体名； 
 *  定义：HTML中预留的一些字符，不能在网页中直接使用
 *  常用：<   &lt   空格  &nbsp  引号”   &quot  商标™       &trade
 *             >   &gt   &    &amp   版权©   &copy  注册商标®   &reg

### 3.5，标签详解（列表&图片&超链接）  ###

**列表**

*  无序列表：<ul>定义 <li>列表项  属性type中disc/square/circle表示实心圆点/方块/圆
 *  有序列表：<ol>定义 <li>列表项  属性type中1/a/A/i/I表示阿拉伯/字母/罗马数字
 *  定义列表：<dl>定义 <dt>/<dd>列表项，内容/描述 （ul/ol/dl彼此间可相互嵌套）

**图片  img**

*  作用：  向页面中引入外部图片
 *  属性：  src：图片路径（相对路径：相对于当前资源所在路径位置，返回当前前2级目录../../）
    
                 alt：图片无法加载时对图片的描述，搜索引擎通过它识别图片内容

width/ height：设置宽度/高度（单位 px，动一另一等比例调整大小，不建议用）

*  格式：**  **JPEG：支持颜色多，可压缩，不支持透明
    
                GIF：支持颜色少，简单透明的图片，可动态

PNG：支持颜色多，复杂透明的图片（效果一致用kb小的，不一致用好的）

**超链接  a**

*  href：地址（相对路径）/mailto电子邮件/页面名/不确定\#/\#top回到顶部
 *  target：\_self当前页面打开链接/\_blank新窗口中打开链接/内联框架中的name值
 *  <a href="mailto:xxx@yyy">：制作电子邮件链接

### 3.6，语法规范 ###

*  不区分大小写，尽量小写 
 *  标签需完整（成对出现，自结束） 
 *  属性必须有值，值毕加引号（单/双都可） 
 *  注释不能嵌套，标签可嵌套（不能交叉嵌套）

### 3.7，内联框架 ###

*  特点：不推荐，不会被搜索引D擎查到 
 *  格式：<iframe src="demo02.html" name="tom"></iframe>
 *  属性：src:指向一个外部页面的路径，可以使用相对路径    name:可以为内联框架指定一个name属性

产生文本区：<textarea>

产生下拉列表：<select>

产生文本框：<input type="text">

产生复选框：<input type="checkbox">

添加背景颜色：<body bgcolor="yellow">

插入背景图像：<body background="background.gif">

使单元格中的内容进行左对齐：<td align="left">

手动写动画最小时间间隔是多久：1/60\*1000ms=16.7ms

sessionStorage 保存数据的方法正确的是： sessionStorage.setItem(“键名”,”键值”);

<table style="width:406px;"> 
 <thead> 
  <tr> 
   <th colspan="2" style="width:403px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;HTML中嵌入PHP代码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:138px;">脚本：</td> 
   <td style="width:265px;">&lt;script language="php"&gt; ... &lt;/script&gt;&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">短标记：</td> 
   <td style="width:265px;">&lt;? ... ?&gt;&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">默认语法：</td> 
   <td style="width:265px;">&lt;?php&nbsp; ......&nbsp;&nbsp;?&gt;&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:138px;">.asp风格：</td> 
   <td style="width:265px;">&lt;% ...%&gt;</td> 
  </tr> 
 </tbody> 
</table>

iframe的使用场景有：ajax上传文件  资源加载  跨域访问  典型系统

<table> 
 <thead> 
  <tr> 
   <th style="width:72px;">&nbsp;</th> 
   <th style="width:327px;">Ajax</th> 
   <th style="width:365px;">Flash</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:72px;">优势：</td> 
   <td style="width:327px;">1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发</td> 
   <td style="width:365px;">1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度</td> 
  </tr> 
  <tr> 
   <td style="width:72px;">劣势：</td> 
   <td style="width:327px;"> <p>1.它可能破坏浏览器的后退功能 &nbsp;</p> <p>2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中</p> </td> 
   <td style="width:365px;"> <p>1.采用二进制格式且格式私有</p> <p>3.flash 文件很大，第一次使用较长的等待时间 &nbsp;</p> <p>4.性能问题</p> </td> 
  </tr> 
 </tbody> 
</table>

![20200214202849776.png][]

的

[Link 1]: https://pan.baidu.com/s/1hWBu5pZ2hUPcFE5EXXo_2A
[Link 2]: https://www.bilibili.com/video/av67360889/?spm_id_from=333.788.b_636f6d6d656e74.5
[W3C]: https://www.w3school.com.cn/tags/index.asp
[20200214202849776.png]: https://img-blog.csdnimg.cn/20200214202849776.png