• 从头学前端-HTML简介


    HTML简介:

    • 先说下什么是网页:

    网页是网站中的页面,通长是HTML格式的文件,单个或多个页面就组成了一个网站;现在的技术发展到一般都是单页应用,在一个页面中,通过页面跳转的方式,访问不同数据页面;
    网页基本都是通过浏览器访问;网页主要有图片,文字、链接、视音频等元素组成;使用不同的标签引入元素;最终生成的文件和展示的方式一般都是html或htm文件;

    • 什么是HTML

    HTML是超文本标记语言《Hyper Text Markup Language》,不是一个编程语言,只是个标记语言,用来描述网页结构;
    超文本意思超越了文本的限制,除了文本,还可以加图片,动画,多媒体等内容;

    • 一个网站的诞生:

      • 编写html文件
      • 多个html展示不同页面
      • 用户通过浏览器访问html文件
      • 浏览器渲染html文件展示成web页面;
    • web标准

      • Web标准是W3C标准化组织制定的一系列标准的集合;
      • 主要由结构(tag标签),表现(css样式)、行为(JavaScript用户交互)构成;
      • web标准使得代码更规范,统一;

    HTML标签

    • 标签一般都是成对出现的,并且都在’<>‘里面;如;也有例外,如单标签’br’,数量不多

    • 标签关系有两类:

      包含关系:父子关系,包含关系可以多层包含;
      并列关系:兄弟关系

      
      	
      	
      		

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
    • 4个基本结构标签(也叫骨架标签):

      • html : 根标签,所有代码都在之内
      • head: 文档的头部标签,在里面定义字符集
      • title: 文档的标题标签,在head标签里面
      • body: 文档的主体,页面展示的内容都在body里面
    • 文档标签

      • 是文档类型的声明标签,用于告诉浏览器已什么版本显示网页;
    • HTML常用标签

      1. 标题标签 

      ~

      作为标题使用,文字变粗,独占一行; 2. 段落标签:

      将html文档分割成多段,段落之间保有空隙 3. 换行标签:单标签
      强制文字换行;行之间没有空隙 4. 文本格式化标签: 加粗 倾斜 删除线 下划线 5. 盒子标签:

      ;没有语义,用来装内容;div是division的缩写,span表示跨度,跨距; div是大盒子,单独占一行,span是小盒子可以多个在一行显示; 6. 图像标签:标签用于定义页面中的图片,是一个单标签; src是img标签的属性,用于指定图片路径(相对路径或绝对路径)或链接;alt是文本替换,title是提示文本。width和height是图片宽度个高度,单位是像素,修改宽度,高度会等比缩放;反之亦然; border是图片边框; 7. 超链接标签:(anchor 锚点) 作用是从一个页面链接到另一个页面;分为:外部链接,内部链接,空链接,下载链接,网页元素链接,锚点链接(通过id定位)等 文本或图像 ; 8. 注释标签: 注释里面的内容不会显示的页面,只会在源代码显示; 9. 特殊字符: 如下图;
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

    在这里插入图片描述

    • 表格标签 table:
      1. 表格主要是显示数据,不是用来布局页面的;
      2. 基本语法:
      table是表格,tr是行,td是单元格 3. 表头标签:
      表头中的文字会加粗,居中; 4. 合并单元格: rowspan:跨行合并, colspan:跨列合并; 5. 表格属性:如图
      • 1
      • 2
      • 3
      • 4
      • 5

    在这里插入图片描述

    • 列表标签:
      主要是用来布局,整洁,整齐; 根据场景不同可分为三大类,有序列表,无序列表和自定义列表

      • 无序列表ul:
      1. 基本语法: 
      • 列表项
      • 列表项2
      2. 基本规范: ul只可以放li标签,li标签对内容无限制,相当于容器,可以容纳所有元素
      • 1
      • 2
      • 有序列表ol: 列表排序以数字显示,其他与无序列表一致
      • 自定义列表dl:经常用于对术语和名称进行解释和描述;
      3. 基本语法: 
      4. 基本规范:dl只能包含dt和dd标签,
      • 1
      • 2
    • 表单标签:
      表单的主要目的是为了收集用户信息,与用户交互的;

      • 表单的组成: 一个完整的表单通常有表单域,表单控件(元素),提示信息等‘’
      表单域是一个包含表单元素的区域,主要使用form标签定义;
      表单元素是允许用户输入或选择的内容控件;主要有input,, select,textarea等表单元素
       
      表单中lable标签为input元素定义标注,用于绑定表单元素,浏览器会自动聚焦到指定元素;
      用户名 
      
      select是下拉列表:语法规范如下
      
      
      textarea数文本域标签,定义多行文本,在输入内容较多的情况下使用。
      语法规范如下:
      默认值 
      
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17

      在这里插入图片描述
      在这里插入图片描述

  • 相关阅读:
    如何使用VSCode将iPad Pro转化为功能强大的开发工具?
    Vue快速入门
    【Linux】awk入门
    ASP.NET DataBinder.Eval与 Eval
    2018年亚太杯APMCM数学建模大赛B题人才与城市发展求解全过程文档及程序
    vscode的快捷键
    linux挖矿病毒kthreaddk横行,如何灭掉它?
    WebDAV之葫芦儿·派盘+静读天下
    kafka分布式安装部署
    如何高效操作DOM
  • 原文地址:https://blog.csdn.net/weixin_42551921/article/details/126545386