前端知识点总结——HTML

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

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站制作、网站建设、外贸网站建设收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了10余年的创新互联公司网站建设公司。

1.web的基础知识

web与Internet
1.Internet:全球性的计算机互联网络，因特网，互联网，交互网。前端学习圈：767273102 ，从最基础的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移动端HTML5的项目实战的资料都有整理

2.提供服务

访问网站：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：百度
     加粗
      注意：必须有开始就有结束。
2.非封闭类型
  又称为单标记
  语法：<标记>或<标记/>
      ex:或
         
或

2.标记嵌套
  1.什么是嵌套？
    在一对标记中出现另外一对（个）标记，从而形成功能的层叠。
  2.语法
    <标记>
   <标记>
      <标记/>
   

ex：

   这是演示文本

ex：
 这是演示文本 正确，不推荐
ex:
 dfdsfsdfs 错误
注意：
  1.换行缩进，如果是双标记必须成对出现
3.元素（标记）属性
  作用：修饰元素
  语法：
   1.必须声明在开始标记中
     <标记 属性名>
   2.属性名与值之间用"="连接
     <标记 属性名=值>
   3.元素允许有多个属性，每个属性之间用空格隔开
     <标记 属性名1=值1 属性名2=值2 ...>
 ex:
 p标记的align属性的值为center,title属性的值为"这是段落"
     
    标准属性(通有属性)：
  id:定义元素的唯一标识（名称）
  title:定义鼠标悬停在元素上时所提示的文本
  style:css中,定义行内样式
  class:css中,引用类选择器
   4.注释
     语法：
 注意：
   1.注释本身不能嵌套
   2.不能嵌套在标记中

3.HTML文档结构

1.HTML文档结构

1.文档类型声明
  作用：告诉浏览器HTML的版本类型
  语法：
  在网页的最顶端编写
2.HTML页面
  在文档类型声明的下面写上一对根标记
  
  在根标记中包含两部分：
     文件头：
         定义网页的全局信息
 文件主体：
         定义网页中显示的内容
2.搭建网页结构
  1.文档类型的声明
  2.HTML页面结构
    在主体内容（body）位置处显示“我的第一个网页”
3.head元素
  head是其它头元素的容器
  1. 定义基本信息:编码格式，关键词，描述内容等
    


  2. 定义网页的标题
  3. 定义内部样式
  4.定义或引用javascript文件
  5.          引入外部样式
4.body元素
  显示网页的主要内容
  1.特殊字符
      表示空格
<   表示一个<
>   表示一个>
© 版权
    ¥  ￥
  2.文本标记
    1.文本样式
  :加粗
  :斜体
  :下划线
  :删除线
  :上标
  :下标
2.标题元素
  语法：在网页中以醒目的方式来显示文字
  语法：
    内容 n:1-6
    内容 一级标题
      ...
    内容 六级标题
      特点：
    1.字体大小可变
    2.加粗
    3.上下文之间有垂直空白间距
   属性：align
   作用：标记内容的水平对齐方式
   取值：left/center/right
3.段落元素
  作用：以突出的形式表示一段文本
  语法：
  属性：align
  取值：left/center/right
4.换行元素
  语法：
或

5.分隔线元素
  语法:
或
  属性：
    1.size 表示水平线的尺寸（高度），取值为px或%的数字
    2.width 宽度，取值为px或%的数字
    3.align 水平对齐方式 left/center/right
    4.color 水平线的颜色，取值为合法颜色值
    6.预格式化
  作用：保留html代码中的回车和空格
  语法：内容
7.分区元素
  1.块分区元素
    作用：用于页面中元素的布局
    语法：
  2.行分区元素
    作用：处理同一行文本中的不同样式
    语法：
8.行内元素和块级元素
  1.块级元素
    在网页页中独占一行的元素就是块级元素
    常见的块级元素：
       1.标题元素 h2-h7
       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:/upload/otherpic58/56656
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.图像标记
  标记：或
  属性：
     1.src 源，要显示的图像的url
 2.width 宽度，取值以px或%为单位的数字
 3.height 高度，取值以px或%为单位的数字
 4.alt 图片出错时显示的提示文本

6.链接

1.语法
  内容
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属性定义锚点
    
  2.使用任意标记的id属性定义锚点
    
2.链接到锚点

8.表格

1.表格的语法

1.表格
  
2.行
   --->table row
3.单元格/列
   --->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.表格标题标记：如果设置表格标题，则必须位于下的第一个子元素位置处 2.行/列标题标记：所有的td都可以用表格中最上面的一行进行分组的话，可以放在表头行中 2.表主体行允许将若干行放在tbody中进行统一管理 3.表尾行表格中最后一行进行分组的话，可以放在表尾行中 2.不规则表格 1.跨行 rowspan 从指定单元格的位置处开始，纵向向下合并几个单元格（包含自己），被合并的单元格要删除。 2.跨列 colspan 从指定单元格的位置处开始，横向向右合并几个单元格（包含自己），被合并的单元格要删除。

9.列表

1.列表的作用

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

2.列表的组成

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

4.无序列表

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

5.列表嵌套

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

10.定义列表

1.什么是定义列表
  定义列表常用于给出一类事物或对名词的解释说明等。
2.语法
  1. 表示一个定义列表
  2. 表示定义列表中要解释说明的名词
  3. 表示定义列表中对名词解释的内容
  ex:
    
   名词
   解释具体内容

  使用场合：图文混排时使用

11.结构标记

1.结构的作用

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

2.常用的结构标记

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

12.表单（重点&难点）

1.表单的作用

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

2.表单的组成部分

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

3.表单标记


属性：
  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.语法
    标记：或
属性：
   1.type 指定创建输入控件的类型
   2.name 为控件定义名称，提交给服务器端使用（必须）
   3.value 控件的值，提交给服务器端使用
       4.disabled 禁用控件，不能操作并不能提交给服务器使用
     该属性无值，只要出现在标记中，就是禁用。
  3.input元素详解
    1.文本框和密码框
  文本框：
  密码框：
  属性：
    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.语法
    标记：
属性：
   1.name 定义控件名称，提供给服务器使用
   2.readonly 只读
   3.cols 指定文本域的列数，即一行能显示多少个英文字符（中文减半）
   4.rows 指定文本域的行数，即默认显示多少行的数据，超出rows的话会出现滚动条。

14.选项框

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

15.单位转换

1px=0.025rem;

当前标题：前端知识点总结——HTML
本文网址：http://kswjz.com/article/joegcp.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

取代

4.表格复杂应用

可以将连续的几个行，划分到一组中，进行统一管理。
1.行分组
  1.表头行

前端知识点总结——HTML