1.认识HTML

Zad • • 杂文

一、基础认知

目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建一个网页。

1.1 认识网页

（1）网页由哪些部分组成？
答：文字、图片、音频、视频、超链接
（2）咱们程序员的代码是通过什么软件转换成网页的？
答：浏览器

1.2.1 五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌（Chrome）、Safari浏览器、欧朋浏览器（Opera）

1.2.2 渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

1.3.1 为什么需要Web标准？

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

1.3.2 Web标准的构成

Web标准中分成三个构成：

构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等）
行为 JavaScript 网页模型的定义与页面交互

2.1.1HTML的概念

HTML中文译为：超文本标记语言

2.2.2HTML页面固定结构

HTML骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题


    
        网页标题
    
    
        网页的主体内容

2.3.1 为什么使用VS Code?

前端开发神器---速度快、体积小、插件多、完全免费
开发工具有很多：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

2.3.2 VS Code创建网页的步骤

（1）双击打开VS Code软件
（2）将代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
！+ 回车 HTML骨架
快捷键：Alt+B 打开默认浏览器

3.1.1 什么是注释？

问题：程序员在代码中添加的注释，是为了给谁看的？
答：下次的阅读代码者（自己或者其他程序员）
注释的快捷键：
在VS Code中：ctrl+/ (再按一次取消注释)

3.2.1 HTML标签的结构

1.标签的结构图：

文字要加粗
开头标签 包裹的内容 结束标签

2.结构说明

（1）标签<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母成为标签名
（2）常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
（3）少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
（需要确定开始位置、结束位置，一般是双标签；不需要确定开始位置、结束位置的为单标签）

3.4.1HTML标签与标签之间的关系可分为：

（1）父子关系（嵌套关系）

（2）兄弟关系（并列关系）

二、HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发

1、排版标签

1.1.1标题标签

1.代码：h系列标签

1级标签

2级标签

3级标签

4级标签

5级标签

6级标签

选中三个1 先选中1，ctrl+d两次

2.语义：1-6级标题，重要程度依次递减

3.特点：

  • 文字都有加粗
  • 文字都有变大，并且从h1/rightarrowh6文字逐渐减小
  • 独占一行

1.2.1段落标签

场景：在新闻和文章的页面中，用于分段显示
代码：

我是一段文字

语义：段落
特点：

  • 段落之间存在间隙
  • 独占一行
    ps:如果出现这种，查看-自动换行

1.3.1 换行标签

场景：让文字强制换行显示
代码：

语义：换行
特点：

  • 单标签
  • 让文字强制换行

1.4.1 水平线标签

场景：分割不同主题内容的水平线
代码：

语义：主题的分割转换
特点：

  • 单标签
  • 在页面中心显示一条水平线

2.1文本格式化标签的介绍

标签 说明
b 加粗
u 下划线
i 倾斜
s 删除线
标签 说明
strong 加粗
ins 下划线
em 倾斜
del 删除线

语义：突出重要性的强调语境（单词这组标签）

3、媒体标签

3.1.1 图片标签介绍

代码： （src=" "标签属性，src属性名，" "属性值）
场景：在页面中显示图片
特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置

3.1.2 属性注意点：

1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
路径：./是当前文件夹，可加可不加
3.1.3 图片标签的alt属性
属性名:alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

 这是一只猫

3.1.4 图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

这是一只猫

3.1.5 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当图片可能会变形

 
    这是一只猫

3.2.1 路径的介绍

场景：页面需要加载图片，需要先找到对应的图片
路径可分为：

（1）绝对路径

绝对路径指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：盘符开头：D：/day01/images/1.jpg
完整的网络地址：https://mini.eastday.com/nsa/n230412150949254.html?qid=02034

（2）相对路径（常用）

概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径的分类：
(1)同级目录

(2)下级目录

(3)上级目录
1.先出当前文件夹，到上级目录/rightarrow../
2.此时看到目标文件直接喊她/rightarrow直接写上目标文件

3.3.1 音频标签的介绍

代码：
场景：在页面中插入音频
常见属性：

属性名 功能
src 音频路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

3.4.1 视频标签
代码：
场景：在页面中插入视频
常见属性：

属性名 功能
src 视频路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop 循环播放

注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

4、链接标签

4.1 链接标签

代码：超链接（目标网址不确定，通常用#占位）
称呼：a标签、超链接、锚链接
场景：点击之后，从一个网页跳转到另一个网页
特点：双标签，内部可以包裹内容；
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

4.2链接标签的target属性

属性名：target
属性值：目标网页的打开形式

取值 效果
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）

index.html首页面

5、列表标签

目标：能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

5.1 无序标签

场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：

标签名 说明
ul 表示无序列的整体，用于包裹li标签
li 表示无序列的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容

    
        
  • 榴莲
    • 
        
  • 香蕉
    • 
        
  • 苹果
    •

运行结果：

5.2 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：

标签名 说明
ol 表示有序列表的整体，用于包裹标签
li 表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容

    
        
  1. 张三：100
    2. 
        
  2. 李四：99
    3.

运行结果：

5.3自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：

标签名 说明
dl 显示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对性主题的每一项内容

显示特点：dd前会默认显示缩进效果
注意点：
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意内容

 

        
帮助中心

        
账户管理

        
购物指南

运行结果：

6、表格标签

目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建

6.1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：

标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容

表格相关属性
场景：设置表格基本展示效果

6.2常见相关属性：

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

注意：实际开发时针对样式效果推荐用CSS设置

    
    

        

            姓名
            成绩
            评语
        

        

            小哥哥
            100分
            小哥哥真帅气
        

        

            小姐姐
            100分
            小姐姐真漂亮
        

        

            总结
            郎才女貌
            郎才女貌

运行结果：

6.3表格标题和表头单元格标签

场景：在单元格中表示整体大标题和一列小标题
其他标签：

标签名 名称 说明
caption 表示大标题 表示表格整个大标题，默认在表格整体顶部居中位置显示
th 表示单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）


        学生成绩单
        

            姓名
            成绩
            评语
        

        

            张三
            100分
            真棒，第一名
        

        

            李四
            99分
            真棒，第二名
        

        

            总结
            郎才女貌
            郎才女貌

运行结果：

6.4 表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
结构标签：

标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部

注意点：表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

6.5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
跨行合并（垂直合并成一个）
跨列合并（水平合并成一个）
合并单元格步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁

  • 上下合并/rightarrow只保留最上的，删除其他
  • 左右合并/rightarrow只保留最左的，删除其他

3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多行的单元格水平合并

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）


        学生成绩单
       
            

                姓名
                成绩
                评语
            

       
       
            

                张三
                100分
                真棒，第一名
            

            

                李四
                真棒，第二名
            

       
        
            

                总结
                郎才女貌

运行结果：

7、表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

7.1 input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input

  • input标签可以通过type属性值的不同，展示不同效果

type属性值：

标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，之后配合js添加功能 

    文本框：
    

    
    密码框：
    

    单选框：
    

    多选框：
    

    上传文件：

运行结果：

7.2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：

属性名 说明
placeholder 占位符，提示用户输入内容的文本

运行结果：

7.3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：

属性名 说明
name 分组，有相同name属性值的单选框为一组，一组中同时只能由一个被选中
checked 默认选中

注意点：name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

 性别：男 女

运行结果：

7.4input系列标签-文件选择

场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：

属性名 说明
multiple 多文件选择

7.5 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件
type属性值：

标签名 type属性值 说明
input submit 提交按钮，点击之后提交数据给后端服务器
input reset 重置按钮，点击之后恢复表单默认值
input button 普通按钮，默认无功能，之后配合js添加功能

注意点：如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
使用form标签之后，重置标签才有作用
value=" " 可以在按钮上显示文字


        用户名：
        

        

        密码：

运行结果：

7.6 buttom按钮标签

场景：在网页中显示用户点击的按钮
标签名：buttom
type属性值（同input的按钮系列）：

标签名 type属性值 说明
buttom submit 提交按钮，点击之后提交数据给后端服务器
buttom reset 重置按钮，点击之后恢复表单默认值
buttom buttom 普通按钮，默认无功能，之后配合js添加功能

注意点：谷歌浏览器中buttom默认是提交按钮
buttom标签是双标签，更便于包裹其他内容：文字、图片等

7.6select下拉菜单标签

场景：在网页中提供多个选项的下拉菜单表单控件
标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项

常见属性：
selected:下拉菜单的默认选中（不设置就默认选中第一个option）

7.7 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用CSS设置

7.8 label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
方法一：（1）使用label标签把内容（如：文本）包裹起来
（2）在表单标签上添加id属性
（3）在label标签的for属性中设置对应的id属性值
方法二：（1）直接使用label标签把内容（如：文本）和表单标签一起包裹起来
（2）需要把label标签的for属性删除即可

    性别：

8、语义化标签

目标：能够认识开发中常用的没有语义布局标签（div、span）和有语义的布局标签

8.1 没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

  • div标签：一行只显示一个（独占一行）
  • span标签：一行可以显示多个

    普通文字
    
这是div标签

    
这是div标签

    这是span标签
    这是span标签

运行结果：

8.2 有语义的布局标签（移动端 手机网页制作）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

注意：以上标签显示特点和div一致，但是比div多了不同的语义

8.3 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替换
结构：&英文;
常见字符实体：

显示结果 描述 实体名称
  空格  

综合案例1学生信息表：


    

        
优秀学生信息表格

        
            

                年级
                姓名
                学号
                班级
            

        
        
            

                高三
                张三
                110
                三年二班
            

            

                赵四
                120
                三年三班
            

        
        
            

                评语
                你们都很优秀

运行结果：

综合案例2表单：


    
青春不常在，抓紧谈恋爱

    

    

        昵称：
        
        

        

        性别：
        
        
        

        

        所在城市：
        
        

        

        婚姻状况：
        
        
        
        

        

        喜欢的类型：
        
        
        
        
        
        
        

        

        个人介绍：
        

        
        

        

        
我承诺

        
    
            
  • 年满18岁、单身
    • 
            
  • 抱着严肃的态度
    • 
            
  • 真诚寻找另一半
    • 
        

        我同意所有条款

运行结果：

版权声明：
作者：Zad
链接：https://www.techfm.club/p/46144.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>