HTML-网页基础知识, HTML标签

目录

一.网页基础知识

1.网页组成:

2.网页背后本质

3.浏览器

4.渲染引擎(浏览器内核)

5.Web标准

二.HTML

1.概念

2.HTML骨架结构

3.语法

(1)注释

(2)标签结构

(3)标签关系

三.标签

1.排版标签

2.文本格式化标签

3.媒体标签

(1)路径

(2)图片标签 

(3)音频标签 

(4)视频标签 

(5)链接标签 

​4.列表标签

(1)应用场景

(2)无序列表

(3)有序列表

(4)自定义列表

 5.表格标签

(1)应用场景

(2)表格标签

(3)表格标题及表头单元格标签

(4)合并单元格

 6.表单标签

(1)input标签 

(2)常用表单控件

(3)按钮标签

(4)下拉菜单标签

(5)文本域标签

(6)label标签

(7)布局标签

(8)字符实体

案例:  小m的信息页 

一.网页基础知识

1.网页组成:

        文字, 图片,音频, 视频,超链接

2.网页背后本质

        前端程序员写的代码 (通过浏览器的转化(渲染和解析)成用户看到的网页)

3.浏览器

        网页显示,运行的平台, IE,Firefox,Chrome,Safari(苹果电脑自带), Opera欧朋

4.渲染引擎(浏览器内核)

         浏览器中专门对代码进行解析渲染的部分 .   浏览器出品的公司不同,内在渲染引擎也不同,导致解析相同代码时,速度,性能,效果也不同.

5.Web标准

• 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异 
• Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一

二.HTML

1.概念

Hyper Text Markup Language  文本标记语言.    专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

简单创建方式: 文本文件-->后缀.html

2.HTML骨架结构

标签:

• html标签   网页的整体
• head标签  网页的头部
• body标签  网页的身体
• title标签    网页的标题

开发工具: 注重开发效率和便捷性

Visual Studio Code(速度快、体积小、插件多), Webstorm, Sublime, Dreamweaver, Hbuilder

!+tab (.html)----自动生成结构标签

alt+b / 右击+Open in Default Browser  ---- 快速查看网页效果 

3.语法

(1)注释

• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释                                         ctrl + /

(2)标签结构

• 标签由<、>、/、英文单词或字母组成.并且把标签中<>包括起来的英文单词或字母称为标签名
• 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
• 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

(3)标签关系

a.父子关系(嵌套)

b.兄弟关系(并列)

三.标签

1.排版标签

• 标题标签  1~6级 文字均加粗,变大   独占一行

• 段落标签    段落间存在间隙     独占一行

• ---

  水平线标签     分割不同主题内容的水平线  主题的分割转换 单标签,页面中显示一条水平线

2.文本格式化标签

 单词  突出重要性的强调语境              都没有换行

3.媒体标签

(1)路径

绝对路径: 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

相对路径 * :  从当前文件出发找目标文件       

• 同级:   同一文件夹       ./ 文件名+后缀 或 直接文件名+后缀
• 下级:   目标文件在下级目录中  下级文件夹/文件名+后缀
• 上级:    ../文件名+后缀名

(2)图片标签 

• 标签的属性写在开始标签内部, 标签上可以同时存在多个属性, 属性之间以空格隔开, 标签名与属性之间必须以空格隔开, 属性之间没有顺序之分

属性名,属性值:

• src 目标图片的路径     同一文件夹:图片名    不同文件夹
• alt  替换文本  图片加载失败时显示
• title  提示文本  鼠标悬停时显示  此属性也可用于其他标签
• width  图片宽度  height  图片高度    二者定义其一即可,等比例缩放 

(3)音频标签 

• controls属性: 显示播放的控件  ①autoplay  自动播放(部分浏览器不支持)     ②loop 循环播放
• MP3、Wa v 、Ogg 格式

(4)视频标签 

• controls属性:  ①autoplay  谷歌浏览器中需配合muted实现静音自动播放   ②loop 循环播放
• MP4 ,WebM, Ogg 格式

(5)链接标签 

超链接

• 跳转网页用地址, 本机连接用路径即可,      自带颜色的标签         # 表空链接
• target 属性:   _self 默认值,在当前窗口中跳转(覆盖原网页)   _blank 新窗口跳转,保留原网页

4.列表标签

(1)应用场景

• 场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
• 特点：按照行的方式，整齐显示内容
• 种类：无序列表、有序列表、自定义列表

(2)无序列表

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

显示特点: 列表每一项前默认显示圆点标识

•    无序列表整体,用于包裹li标签    只允许嵌套
   无序列表中的每一项, 用于包含每一行内容   可包含任何内容

(3)有序列表

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

显示特点: 列表每一项前默认序号标识

•    有序列表整体,用于包裹li标签    只允许嵌套
      有序列表中的每一项, 用于包含每一行内容   可包含任何内容

(4)自定义列表

在网页的底部导航中通常会使用自定义列表实现。

显示特点： dd前会默认显示缩进效果

•   自定义列表整体,包裹dt/dd   只允许嵌套dt/dd标签
•   自定义列表主题   可包含任何内容
•   自定义列表针对主题每一项内容   可包含任何内容

 5.表格标签

(1)应用场景

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

(2)表格标签

•   表格整体,可用于包含多个tr
•        每一行, 包裹td
•     单元格, 包裹内容

相关属性

设置表格基本展示效果, 实际开发样式效果推荐CSS设置

e.g: 

• border  属性值:数字   边框宽度
• width   表格宽度
• height  表格高度

(3)表格标题及表头单元格标签

在表格中表示整体大标题和一列小标题

• thead  表格头部(如第一行)
• tbody 表格主体
• tfoot  表格底部(如最后一行)

(4)合并单元格

将水平或垂直多个单元格合并成一个单元格

• rowspan 合并个数  跨行合并  垂直合并成一个
• colspan  合并个数  跨列合并  水平合并成一个

注意:

• 明确合并哪些单元格, 通过左上原则，确定保留谁删除谁(上下合并→只保留最上的，删除其他;               左右合并→只保留最左的，删除其他)
• 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot）

 6.表单标签

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

(1)input标签 

通过type属性值的不同，展示不同效果 e.g: 不换行

(2)常用表单控件

• 输入单行文本表单控件:  placeholder  占位符, 提示用户输入内容的文本   type="text"
• 多选一的单选表单控件:  name 分组,相同属性值单选框为一组,同时只能有一个被选中   checked默认选中   type="radio"
• 文件选择表单控件: multiple 多文件选择   type="file"

(3)按钮标签

input标签

button标签     包裹文字,图片等

属性值:

• submit    提交按钮,点击之后提交数据给后端服务器
• reset 重置按钮 点击之后恢复表单默认值
• button 普通按钮 默认无功能,之后配合js添加功能

(4)下拉菜单标签

   下拉菜单整体

  下拉菜单的每一项

selected 属性  下拉菜单中的默认选中

(5)文本域标签

  提供可输入多行文本的表单控件,自动换行

属性: cols 宽度       rows 行数

右下角可拖拽改变大小, 实际开发样式效果推荐CSS

(6)label标签

常用于绑定内容与表单标签的关系 

使用方法①：男

• 使用label标签把内容（如：文本）包裹起来
• 在表单标签上添加id属性
• 在label标签的for属性中设置对应的id属性值

使用方法②： 女

• 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
• 需要把label标签的for属性删除即可

(7)布局标签

①没有语义的布局标签

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

一行只显示一个(独占一行)

一行可显示多个

②有语义的布局标签

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用,此处标签显示特点和div一致，但是比div多了不同的语义 

(8)字符实体

案例:  小m的信息页 

           
  -->

                                                                                  

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！