HTML极简入门学习
发布日期:2022-02-15 02:36:22 浏览次数:0 分类:技术文章

本文共 8389 字,大约阅读时间需要 27 分钟。

HTML入门学习

前言

Web诞生

Internet

中文正式译名为因特网,又叫作国际互联网,是由所有使用公共语言互相通信的计算机连接而组成的全球网络。

起源发展

20世纪60年代美国国防部高级研究计划局(ARPA)建设了一个军用网,叫做“阿帕网”(ARPAnet),于1969年正式启用。、

1992年,美国IBM、MCI、MERIT三家公司联合组建了一个高级网络服务公司(ANS),建立了一个新的网络,使Internet开始商用化。

WWW(万维网)

WWW是World Wide Web的缩写,也可以写为W3,中文名为万维网。是集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在WWW中搜索和浏览自己感兴趣的所有信息。

Web开发介绍

Web开发分为前端开发与后端开发,在以前是不区分前后端的,前后端的相互独立开发减少了业务难度,也使得后端的错误不会直接反映到前端。

前端开发

前端指的是直接与用户接触的网页,网页上通常有HTML、CSS、Javascript等内容。

后端开发

后端指的是程序、数据库和服务器层面的开发。

Web开发的标准

Web应用开发需要遵循的标准就叫Web标准,这里Web标准是一系列标准的集合。
网页主要由三部分组成:结构标准(XMLHTMLXHTML),表现标准(CSS),行为标准(DOMJavascrip)。

HTML

HTML用来构成网页的内容,内容就是网页制作者放在页面上想让用户浏览的信息,例如文字、图片、视频等等,简单来说就是用来定义网页的内容。

CSS

CSS决定网页样式的展现,也就是网页的外观。

JavaScript

JavaScript定义网页上的交互,控制网页的行为。

开发工具

开发工具可以使用微软的VScode,它具有丰富的插件,能够快速进行开发。

在这里插入图片描述

HTML发展史

HTML概念

HTML又叫做超文本标记语言,用来构建网页的一种标记语言

HTML历史

  • 1993年由互联网工程工作小组(IETF)发布工作草案1995年发布HTML2.0版本

  • 1997年1月14日由W3C发布HTML3.2版本

  • 1997年12月18日由W3C发布HTML4.0版本

  • 1999年由W3C发布HTML4.01版本

  • 2000年由W3C发布XHTML1.0版本,它是一种更严格的HTML代码

XHTML

XHTML是可扩展超文本标记语言,是一种更加严格、更加纯净的HTML语言。

XHTMLHTML的区别

  • XHTML元素必须被正确地嵌套

  • XHTML元素必须被关闭

  • 标签名必须用小写字母

  • XHTML文档必须拥有根元素

HTML语义化

HTML5中新增加了很多语义化标签,不同的HTMI标签代表了不同的网页内容。

语义化 优势

  • 语义化HTML会使HTML结构变的清晰,有利于代码的维护

  • 有利于搜索引擎抓取

  • 语义化使代码仍具可读性

  • 语义化会使HTML代码变得更简洁,提高页面加载速度

  • 语义化有助于屏幕阅读器等设备的识别

HTML初识

HTML标签

单标签

单标签:只有一个标签就能表达完整的含义

例如:<input/>``<img/>

反斜线不用写标签也是可以被渲染出来的,

双标签

双标签:由开始标签和结束标签一起组成

例如:<div></div>``<span></span>

元素

一对标签包含的所有内容,其中元素的内容是指开始标签和结束标签之间的内容。

例如:<div>Hello World</div>

属性

标签可以有很多属性,属性总是在开始标签中定义,而且是以名值对的形式出现,其中属性值以双引号包裹。

例如:<img alt="示例图片"/>

一个简单的页面

   
      
    
       
     
        
      简单尝试  
      
Hello World!

在这里插入图片描述

HTML常用标签

基本结构

   
        
   

如上代码是HTML的一个基本结构,<!DOCTYPE html>HTML5的文档声明标签,表示这个文档是HTML5的文件,html对大小写并不敏感,即使用大写的代码也会最终当作小写进行处理的,但是为了代码的规范,除了声明标签,其它的html标签均使用小写。

<html></html>html的根标签,lang=en表示这个页面是英文的,<html></html>标签中包含着<head></head><body></body>标签,<head></head>中可以包含这个文档编码方式、标签名和这个文档的层叠样式和JS等内容。

  
   
      
    Document
   

<meta charset="UTF-8">表明这个页面的编码方式是UTF-8<title>Document</title>表示这个页面的标签名是Document,最终会反映到浏览器渲染的页面上。

在这里插入图片描述

<body></body>中定义整个页面的内容。

我们可以在编辑器中保存我们所写的页面为HTML文件(后缀名为.html),然后通过浏览器打开,也可以凭借VScode丰富的插件来打开文件,有关VScode的插件用法可以在网上查阅相关信息。

标题标签

   
      
    
       
     
        
      Document  
      

标题1

  

标题2

  

标题3

  

标题4

  
标题5
  
标题6

在这里插入图片描述

之后的代码将不给出完整代码,只给出必要代码。

<h1>~<h6>标签就好比在word里写段落时的段落标题的级别,h1是最高的级别,也会被渲染成字体最大的级别。被包裹在标签内的是它的文本内容,最终会被浏览器渲染出来。

段落标签

有段落标题自然会有段落,段落标签使用的是<p></p>,同样标签内包裹文本内容,

Lorem ipsum dolor sit amet consectetur adipisicing elit.  Ex, aperiam pariatur beatae reiciendis saepe dolore vero  ratione molestiae sint eligendi ab odit veniam unde facere  provident explicabo rem? Earum, odio!

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

需要注意的是,标签里的文本内容会依据浏览器的大小自动折行(实际上文本内容是依据标签大小折行的,而标签大小则依据浏览器视口大小),这也是html的优势。

div标签与span标签

如果说有最基本的元素,那么<div>标签可以算作基本标签,<div> 可定义文档中的分区或节(division/section)。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

<div>标签是一个块级标签,可以作为一个容器包裹其它元素进行使用。

<span>标签是一个内联标签,用在一行文字中。

   
Hello
World
HelloWorld!

在这里插入图片描述

上述代码渲染成的页面如上图所示,可以看到<div>在默认情况下一个标签占据浏览器一行,并且高度由内部文本内容决定,而<span>默认时,高度由文本内容决定,宽度也由内部文本内容决定,可以在浏览器内按F12详细查看这两个标签的信息:

在这里插入图片描述

通过div就能将页面内容划分开,再配合css层叠样式就能得到想要的页面效果。

链接

在一个网页中经常存在一段文字或图片点击时就能跳转到其它页面,这就是通过<a>标签做到的效果。

   
      
    点击访问百度
   

在这里插入图片描述

a标签内包裹着span标签,span内是我们想要通过点击它就能跳转的文字。

a标签内的href属性可以指定我们要跳转的页面,上述是百度官网。a标签还含有一个target属性,默认的值是_self,表示如果点击链接那么会在当前窗口打开链接,还可以设置成_blank表示在新窗口中打开链接。

图片标签

图片标签使用<img/>来表示,它有两个基本属性,一个是src,代表图片地址,一个是alt,表示图片无法显示时的替代文本。

src属性可以使用相对路径,也可以用绝对路径。

   

以上所使用的就是绝对路径。因为html文件最终会部署到服务器内,所以使用类似./../这个方式是可以遍历到以当前文件为起点的其它文件的,例如,./hello.txt访问的是同级目录中的hello.txt文件,而./../hello.txt访问的是父级目录中的hello.txt文件,其它有关相对路径知识请自行百度解决,此处不再赘述。

还可以为img设置title属性,当鼠标悬浮在图片上方时,会显示设置的title内容。

列表

在word中经常可以通过项目符号在一个个项目前添加符号,在html中也有列表标签<li>来达到相似的效果。

有序列表

   
      
  1. 项目1
  2.   
  3. 项目2
  4.   
  5. 项目3
  6.   
  7. 项目4
  8.   
  9. 项目5
  10.   
  11. 项目6
  12.   
  13. 项目7

在这里插入图片描述

如上代码所示,有序列表用<ol>标签去包裹列表中的每一项内容<li>,被浏览器渲染出来时,列表中的每一项默认以数字开头排序。

<ol>中设置type属性可以更改以数字作为开头的列表排序方式,比如设置type='a'就能以小写英文字母作为排序规则。

   
      
    
  • 项目1
  •   
  • 项目2
  •   
  • 项目3
  •   
  • 项目4
  •   
  • 项目5
  •   
  • 项目6
  •   
  • 项目7
  • 在这里插入图片描述

    无序列表

    无需列表用<ul>来包裹列表中的每一项目,它默认被浏览器渲染出来的效果是列表的每一项前都有一个黑色的圆点。

       
        
    • 项目1
    •   
    • 项目2
    •   
    • 项目3
    •   
    • 项目4
    •   
    • 项目5
    •   
    • 项目6
    •   
    • 项目7

    在这里插入图片描述

    同样的,ol也可以通过设置type来设置排序的样式,type=square时,渲染出来的效果是每一项前都有一个黑色方块。

    自定义列表

       
      
    项目标题a
      
    项目a.1
      
    项目a.2
      
    项目a.3
      
    项目a.4
      
    项目a.5
      
    项目标题b
      
    项目b.1
      
    项目b.2
      
    项目b.3
      
    项目b.4
      
    项目b.5

    在这里插入图片描述

    如上是自定义列表的基本结构。

    <dl>标签用来表示自定义列表,被它包裹的dt标签是自定义列表的标题标签,dd是每一项自定义列表的内容。

    dl是description list的缩写,dtdescription title的缩写,dd是description definition的英文缩写,在了解英文语义时,就能很方便的进行记忆。

    表格

    表格的基本内容:










                        
    表格标题
    表头1 表头2 表头3
    表格内容1 表格内容2 表格内容3
    表格内容1 表格内容2 表格内容3

    在这里插入图片描述

    以上会被渲染出没有边框的表格出来,<table>标签表示接下来的区域是表格内容。

    <caption>标签定义表格的标题,<tr>标签表示一行表格的内容,<th>定义表格的表头内容,而<td>则定义出表格基本单元格内容。

    为了增添表格的语义化,增加<thead><tbody><tfoot>标签(实际上不仅仅为了语义化,还有方便网页对整个表格的加载):










                        
    表格标题
    表头1 表头2 表头3
    表格内容1 表格内容2 表格内容3
    表格内容1 表格内容2 表格内容3

























                                                                     
    表格标题
    公司名称资金税务
    甲公司1300300
    乙公司1700300
    丙公司2010400
    总计50101000

    在这里插入图片描述

    tr是table row的英文缩写,表示表格中的行;
    th是table head的英文缩写,表示表头;
    td是table data的英文缩写,表示表格中的基本单元格。

    表格属性

    在这里插入图片描述

    对于如上这样有着合并跨越、并且还含有居左对齐和顶端对齐的表格,接下来我们将单纯依靠html的属性来完成。

       
          
        
    a
    b    
    c    
    1
    4
    d    
    2
    5    
    3
    6  

    在这里插入图片描述

    如上,设置单元格合并跨越是通过为td标签设置rowspancolspan属性达到的,rowspan是要跨越合并的行的数目,colspan则是列的数目。对齐方式则通过alignvalign完成,align是水平对齐方式,valign是列对齐方式`。

    表格的边框则通过为table设置border属性以达到。

    以上是通过html的属性做出的表格效果,但是建议将表格效果通过css达到,html应当更多地偏重于页面结构地设置与语义化。

    表单

    定义表单结构使用<form></form标签,如下是一个表单的基本结构:

       
          
        
    输入框:

    在这里插入图片描述

    <input/>标签被渲染的结果是一个文本输入框。

    form中含有的action属性表示的是这个表单要被提交到的地址,method表示文件被提交的方式,被提交的方式一般有两种:postget

    input的相关属性

    input元素中的type='text'出现一个输入框,当input中含有一个属性required时,表示该输入框中一定要输入内容,否则按提交按钮时无法提交。

       
          
        
    输入框:
      

    在这里插入图片描述

    input中设置了readonly属性时,表示输入框中已经设置的value值不可通过输入更改,在提交时,value值会提交到后台;如果给input设置了disabled,也能达到readonly只读的效果,但不会把value值提交到后台中。

    input中设置palceholder表示设置一个"提示信息",该"提示信息"文本内容,在输入框获得焦点时隐藏起来。

       

    在这里插入图片描述

    inputhidden表示将输入框隐藏起来,但在提交信息时,依然会被提交(看不见,但是存在)。

    inputpattern可以为input设置一个正则表达式,用于javascript来验证input的输入内容是否符合正则的格式。

    input的type属性用途

    input标签中的type决定了input的用途。

    数字输入框

    type=number表示要求输入框内的值是数字;

       
    数字:

    在这里插入图片描述

    密码输入框

    type=password表示输入的内容会以黑点隐藏起来,

       
    密码:

    在这里插入图片描述

    email输入框

    type=email要求输入框内的内容符合email格式;

    url输入框

    type=url要求输入框内的内容符合url格式;

    提交按钮

    type=submit时,输入框变成一个按钮

       
          
        
    输入框:
      

    在这里插入图片描述

    它用于向表单的action提交表单的内容。

    重置按钮

    type=submit类似的还有type=reset,它与submit一样根据value属性渲染出按钮内容,如果按这个按钮会将输入框的内容重置。

    搜索框

    inputtype设置成search会出现搜索框,我们进行搜索时一般会留有搜索历史,如果不想显示搜索历史,只需将searchinput中添加autocomplete="off"即能关闭搜索历史。

       
          
        


       橘子
       苹果
       香蕉
      

    在这里插入图片描述

    该搜索框采用了自定义的数据源<datalist></datalist><option>标签内使用的是每一项数据。

    文件上传

    input中的type属性设置成file表示上传文件,文件格式用accept属性进行限制,例如要求上传"jpg"或者"png"格式文件时,accept设置成accept=.jpg,.pngaccept可以接收多种文件格式,文件拓展名以逗号隔开;在input内使用multiple,同时name属性设置的值后面加上"[]",可以同时上传多个文件。

       

    单选按钮

       
          
        
         
    男    
    女  

    在这里插入图片描述

    这个单选按钮的设置关键在于要将多个选项的name属性设为一致,另外就是为单选按钮设置checked时,它会默认被选中。

    设置label标签的优点在于,被点击label包裹的所有内容(包括文本内容),它都会指向label标签中for属性对应id值(意思是for等于号右边的是一个标签的id)。

    多选按钮

       
        
         12岁
         
          
           13岁
          
         
        
       

    在这里插入图片描述

    radio类似,不过name="program[]"中的program[]像是一个数组(或者列表),实际上checkboxvalue被点击后确实会被添加进这个数组(或者列表),表单提交后会传进后台。

    其它相关表单元素

    文本域

    textarea文本域,rows控制行数,cols控制列数,textarea设置默认值时不能使用value值,可以直接用代码块包裹默认值。

       
        默认值
       

    在这里插入图片描述

    下拉列表

    select用于设置下拉列表,option表示设置可以选择的子选项,option中设置一个selected表示该选项默认被选中。

       
          
        
         
    默认被选中
    新闻
    游戏  

    在这里插入图片描述

    转载地址:https://blog.csdn.net/PeZXO/article/details/106786644 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

    上一篇:EPC-事件驱动的流程链(转载)
    下一篇:JavaScript闭包

    发表评论

    最新留言

    网站不错 人气很旺了 加油
    [***.208.126.232]2022年08月14日 11时40分32秒

    关于作者

        喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
    -- 愿君每日到此一游!

    最新文章

    福尔曼大学计算机排名,留学选校指南|纽约时报2019美国精英群体认可的大学榜单Top50... 2020-01-10 11:49:27
    win7计算机sid,如何修改新萝卜家园win7系统电脑sid 2020-01-10 11:49:27
    计算机老师实践课程名称,计算机教师 2020-01-10 11:49:27
    dnfdpl服务器维护了,魔兽世界TBC:地狱火半岛隐藏的“大恐怖”,魔能机甲成双出没!... 2020-01-10 11:49:27
    vc 客户端服务器端不显示,vc 客户端服务器程序 2020-01-10 11:49:27
    win7做服务器性能如何,win7如何做服务器配置 2020-01-10 11:49:27
    计算机器件及设备毕业设计论文,毕业设计(论文)开题报告-基于单片机与串口的计算机称重设备.doc... 2020-01-10 11:49:26
    中飞院计算机学院毕业后侍遇,【毕业季·计算机学院】年华在指间流动,出门已是江湖... 2020-01-10 11:49:26
    Java捕获超时错误,获取java.io.IOException:读取失败,套接字可能关闭或超时,通过蓝牙打印机打印时读取ret:-1... 2020-01-10 11:49:26
    java的优缺点 以及它用于什么,Java中的接口 - 它们用于什么? 2020-01-10 11:49:26
    一级计算机考试计算,全国计算机一级MS OFFICE等级考试计算题(3) 2020-01-10 11:49:26
    hardware计算机专业英语翻译,hardware是什么意思中文翻译 2020-01-10 11:49:25
    vocab.com app android,Vocabulary.com 2020-01-10 11:49:25
    韶关学院计算机专插本专业怎么样,2020年韶关学院专插本各专业计划人数和报考人数情况分析... 2020-01-10 11:49:25
    西北工业太学计算机科学与技术周世钢,周世钢_西北工业大学研究生导师信息... 2020-01-10 11:49:25
    电子计算机管理应用,电子计算机在企业管理中的应用研究分析原稿(全文完整版)... 2020-01-10 11:49:25
    计算机组成原理八位全加器,8位全加器-课程设计 2020-01-10 11:49:25
    计算机考研能换专业吗,我本科学的是计算机专业,现在想考研,但是想换一个适合自己的专业,和教育方面有关的专业,请问有什么好专业能选择的么?... 2020-01-10 11:49:25
    从S3获取数据在html表示,javascript – 显示从s3获取的图像 2020-01-10 11:49:25
    Android手机按键不灵,手机按键不灵怎么办 手机按键修改教程【详细步骤】 2020-01-10 11:49:25