web前端篇:html基础知识

1.web前端：

• 什么是web?

  web 就是网页，是一种基于B/S的应用程序
  B：Browser浏览器
  S：Server服务器

• web组成？

  浏览器：代替用户向服务器发送请求
  服务器：接收用户请求并响应
  通信协议：规范数据在网络中是如何打包传送的。
  HTTP(HyperText transfer protocal)：超文本传输协议

• web服务器

  作用：
    接收用户请求并左幅响应
    存储web信息
    具备安全性能
  

• web浏览器

  产品：
    Apache
    Tomcat
    IIS
    Nginx
  
  作用：
    代替用户向服务器发送请求
    做为响应数据的解释引擎，向用户呈现界面
  主流浏览器产品：
    根据浏览器的内核、引擎进行划分
    1. Microsoft IE
    2.Google chrome
    3.Mozilla FireFox
    4.Apple Safari
    5.Apple Safari
  浏览器引擎：
    渲染：解析HTML,CSS控制页面渲染效果
    JS引擎：解释网页脚本文件
  前端开发技术
    HTML,CSS,JavaScript

2.HTML概述

2.1HTML介绍

• 什么是HTML？

HyperText Markup language
 超文本    标记    语言
作用：书写网页结构

• 标记

也叫标签，主要用来标记网页中的内容，以实现网页的布局和JS操作

2.2HTML在计算机中如何表现

• 所有的网页文件在计算机中以.html或。htm文件存储。
• 开发工具：

1.记事本
2.Editplus Pycharm
3.Sublime Webstorm VSCode Atom...

• 运行工具：
  • Chrome 浏览器
  • FireFox 浏览器
• 调试方法：F12打开网页源码。

3.HTML基础语法

3.1.标签/标记

• 在网页中具有特殊功能的符号，HTML中所有的标签都以<>为标志，作用区分普通文本。

• 标签分类

  1.双标签

  ​ 成对出现，有开始有结束。

  ​ eg:<开始标签> 标签内容

  2.单标签

  ​ 只有开始标签，没有结束标签，可以手动添加、表示结束。

  ​ eg:<标签名>

• 标签嵌套

  • 在成对的标签中出现其他标签。

  • 嵌套结构中，外层元素程为父元素，内层元素称为子元素

    
        你好
    
    
    

  • 书写规范

    • HTML不区分大小写，保持适当缩进增强代码可读性

3.2 标签属性

• 标签的属性主要用于修饰标签的显示效果。
• 相关语法：
  • 属性由属性名和属性值组成：属性名="属性值"
  • 属性的声明必须写在开始标签中：..结束标签>
  • 每个标签都可以设置多个属性，属性之间使用空格隔开：..结束标签>

3.3 HTML注释

• 注释语句：
• 注意：
  • 注释不能卸载标签里，如

  • 注释不能嵌套

3.4HTML结构组成

• 文档的类型声明方式：开头第一行 html5声明方式

  • 作用 ：告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式。
  • 书写位置：文档最开始位置。

• 文档的开始和结束

  • 在文档类型声明之后，使用一对标签标示文档的开始和结束

  • 在HTML标签中，包含两对子元素

    
        
        
    
    
    标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
    标签表示网页的主体信息，网页所呈现的内容都要写在body里

  • 标签中包含的子元素

    • 设置网页的标题
    • 设置网页的字符编码

3.5文本标签

3.5.1.字符实体（具有特殊意义的符号）

•   表示一个空格
• < 表示小于号 <
• > 表示大于号 >
• '© ;' 表示版权符号
• ¥ 表示人民币符号¥

3.5.2.文本样式

• 斜体显示文本
• 文本添加下划线
• 文本加粗效果
• 文本添加删除线
• 上标显示文本
• 下标显示文本
• 特点：这些标签可以与其他的标签或文本共行显示

3.5.3.标题标签

• 以不同的文字大小和加粗方式显示文本

• 语法：n取值 1- 6，字体大小是逐级递减的

  这是一级标题
  这是二级标题
  这是三级标题
  这是四级标题
  这是五级标题
  这是六级标题

• 特点：

  • 会改变文字的大小并且具有加粗效果
  • 每个标题都会具备垂直的空白距离
  • 每个标题都独占一行，不与其他元素共行显示
  • 每个标题都可以添加属性 align
    • 取值：left / center / right
    • 设置文本的水平对齐方式，默认居左对齐

    • 一级标题

3.5.4.段落标签

• 作用：突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
• 语法：

  • 属性：align 设置文本的水平对齐方式
  • 取值： left / center / right

3.5.5.格式标签

• 换行标签：

• 水平线标签:

  ---

3.5.6.分区标签

• 块分区
  • 作用：划分页面结构，配合css实现网页布局
  • 特点：独占一块显示
• 行分区元素
  • 作用：设置同一行文本的不同样式，结合CSS
  • 特点：可以与其他元素或文本共行显示，允许在一行文本中使用多个span

3.5.7.标签分类

• 块级元素
  • 只要在网页中独占一行，不予其他元素共行显示的元素都是块级元素。
  • 作用：都网页可以做布局
  • 特点：都添加align属性，设置内容水平对齐方式
  • eg:h1~h6,ul,ol,li,form,table,tr,p,div
• 行内元素/内联元素
  • 可以与其他元素共行显示。
  • eg:i b strong sub sup span

3.6 列表标签

• 作用：按照从上到下的方式来排列数据

• 列表的组成：

  • 有序列表

    • 默认是按照数字排序

    1. 无序列表

       • 默认以实心原点作为标识

    2. 列表项

       • 列表中的每一条数据都是一个列表项
       • 语法 ：
    3. 注意 ：列表项要嵌套在列表标签中使用

• 列表属性

  • 有序列表--ol

    • type属性：设置项目符号

     1 ：按照数字排列显示，默认值
     a : 按照小写字母顺序排列
     A ：按照大写字母排列
     i : 按照罗马数字排列
     I : 按照罗马数字排列

    • start属性：设置从第几个字符开始排序
      • 取值：数字

  • 无序列表--ul

    • type属性：设置项目符号

      disc 实心圆点（默认）
      circle 空心圆点
      square 实心方块
      none 不显示项目符号

• 列表嵌套

  • 在一个列表中出现其他列表。

    
    
    
        
        
    
    
        
    
            
    山东
                
    
                    
    德州
                    
    青岛
                    
    济南
                    
    淄博
                
            
            
    吉林
                
    
                    
    长春
                    
    吉林
                    
    白城
                    
    敦化
                
            
            
    北京
                
    
                    
    朝阳
                    
    昌平
                    
    西城
                    
    东城
                
            
        
    
    
    

3.7 图像与超链接标签

• URL
  • 统一资源定位符 ：用来标识网络中资源的位置，俗称路径URL 组成 ：协议 域名 文件目录及文件名。
  • URL分类：
    • 绝对路经：
      • 从根目录开始查找，常用于网络文件路经。
    • 相对路经：
      • 从当前文件所在的文件夹开始查找
    • 根相对路径 （了解）：
      • 从Web程序所在的根目录开始查找资源文件
      • 注意：网络URL中不能出现中文，URL是严格区分大小写的。
• 图像标签
  • 在网页中插入一张图片
  • 语法 ：
  • 属性 ：
    • src :指定要显示的图片路径
    • width ：设置图片的宽度，以像素px为单位，也可以省略单位
    • height ：设置图片的高度
      注意 : src 为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
    • title ：用来设置图片的标题，当鼠标悬停在图片上方时出现
    • alt : 用来设置图片加载失败之后的提示文本

3.8超链接标签

• 什么是超链接标签

  • 能够实现从当前文件跳转到其他文件的标签

• 语法：

  • 标签属性：

    • href :必填属性，指定链接地址，以路径形式给出,#表示当前页，不会发生页面刷新操作，如果属性为"",也表示当前页，但是包含了网络请求，相当于刷新页面。
    • target :可选属性，设置目标文件的打开方式。
      • _self ：默认值，表示在当前窗口打开
      • _blank:表示新建窗口打开

    
    
    
        
        
    
    
        百度一下
        回到顶部
    
    

• 锚点链接

  • 链接到当前文件的指定位置

    1. 设置锚点
    2. 设置跳转早年经历
    
    
        百度一下
        回到顶部
    

3.9 表格

3.9.1 标签介绍：

• 表格标签：

• 行标签：

• 单元格标签：

• 创建顺序：

  • 在表格标签中嵌套行标签，每一个 tr 就代表一行
  • 在行标签中创建单元格标签，用来存放数据

      
  
          
  
              
  id
  
              
  name
              
  age
          
          
  
              
  1
              
  xjk
              
  18
          
          
  
              
  2
              
  half
              
  15
          
      

3.9.2标签属性

• table 属性
  • border ：设置边框，取值以px为单位的数值（px可以省略）
  • width ：设置宽度
  • height ：设置高度
  • align ：设置表格在其父元素中的水平对齐方式
  • cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
  • cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
  • bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称

    
    


    百度一下
    回到顶部
    

        

            
hello
            
html
        
    

• tr 属性
  • bgcolor : 设置当前行的背景颜色
  • align ：设置当前行中内容的水平对齐方式
    取值 ： left / center / right
  • valign :设置当前行内容的垂直对齐方式
    取值 ：top / middle / bottom,默认垂直居中。
• td属性
  • width 设置单元格的宽度
  • height 设置单元格的高度
  • align 单元格内容的水平对齐方式
  • valign 单元格内容的垂直对齐方式
  • bgcolor 单元格的背景颜色
• 单元格的合并
  • 单元格独有的属性 colspan rowspan
  • 单元格的跨列合并
    • 从当前单元格的位置开始，横向向右合并几个单元格colspan = "3" ->跨3列进行合并(包含自身)
  • 单元格的跨行合并
    • 从当前的单元格开始，纵向向下合并单元格rowspan = "3" ->向下跨3行合并单元格
  • 注意：一旦发生单元格合并，跨列合并，要删除当前行中多余的单元格跨行合并，要删除其后行中多余的单元格始终保持表格结构完整。

• 行分组

  • 允许将表格中的一行或者是若干行划分为一组，便于管理。

  • 语法

    1. 表头行分组
    
        
            
        
    
    2. 表尾行分组
    
        
            
        
    
    3. 表主体信息
    
        
            
        
    

3.10.表单

3.10.1.用于接收用户的数据并且提交给服务器

• 表单2个要素
  • form表单元素
  • 表单控件
    • 提供了能够跟用户交互的可视化组件

3.10.2.form元素

• 注意：form元素本身是不可见的，却不能省略，因为数据的提交功能要由 form 元素完成

• 语法：

• form标签属性

  • action
    • 指定数据提交的目的地址
  • method
    • 数据请求方式 get /post (默认get)
    • get
      • 通常用于向服务器端获取数据
      • 特点：
        • 提交的数据会以参数的形式拼接在URL后面
        • 安全性较低
        • 提交数据最大2KB
    • post
      • 将数据提交给服务器处理
      • 特点：
        • 隐式提交，看不到提交数据
        • 安全性较高
        • 没有数据大小限制

  
  
  
      
      
  
  
      
  
          
          
          
      
  
  
  ##################################################################################
  file:///D:/code/day43.html
  
  file:///D:/code/day43.html?user=alex&pwd=123

3.10.3.表单控件

• 作用：提供与用户交互可视化组件（这里注意只有放在表单元素中的表单控件才允许被提交）

• 分类：

  • 文本框与密码框

    • 语法：

      • 文本框：
      • 密码框：

    • 属性：

      • name 属性 定义当前控件的名称，缺少的话无法提交。

        name = "uname"

      • value 属性，要提交给服务器的值，同时也是默认显示在控件上的值。

      • maxlength 用来限制用户输入最大字符串。

      • placeholder 用户输入之前显示在框中的提示文本。

  • 单选框和复选框

    • 单选按钮

    • 复选框

    • 属性：

      • name 定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致。
      • value 属性 设置当前控件的值，最终提交给服务器。
      • checked 属性 设置预选中状态 可以省略属性值，也可以使用"checked" 作为值。

      
      
      
      
          
          
      
      
          男
          女
      
      
      
      
      
      
          
          
      
      
          抽烟
          喝酒
          烫头
      
      

  • 隐藏域和文件选择框

    • 隐藏域

      • 作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中。
      • 语法：
      • 属性：
        • name 控件名称
        • value 控件的值

    • 文件选择框

      • 作用：选择文件上传，发送给服务器

      • 语法：

      • 属性：name 定义控件名称。

  • 下拉选择框

    • • 属性：
        • multiple 可进行多选(ctrl+鼠标左键)

      河北 黑龙江 湖南

  • 文本域

    • 支持用户多行文本

    • 语法：

    • 属性：

      • name 控件名称
      • cols 指定文本默认显示的列数，一行中能显示的英文字符量，中文减半
      • rows 指定文本域能够显示的行数

    • 注意：文本域可以由用户调整大小

  • 按钮

    • 提交按钮

    • 重置按钮

    • 普通按钮

    • 按钮显示文本

      按钮显示文本

      • 注意：
        • 按钮标签可以在任何地方使用，不局限在form表单中使用
        • 按钮标签使用在form中，默认具有提交功能，等同于input submit
        • 可以添加属性type 取值 submit/reset/button 进行区分（非必填）
        • 在表单外做为普通按钮使用时，需要通过JS，动态绑定事件

  • label特殊方法

    • 使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定。

      男
      

4.练习题：

1.字体标签包含哪些？

2.超链接标签a标签中href属性有什么用？

3.img中标签中src和alt属性有什么？

4.如何创建一个简易的有边框的表格？

5.form 标签中的action属性和method属性的作用？

6.在form标签中表单控件input中type类型有哪些？并分别说明他们代指的含义

7.表单控件中的name属性和value属性有什么意义？

8.用socket 开启一个服务端，客户端访问服务器？

9.在一行内显示的标签有哪些？

10.独占一行的标签有哪些？

转载于:https://www.cnblogs.com/xujunkai/p/10992614.html