一 HTML 入门

1.1 HTML&CSS&JavaScript 的作用

HTML 主要用于网页主体结构的搭建

CSS 主要用于页面元素美化

JavaScript 主要用于页面元素的动态处理

1.2 什么是 HTML

HTML 是 Hyper Text Markup Language 的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容

HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。2014 年 10 月 28 日，W3C 发布了 HTML5 的最终版。

1.3 什么是超文本

HTML 文件本质上是文本文件，而普通的文本文件只能显示字符。但是 HTML 技术则通过 HTML 标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

1.4 什么是标记语言

说 HTML 是一种『标记语言』是因为它不是像 Java 这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO 等等这些功能。HTML 很简单，每个标签都有它固定的含义和确定的页面显示效果。

HTML is a very popular fore-end technology.

这个例子中使用了一个 p 标签来定义一个段落，

叫 开始标签，

叫 结束标签 。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫 文本标签体 ，也简称： 标签体。

show detail

href=” 网址 ” 就是属性，href 是属性名，” 网址 ” 是属性值

1.5 HTML 基础结构

1 文档声明

• HTML 文件中第一行的内容，用来告诉浏览器当前 HTML 文档的基本信息，其中最重要的就是当前 HTML 文档遵循的语法标准。这里我们只需要知道 HTML 有 4 和 5 这两个大的版本

• HTML4 版本的文档类型声明是：

 
 
 
 
 2 根标签
 
 
 
 
 
 3 头部元素
 
 
 
 
 
 4 主体元素
 
 
 
 
 
 5 注释
 
 
 

1.6 HTML 的入门程序

第一步 准备一个纯文本文件, 拓展名为 html


第二步 使用记事本打开网页, 在网页内开发代码

     
    
  
  
    hello html!!!
  

第三步 使用浏览器打开文件, 查看显示的内容

1.7 HTML 概念词汇解释

标签



代码中的一个  叫做一个标签, 有些标签成对出现, 称之为双标签, 有些标签单独出现, 称之为单标签



属性


文本


元素

1.8 HTML 的语法规则


1 根标签有且只能有一个


2 无论是双标签还是单标签都需要正确关闭


3 标签可以嵌套但不能交叉嵌套


4 注释语法为 , 注意不能嵌套


5 属性必须有值，值必须加引号,H5 中属性名和值相同时可以省略属性值


6 HTML 中不严格区分字符串使用单双引号


7 HTML 标签不严格区分大小写, 但是不能大小写混用


8 HTML 中不允许自定义标签名, 强行自定义则无效


1.9 开发工具 VsCode 的安装和使用


前端工程师“Front-End-Developer”源自于美国。大约从 2005 年开始正式的前端工程师角色被行业所认可，到了 2010 年，互联网开始全面进入移动时代，前端开发的工作越来越重要。


最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。


在日本和一些人口比较稀疏的国家，例如加拿大、澳大利亚等，流行“Full-Stack Engineer”，也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外，有的公司从产品设计到项目开发再到后期运维可能都是同一个人，甚至可能还要负责 UI、配动画，也可以是扫地、擦窗、写文档、维修桌椅等等。


而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确，整个项目开发分为前端、中间层和后端三个开发阶段，这三个阶段分别由三个或者更多的人来协同完成。国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。


PRD（产品原型 - 产品经理）– PSD（视觉设计 -UI 工程师）– HTML/CSS/JavaScript（PC/ 移动端网页，实现网页端的视觉展示和交互 - 前端工程师）


前端工程师比较推崇的一款开发工具就是 visual studio code, 下载地址为:Visual Studio Code – Code Editing. Redefined


安装过程比较简单, 一路 next, 注意安装路径不要有中文, 空格和特殊符号即可

2 安装插件



Auto Rename Tag 自动修改标签对插件


Chinese Language Pack 汉化包


HTML CSS Support HTML CSS 支持


Intellij IDEA Keybindings IDEA 快捷键支持


Live Server 实时加载功能的小型服务器


open in browser 通过浏览器打开当前文件的插件


Prettier-Code formatter 代码美化格式化插件


Vetur VScode 中的 Vue 工具插件


vscode-icons 文件显示图标插件


Vue 3 snipptes 生成 VUE 模板插件


Vue language Features Vue3 语言特征插件



3 准备工作空间



设置字体: 齿轮>search>搜索 “ 字体大小 ”


设置字体大小可以用滚轮控制: 齿轮>设置>搜索 “Mouse Wheel Zoom”


设置左侧树缩进: 齿轮>设置>搜索 “ 树缩进 ”


设置文件夹折叠: 齿轮>设置>搜索 “compact” 取消第一个勾选


设置编码自动保存: 齿轮> 设置> 搜索 “Auto Save” , 选择为 ”afterDelay”


1.10 在线帮助文档
http://www.w3school.com.cn
二 HTML 常见标签
2.1 标题标签

标题标签一般用于在页面上定义一些标题性的内容, 如新闻标题, 文章标题等, 有 h1 到 h6 六级标题

   
一级标题
  
二级标题
  
三级标题
  
四级标题
  
五级标题
  
六级标题
2.2 段落标签

段落标签一般用于定义一些在页面上要显示的大段文字, 多个段落标签之间实现自动分段的效果

   

    记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近 30%，算力规模排名全球第二。  
  

    工信部统计显示，截至去年底，我国算力总规模达到 180 百亿亿次浮点运算 / 秒，存力总规模超过 1000EB（1 万亿 GB）。    国家枢纽节点间的网络单向时延降低到 20 毫秒以内，算力核心产业规模达到 1.8 万亿元。中国信息通信研究院测算，    算力每投入 1 元，将带动 3 至 4 元的 GDP 经济增长。  
  
 
    近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。    当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。  
2.3 换行标签

单纯实现换行的标签是 br, 如果想添加分隔线, 可以使用 hr 标签

     工信部统计显示，截至去年底，我国算力总规模达到 180 百亿亿次浮点运算 / 秒，存力总规模超过 1000EB（1 万亿 GB）。  

    国家枢纽节点间的网络单向时延降低到 20 毫秒以内，算力核心产业规模达到 1.8 万亿元。  

    中国信息通信研究院测算，算力每投入 1 元，将带动 3 至 4 元的 GDP 经济增长。
2.4 列表标签

有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征



列表标签 ol


列表项标签 li


代码



  
JAVA
  
前端
  
大数据



列表标签 ul


列表项标签 li


代码




  

JAVASE
  
JAVAEE
  
数据库


嵌套列表 列表和列表之前可以签到, 实现某一项内容详细展示


  

    JAVA
    

      
JAVASE
      
JAVAEE
      
数据库
    
  
  
前端
  
大数据


点击后带有链接跳转的标签 , 也叫作 a 标签

   
 相对路径本地资源连接 

 绝对路径本地资源连接 

 外部资源链接 

  
2.6 多媒体标签

img(重点) 图片标签, 用于在页面上引入图片




audio 用于在页面上引入一段声音

   
 

video 用于在页面上引入一段视频

   
 
2.7 表格标签(重点)

常规表格



table 标签 代表表格


thead 标签 代表表头 可以省略不写


tbody 标签 代表表体 可以省略不写


tfoot 标签 代表表尾 可以省略不写


tr 标签 代表一行


td 标签 代表行内的一格


th 标签 自带加粗和居中效果的 td


   
员工技能竞赛评分表
  
    
      
      
      
    
    
      
      
      
    
    
      
      
      
    
    
      
      
      
    
  




排名

姓名

分数




1

张小明

100




2

李小东

99




3

王小虎

98



单元格跨行

   
员工技能竞赛评分表
  
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
    
    
      
      
      
    
  




排名

姓名

分数

备注




1

张小明

100


        前三名升职加薪

      




2

李小东

99




3

王小虎

98



单元格跨行

   
员工技能竞赛评分表
  
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
    
    
      
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
  




排名

姓名

分数

备注




1

张小明

100


        前三名升职加薪

      




2

李小东

99




3

王小虎

98




总人数

2000




平均分

90




及格率

80%


2.8 表单标签(重点)

表单标签, 可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一



form 标签, 表单标签, 其内部用于定义可以让用户输入信息的表单项标签


action, form 标签的属性之一, 用于定义信息提交的服务器的地址


method, form 标签的属性之一, 用于定义信息的提交方式


get get 方式, 数据会缀到 url 后, 以? 作为参数开始的标识, 多个参数用 & 隔开


post post 方式, 数据会通过请求体发送, 不会在缀到 url 后






input 标签, 主要的表单项标签, 可以用于定义表单项


name, input 标签的属性之一, 用于定义提交的参数名


type, input 标签的属性之一, 用于定义表单项类型


text 文本框


password 密码框


submit 提交按钮


reset 重置按钮






代码


 

    用户名  

    密   码  

    

    

 
2.9 常见表单项标签(重点)

单行文本框

个性签名：


密码框

密码：


单选框

你的性别是：男
女


说明


name 属性相同的 radio 为一组，组内互斥


当用户选择了一个 radio 并提交表单，这个 radio 的 name 属性和 value 属性组成一个键值对发送给服务器


设置 checked=”checked” 属性设置默认被选中的 radio


如果属性名和属性值一样的话，可以省略属性值，只写 checked 即可





复选框

你喜欢的球队是：巴西
德国
法国
中国
意大利

下拉框

你喜欢的运动是：
  游泳
  跑步
  射击
  溜冰



说明


下拉列表用到了两种标签，其中 select 标签用来定义下拉列表，而 option 标签设置列表项。


name 属性在 select 标签中设置,value 属性在 option 标签中设置。


option 标签的标签体是显示出来给用户看的，提交到服务器的是 value 属性的值。


通过在 option 标签中设置 selected=”selected” 属性实现默认选中的效果。





按钮

普通按钮  或
重置按钮  或
提交按钮  或


说明


普通按钮: 点击后无效果，需要通过 JavaScript 绑定单击响应函数


重置按钮: 点击后将表单内的所有表单项都恢复为默认值


提交按钮: 点击后提交表单





隐藏域



多行文本框

自我介绍：

文件标签

头像:
2.10 布局相关标签

div 标签 俗称 ” 块 ”, 主要用于划分页面结构, 做页面布局


span 标签 俗称 ” 层 ”, 主要用于划分元素范围, 配合 CSS 做页面元素样式的修饰

  

    

      页面开头部分
    
 
    

      页面中间部分
    
 
    

      页面结尾部分
    
 
  
2.11 特殊字符

对于有特殊含义的字符, 需要通过转移字符来表示

    

  尚 硅 谷 

  &