前端知识点总结——HTML

旧城等待， 2022-01-11 15:55 367阅读 0赞

# **前端知识点总结——HTML** #

HTML：HTML4.01 指的就是网页技术  
HTML5：HTML4.01的升级版本

## 1.web的基础知识 ##

web与Internet  
1.Internet:全球性的计算机互联网络，因特网，互联网，交互网  
2.提供服务

前端学习圈：767273102 ，从最基础的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移动端HTML5的项目实战的资料都有整理

访问网站：www（world wide web）服务
    Email:电子邮件服务
    BBS：电子公告板，俗称论坛
    FTP：文件的上传下载
    telenet:远程登录

3.Internet上的应用程序

1.C/S程序
      C：Client客户端
      S：Server服务器端
      代表：QQ，微信，网络游戏
    2.B/S程序
      B：Browser 浏览器
      S：server 服务器
      代表：网站

4.web

web:运行在Internet之上的一种B/S结构的应用程序，俗称网站。
    w3c:(万维网联盟)
    w3c:制定web技术规范
    web的工作原理：
       基于浏览器和服务器还有通信协议来实现信息的传输和展示。
       1.通信协议
         HTTP/HTTPS
     规范了数据是如何传递和打包
       2.服务器
         1.功能
       1.存储web信息，并提供程序运行环境
       2.接收用户请求并给出响应
       3.具备一定的安全功能
     2.服务器产品
       1.TOMCAT 
       2.APACHE
       3.IIS
     3.服务器技术
       1.php
       2.java
       3..NET
       3.浏览器
         功能：
          1.代理用户（UA:user agent）提交请求
      2.以图形化的方式显示网页
      3.作为HTML和JS的解释器
     浏览器产品：
      1.IE
      2.chrome
      3.firefox 
      4.opera
      5.safari
     浏览器技术：
      1.HTML
      2.CSS
      3.Javascript

## 2.HTML快速入门 ##

1.什么是HTML？

HTML：Hyper Text Markup Language
          超文本标记语言
    ex:
      普通文本 a：英文首字符
      超级文本 a：超链接
    
      普通文本 b：英文第二个字符
      超级文本 b：加粗
      language:语言，有自己的语法结构
    特点：
      1.以.html或.htm为后缀
      2.由浏览器解析执行
      3.可以嵌套脚本语言（javascript）
      4.用带有尖括号的标记来标识

2.HTML的基础语法

1.标记
      标记又称为"元素"，或"标签"，在网页中，主要表示一些功能。
      标记在使用时，必须用<>括起来
      标记分类：
        1.封闭类型
      又称为双标记
      语法：
        <标记>内容</标记>
         ex：<a>百度</a>
         <b>加粗</b>
          注意：必须有开始就有结束。
    2.非封闭类型
      又称为单标记
      语法：<标记>或<标记/>
          ex:<img>或<img/>
             <br>或<br/>
    
    2.标记嵌套
      1.什么是嵌套？
        在一对标记中出现另外一对（个）标记，从而形成功能的层叠。
      2.语法
        <标记>
       <标记>
          <标记/>
       </标记>
    </标记>
    ex：
    <a>
       <b>这是演示文本</b>
    </a>
    ex：
     <a><b>这是演示文本</b></a> 正确，不推荐
    ex:
     <a><b>dfdsfsdfs</a></b> 错误
    注意：
      1.换行缩进，如果是双标记必须成对出现
    3.元素（标记）属性
      作用：修饰元素
      语法：
       1.必须声明在开始标记中
         <标记 属性名></标记>
       2.属性名与值之间用"="连接
         <标记 属性名=值></标记>
       3.元素允许有多个属性，每个属性之间用空格隔开
         <标记 属性名1=值1 属性名2=值2 ...></标记>
     ex:
     p标记的align属性的值为center,title属性的值为"这是段落"
         <p align=center title="这是段落"></p>
        标准属性(通有属性)：
      id:定义元素的唯一标识（名称）
      title:定义鼠标悬停在元素上时所提示的文本
      style:css中,定义行内样式
      class:css中,引用类选择器
    
       4.注释
         语法：
     注意：
       1.注释本身不能嵌套
       2.不能嵌套在标记中

## 3.HTML文档结构 ##

1.HTML文档结构

1.文档类型声明
      作用：告诉浏览器HTML的版本类型
      语法：<!doctype html>
      在网页的最顶端编写
    2.HTML页面
      在文档类型声明的下面写上一对根标记
      <html></html>
      在根标记中包含两部分：
         文件头：<head></head>
             定义网页的全局信息
     文件主体：<body></body>
             定义网页中显示的内容
    
    2.搭建网页结构
      1.文档类型的声明
      2.HTML页面结构
        在主体内容（body）位置处显示“我的第一个网页”
    
    3.head元素
      head是其它头元素的容器
      1.<meta> 定义基本信息:编码格式，关键词，描述内容等
        <meta charset="utf-8">
    <meta name="keywords" content="关键词">
    <meta name="description" content="描述内容">
    
      2.<title></title> 定义网页的标题
      3.<style></style> 定义内部样式
      4.<script></script>定义或引用javascript文件
      5.<link>          引入外部样式
    4.body元素
      显示网页的主要内容
      1.特殊字符
          表示空格
    <   表示一个<
    >   表示一个>
    © 版权
        ¥  ￥
      2.文本标记
        1.文本样式
      <b></b>:加粗
      <i></i>:斜体
      <u></u>:下划线
      <s></s>:删除线
      <sup></sup>:上标
      <sub></sub>:下标
    
    2.标题元素
      语法：在网页中以醒目的方式来显示文字
      语法：
        <hn>内容</hn> n:1-6
        <h1>内容</h1> 一级标题
          ...
        <h6>内容</h6> 六级标题
          特点：
        1.字体大小可变
        2.加粗
        3.上下文之间有垂直空白间距
       属性：align
       作用：标记内容的水平对齐方式
       取值：left/center/right
    3.段落元素
      作用：以突出的形式表示一段文本
      语法：<p></p>
      属性：align
      取值：left/center/right
    4.换行元素
      语法：<br>或<br/>
    5.分隔线元素
      语法:<hr>或<hr/>
      属性：
        1.size 表示水平线的尺寸（高度），取值为px或%的数字
        2.width 宽度，取值为px或%的数字
        3.align 水平对齐方式 left/center/right
        4.color 水平线的颜色，取值为合法颜色值
    
        6.预格式化
      作用：保留html代码中的回车和空格
      语法：<pre>内容</pre>
    7.分区元素
      1.块分区元素
        作用：用于页面中元素的布局
        语法：<div></div>
      2.行分区元素
        作用：处理同一行文本中的不同样式
        语法：<span></span>
    8.行内元素和块级元素
      1.块级元素
        在网页页中独占一行的元素就是块级元素
        常见的块级元素：
           1.标题元素 h1-h6
           2.段落元素 p
           3.div
           4.结构标记(header...)
      2.行内元素
        多个元素位于同一行显示，从左往右排列
        常见的行内:
           span,b,i,u,s,sup,sub,a,img
      3.行内块
        显示方式如同行内元素，但具备块级元素的特征
      4.table ...

## 4.图像和链接 ##

1.URL

1.目录结构
      文件目录：文件夹嵌套结构
    2.URL
      URL:Uniform Resource Locator统一资源定位器，俗称路径。
      作用：用于表示网络中任意一个资源的位置。
    3.路径的表现形式
      1.绝对路径
        绝对路径就是完整路径，一定可以找到你想找的资源。
    1.网络资源
          通信协议+服务器主机+文件目录结构+文件名称
      ex:http://www.jd.com/index/logo.png
    2.本地资源
      从最高盘符处开始查找
      C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
      2.相对路径
         1.什么是相对路径
       从当前文件所在的位置处开始查找资源文件所经过的路径，就是相对路径。
           1.同级目录
         直接引用 
         ex:Koala.jpg
       2.子级目录
         先进入，再引用 
         ex:img/Koala2.jpg
       3.父级目录
         先返回，再引用
         ex:../Koala1.jpg
      3.根相对路径
        从服务器所在的根目录位置处开始查找
    表现：/
    /codeboy/img/logo.png

## 5.图像 ##

1.图像格式
      1.jpg 压缩比率较大
      2.png 背景透明
      3.gif 动图
    2.图像标记
      标记：<img>或<img/>
      属性：
         1.src 源，要显示的图像的url
     2.width 宽度，取值以px或%为单位的数字
     3.height 高度，取值以px或%为单位的数字
     4.alt 图片出错时显示的提示文本

## 6.链接 ##

1.语法
      <a>内容</a>
    2.属性
      1.href 链接的url
      2.target 目标，指定打开网页的方式
        取值：
       _blank 在新的标签页中打开
       _self 默认值，在当前页面中打开新的网页
    
     2.给一张图片设置超级链接，打开Tmooc网站（www.tmooc.cn）
    3.其它表现形式
      1.资源下载
        让链接的URL，链接到rar/zip文件即可
        href="*.zip/*.rar"
      2.电子邮件链接
        href="mailto:合法的邮箱地址"
      3.返回页面的顶部
        href="#"
      4.链接到javascript
        href="javascript:js脚本"

## 7.锚点 ##

1.什么是锚点？
        就是网页中的一个记号，可以通过超级连接调整到记号的位置处。
      2.使用锚点
        1.定义锚点
      1.使用a标记的name属性定义锚点
        <a name="锚点名称"></a>
      2.使用任意标记的id属性定义锚点
        <ANY id="锚点名称"></ANY>
    
    2.链接到锚点
      <a href="#锚点名称"></a>
      <a href="url#锚点名称"></a>

## 8.表格 ##

1.表格的语法

1.表格
      <table></table>
    2.行
      <tr></tr> --->table row
    3.单元格/列
      <td></td> --->table data

2.表格的属性

1.table属性
      width:宽度
      height:高度
      border:设置表格边框
      align:设置表格的水平对齐方式 
            取值：left/center/right
      cellpadding:设置单元格的内边距（内容与td之间的间距）
      cellspacing:设置单元格的外边距（td边框外的距离）
      bgcolor:背景颜色
    
    2.tr属性
      align 设置当前行的水平对齐方式
            取值：left/center/right
      valign 设置当前行的垂直对齐方式
            取值：top/middle/bottom
      bgcolor 设置当前行的背景颜色
    
    3.td属性
      width:宽度
      height:高度
      align:水平对齐
      valign:垂直对齐
      bgcolor:列的背景颜色
      colspan:跨列
      rowspan:跨行

3.可选标记

1.表格标题
      标记：<caption></caption>
            如果设置表格标题，则必须位于<table>下的第一个子元素位置处
    2.行/列标题
      标记：<th></th>
      所有的td都可以用<th>取代

4.表格复杂应用

可以将连续的几个行，划分到一组中，进行统一管理。
    1.行分组
      1.表头行
        <thead></thead>
    表格中最上面的一行进行分组的话，可以放在表头行中
      2.表主体行
        <tbody></tbody>
    允许将若干行放在tbody中进行统一管理
      3.表尾行
        <tfoot></tfoot>
    表格中最后一行进行分组的话，可以放在表尾行中
    2.不规则表格
      1.跨行
        rowspan
    从指定单元格的位置处开始，纵向向下合并几个单元格（包含自己），被合并的单元格要删除。
      2.跨列
        colspan
    从指定单元格的位置处开始，横向向右合并几个单元格（包含自己），被合并的单元格要删除。

## 9.列表 ##

1.列表的作用

按照从上到下(从左往右)的方式来显示所有的数据，并且可以在数据前增加显示的标识。

2.列表的组成

列表都是由"列表类型"和"列表项"来组成
    1.列表类型
      有序列表：<ol></ol> order list
      无序列表：<ul></ul> unorder list
    2.列表项
      用于表示列表中的数据(嵌套在列表中)
      <li></li> list item
    3.有序列表
      1.type 作用：指定列表的排序类型
             取值：
            1 默认值，以数字排序
        a 小写字母 
        A 大写字母
        i 小写罗马数字
        I 大写罗马数字
      2.start 作用：指定起始编号是从第 几 开始
              取值：数字

4.无序列表

1.type 作用：指定列表的标识类型
            取值：
            disc:实心圆
        circle:空心圆
        square:实心方块
        none:不显示标识

5.列表嵌套

在一个列表中又出现另一个列表
     被嵌套的列表只能出现在li中
     ex:
       <ol>
         <li>
       这是有序列表内容
       <ul>
         <li>内容</li>
       </ul>
     </li>
       </ol>

## 10.定义列表 ##

1.什么是定义列表
      定义列表常用于给出一类事物或对名词的解释说明等。
    2.语法
      1.<dl></dl> 表示一个定义列表
      2.<dt></dt> 表示定义列表中要解释说明的名词
      3.<dd></dd> 表示定义列表中对名词解释的内容
      ex:
        <dl>
       <dt>名词</dt>
       <dd>解释具体内容</dd>
    </dl>
      使用场合：图文混排时使用

## 11.结构标记 ##

1.结构的作用

用于描述整个网页的结构（取代div做布局）
    提升标记的语义性

2.常用的结构标记

1.<header></header>
      作用：定义网页或某区域的头部
    2.<nav></nav> 
      作用：定义网页的导航链接
    3.<section></section>
      作用：主体内容
    4.<aside></aside>
      作用：定义页面中的侧边栏信息，靠近边缘。
    5.<footer></footer>
      作用：定义网页偏底部信息，比如：网站的备案号，解释说明，版权。
    6.<article></article>
      作用：定义与文字描述相关的内容，比如：论坛帖子，微博条目，用户评论等

## 12.表单（重点&难点） ##

1.表单的作用

1.提供可以与用户交互的可视化界面
    2.收集用户信息并提交给服务器

2.表单的组成部分

1.前端部分 
      表单控件，与用户交互的可视化控件
    2.服务器端部分
      对提交的数据的处理,***.php

3.表单标记

<form></form>
    属性：
      1.action 
        作用：定义表单提交时发生的动作，通常定义的是服务器上处理程序的url地址，
    ex:action="login.php"
      2.method
        作用：指定表单数据的提交方式
    取值：
        1.get(默认值)
          1.明文提交，待提交的数据会显示在地址栏中
          2.安全性较低
          3.提交数据有大小限制，限制为2KB
          4.向服务器要数据时，使用get方式
        2.post
          1.隐式提交，提交的数据不会显示
          2.安全性较高
          3.提交数据大小无限制
          4.要传递数据给服务器时，使用post方式
        3.delete
        4.put
      3.enctype  
        作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器
    1.application/x-www-form-urlencoded
      默认值，允许将任意字符提交给服务器（文件无法提交）
    2.multipart/form-data
      允许将文件提交给服务器
    3.text/plain
      只能将普通字符提交给服务器

4.表单控件

能够与用户进行交互的可视化元素
    1.分类：
      1.input元素
      2.textarea多行文本域元素
      3.select和option 选项框元素
      4.其它元素
    2.input元素
      1.作用：在页面中提供各种各样的输入控件，如：文本框，密码框，单选按钮，复选框等。
      2.语法
        标记：<input>或<input/>
    属性：
       1.type 指定创建输入控件的类型
       2.name 为控件定义名称，提交给服务器端使用（必须）
       3.value 控件的值，提交给服务器端使用
           4.disabled 禁用控件，不能操作并不能提交给服务器使用
         该属性无值，只要出现在标记中，就是禁用。
      3.input元素详解
        1.文本框和密码框
      文本框：<input type="text">
      密码框：<input type="password">
      属性：
        1.maxlength 指定限制输入的字符数
        2.readonly 只读，只能看，不能改，但允许提交。
        3.placeholder 占位符，即默认显示在控件上的文本。

## 13.按钮 ##

1.提交按钮
        type="submit"
        作用：将表单的数据提交给服务器上指定的程序
      2.重置按钮
        type="reset"
        作用：将表单的内容恢复到初始化的状态
      3.普通按钮
        type="button"
        没有功能
      属性：
        value:显示在按钮上的文本
        3.单选按钮和复选框
      单选按钮：type="radio"
      复选框：type="checkbox"
      属性：
        name 除定义控件名称之外，还能起到分组的作用
        checked 设置默认选中项，无值属性
        4.隐藏域和文件选择框
      1.隐藏域
        type="hidden"
        想要提交给服务器，但不想展示给用户的数据可以放在隐藏域中。
      2.文件选择框
        type="file"
            注意：
          1.method的值必须为post
          2.enctype的值必须为multipart/form-data
    3.textarea元素
      1.作用
        允许录入多行文本
      2.语法
        标记：<textarea></textarea>
    属性：
       1.name 定义控件名称，提供给服务器使用
       2.readonly 只读
       3.cols 指定文本域的列数，即一行能显示多少个英文字符（中文减半）
       4.rows 指定文本域的行数，即默认显示多少行的数据，超出rows的话会出现滚动条。

## 14.选项框 ##

1.语法
        1.<select></select> 
    作用：在页面中表示一个选项框
        2.<option></option>
    作用：显示选项框中的内容项
      2.属性
        1.select属性
      1.name 定义选项框的名称
      2.size 定义显示选项的数量，默认值为1
      3.multiple 设置多选，无值的属性
        注意：只有滚动列表支持多选
    2.option属性
      1.value 定义选项的值
      2.selected 设置默认选中项，无值属性
    5.其它元素
      1.label元素
        作用：关联文本域表单控件
    语法：<label></label>
    属性：for 要与表单控件关联的id值
      2.为控件分组
        <fieldset></fieldset>为控件定义分组
    <legend></legend>为分组指定标题
      3.浮动框架
        作用：允许在一个网页中，再引入另外一个网页。
    语法：<iframe></iframe>
    属性：
        1.src 要引入页面的url路径
        2.width 宽度
        3.height 高度
        4.frameborder 浮动框架的边框，默认值1

## 15.单位转换 ##

1px=0.025rem;

转载于:https://blog.51cto.com/14392904/2410736