HTML学习笔记

目录

一、前置知识

 1.前后端分离的介绍

2.B/S架构

3.http协议               常见的其他协议：https、file

4.URL(统一资源定位服务)

二、前端三要素

  HTML   1.开发环境搭建

2.介绍

3.html文档结构

4.语法

4.空白、实体

5.块级元素*  ==>搭建页面的骨架

6.行内元素（装饰性）  

7.元素的使用策略

8.h5新增的语义化标签\

9.表格

10.表单

 表单控件

---

一、前置知识

 1.前后端分离的介绍

   目前企业级的项目都是基于前后台分离的项目
   java、ssh、ssm      jsp（前端页面）
   
   前端工程师：页面的重构（html、css、js）+数据交互（使用工具和后台服务交互）
   后端工程师：java  =>  接口

2.B/S架构

   基于：浏览器（Brower）=服务器(Server)  进行架构
       校园官网=学校服务器
       学生管理系统：浏览器=公司服务器

   C/S：客户端=服务器
        桌面上的qq、微信、浏览器（桌面应用程序）：客户端=服务器端

3.http协议               常见的其他协议：https、file

    超文本传输协议  基于请求和响应这种模式
      
   http协议如何进行工作？
      浏览器-->请求（get\post\delete\options\put…）-->服务器（解读在数据库查询返回服务器）-->响应-->浏览器
   
   http常见的7种请求
      1）get请求：请求参数放到地址栏里（地址栏？之后的位置）
            发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。另外get支持快取、缓存、可保留书签等
      2）post请求：请求参数放到请求体（更安全）
            向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对、原有资源的修改。提交的资源放在
            请求体中。不支持快取。
   

   报文：请求报文、响应报文

    请求报文：

      请求行:请求方式、请求地址（URL）、协议的版本

      请求头:一个一个的键值对

      请求体：请求参数

      get请求的请求参数不放在请求体中，拼接到url上

      post请求参数放在请求体中

    响应报文：

      响应行：协议版本、状态码

      响应头：一个一个的键值对

      响应体：相应的内容

   http请求常见的状态码
      1xx（不常用）：100、101
      2xx（常用）：200  成功
      3xx（304）：304 重定向
      4xx：404   找不到资源
           403   权限不足
      5xx：500   服务器内部错误

4.URL(统一资源定位服务)

        唯一的去定位一个资源

    模板： 协议://ip:port/path
    例子： http：//47.100.226.238:8080/app/index.png

   释意：
        http:协议（规定使用哪种协议）
        47.100.226.238：IP地址（唯一确定一台主机）
        8080：端口号（唯一确定一个  进程（应用程序））
        /app/index.png:资源的路径

    http://www.baidu.com    域名    （域名解析系统 =>DNS）

二、前端三要素

  HTML：搭建页面骨架
  CSS：美化修饰页面
  js：交互

  HTML
   1.开发环境搭建

     1）编辑器：vscode   编写代码的地方
            
            sublime   体积小、运行速度快
            文本编辑器 没有代码提示以及插件

     2）浏览器：火狐     代码执行的地方
           coogle、ie、

     3）部署环境：apache 代码部署的地方

     三部分人
        w3c            制定规范（标准）
            

=>box

        浏览器厂商      火狐、coogle、safiri、微软

        程序员         使用者

2.介绍

作用：搭建页面的骨架
HTML：超文本标记语言，是标记语言而非编程语言
html文件后缀名：.htm、.html

3.html文档结构

   

   
   
  
   
  
   
   
   
   



    hello world!


    你好世界!

4.语法

1）注释
        注释内容不会被浏览器给解析
   作用
     1.记录你的编程思路
     2.便于后期代码的维护

2）元素
   双标签元素
     元素=开始标签+结束标签+内容+属性
   单标签元素
     开始标签+属性

3）属性
  属性写在开始标签中
  属性=属性名+属性值
  属性名和属性值之间使用=分隔，属性值使用引号（双引号/单引号）包起来

   核心属性：每一个元素都可以拥有的属性
      title:提示信息
      id：元素的唯一值
      class：类名（css选择器）
      style：定义一些样式

  特有属性：某些元素特有的属性
      charset:字符集
      src：路径
      alt：当img通过src未被正确找到时提供提示
      herf:超链接
   路径
      绝对路径  /  
      相对路径 ./    当前目录下
               ../   返回上一级

4.空白、实体

   空格：无论有多少空格，浏览器都会按照一个空格来处理

   实体：  （空格）=  
        &=  &
        <= <
        >= >

5.块级元素*  ==>搭建页面的骨架

  1）特点:a.独占一行空间
          b.默认宽度为父元素的100%,高度由内容或子元素决定
          c.可以设置宽高

         div：无意义的块级元素（没有任何的默认样式）
         p:段落   默认有一个margin-top  margin-bottom
         h1~h6：标题  默认有字体大小和字体宽度，外边距
         ul ：无序列表
            子元素：li
         ol:有序列表
            子元素：li
         dl:自定义列表
            子元素dt:标题
                  dd:内容

6.行内元素（装饰性）  

   特点
   1）共享一行空间；如果一行放不下则换行现实
   2）默认宽高都由内容决定
   3）默认不能设置宽高

   span ：无意义的行内元素
   a:超链接
     1)超链接（绝对路径、相对路径）
     2）锚点(例：返回顶部)
      为目标元素定义一个id值，写一个a标签，给a标签的herf属性写上   #目标元素的id值
     3）发送邮件

   herf: mailto:+邮箱地址
      发邮件给curry

   strong  加粗
   i   斜体
   img  图片
   src： 图片的路径
   alt：当图片加载失败的时候，替代图片的文字
   width  宽度
   height  高度

   ……

7.元素的使用策略

   使用块级元素搭建页面的骨架，使用行内元素装饰
   不知道使用什么元素的时候  就用div
   不知道用什么行内元素的时候就用span

8.h5新增的语义化标签\

 作用：

   1）能够更好地阅读代码

   2）有助于搜索引擎搜索

  

hello

  hello

  header

  nav

  footer 

  article

  section

  address

  details

9.表格

作用：用来展示数据

根元素table 表格          border 边框、width 宽度、cellspacing 单元格和单元格之间的距离

                                    cellpadding 单元格和内容之间的距离、bgcolor 背景颜色

     thead 表头

       tr  表示行        colspan 跨列合并

       th  表示单元格    

     tbody 表体          align   文本对齐

       tr  表示行

       td  表示单元格    colspan 跨列数、rowspan 跨行数

作业：课程表、个人简历

10.表单

 作用：用来收集用户信息，与后台交互

form（输入框、单选按钮、多选按钮、下拉菜单）

作用：

  主要用于用户与Web应用程序进行数据的交互

属性：action 用于处理表单信息的应用程序的地址。

      method  浏览器用来提交表单的HTTP方法，常用的get/post。 

            get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔

            post  对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。 

     name 设定表单的名称

     target 表示浏览器接收到form的提交信息后在哪里显示回应。  

           _self  在当前选项卡打开响应内容

           _blank   在新选项卡打开响应内容

 表单控件

   Input表单控件

      Input控件用于接受来自用户的数据

      type属性，用于设定控件类型，取值如下： 

            text      单行文本框      

            password  密码框，输入的内容将会被遮挡。   

            checkbox  复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。   

            radio     单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。   

            submit    提交按钮   

            reset 重置按钮   

            file  文件按钮，该控件用于选中文件系统中的某个文件

            hidden  隐藏域，该控件不显示在页面中，但是其值会被提交。

            image 图像按钮，必须使用src来加载图片，使用alt来声明替换文本。

            button  普通按钮

            name  用于设定控件名和提交数据的属性名

            value 用于控件值初始化，可选，涉及到用户输入时，当涉及到选择时，必须选

            checked 单选框，复选框默认选中属性

            disabled  表示禁用组件，禁用组件的值也不能被提交 

            size  当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20 

            maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。

select  下拉菜单（父元素）

        option 每一项（子元素）

textarea 文本域

button   按钮

          type 取值：button、submit、reset

          name

lable    用于表示某一表单控件的标题