资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

前端知识点总结——HTML-创新互联

前端知识点总结——HTML

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

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的林芝网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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:/tupian/20230522/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:
         
             
      1.    这是有序列表内容    
               
        • 内容
        •    
         
      2.    

      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://cdkjz.cn/article/ddheeg.html
      多年建站经验

      多一份参考,总有益处

      联系快上网,免费获得专属《策划方案》及报价

      咨询相关问题或预约面谈,可以通过以下方式与我们联系

      大客户专线   成都:13518219792   座机:028-86922220

      取代

      4.表格复杂应用

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