html基础入门

目录

基础认知

web标准

HTML概念

HTML注释

HTML标题、段落

水平线标签

图片标签

基础认知

网页有哪些组成部分?

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

我们看到的网页背后的本质是什么？

前端程序员写的代码

程序员写的代码是通过什么软件转换成网页的？

浏览器

五大浏览器和渲染引擎

常见的五大浏览器

 浏览器：是网页运行、显示的平台，是前端开发的必备利器

渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器 内核
IE Triden IE、猎豹安全、360极速浏览器、百度浏览器
FireFox Gecko 火狐浏览器内核
Safari webkit 苹果浏览器内核
Chrome/Opera Blink Weblink分支

注意点：渲染引擎不同，导致解析相同的代码时的速度、性能、效果也不相同

web标准

Web标准是一组由W3C（World Wide Web Consortium）制定的技术规范和指南，用于确保网页在不同浏览器和设备上的一致性和互操作性。Web标准的目标是推动Web技术的发展和进步，使开发者能够创建具有良好可访问性、可用性和可维护性的网页。

  1. HTML标准：HTML是网页的基础语言，W3C发布了HTML规范，定义了HTML的语法、标签和元素的使用方式，确保网页的结构和内容能够被正确解析和渲染。
  2. CSS标准：CSS用于控制网页的样式和布局，W3C发布了CSS规范，定义了CSS的语法、选择器、属性和值的使用方式，以及样式在网页中的应用规则，确保网页的外观和布局在不同浏览器上保持一致。
  3. JavaScript标准：JavaScript是用于网页交互和动态效果的脚本语言，ECMAScript是JavaScript的标准规范，由Ecma国际组织维护。该标准定义了JavaScript的语法、数据类型、函数、对象等，确保在不同环境和浏览器中的一致性和互操作性。
  4. Web API标准：Web API提供了访问浏览器功能和设备功能的接口，例如DOM操作、网络请求、媒体播放、地理位置等。W3C制定了一系列的Web API标准，确保开发者可以在不同浏览器上使用相同的API来实现相似的功能。

遵循Web标准的好处包括：

  • 跨浏览器兼容性：遵循Web标准可以使网页在不同浏览器和设备上呈现一致的外观和功能，提供更好的用户体验。
  • 可访问性：遵循Web标准可以使网页更易于被辅助技术（如屏幕阅读器）解读和访问，提高网站的可访问性，包容更多用户群体。
  • 可维护性：遵循Web标准可以使代码结构清晰、语义化，易于维护和扩展。
  • SEO友好性：遵循Web标准可以提高网页在搜索引擎中的排名，提高搜索引擎优化（SEO）效果。

通过遵循Web标准，开发者可以构建可靠、可持续和可扩展的Web应用程序，确保网页的质量和性能，并提供更好的用户体验。

web标准要求页面实现：结构、表现、行为三层分离

 结构:HTML(决定了身体,骨架)

 表现:css(决定了色彩样式)

 行为:JavaScript(决定了动态交互效果)

HTML概念

HTML(Hyper Text Markup Language)中文译为：超文本标记语言

它描述了网页的结构和内容，并使用标签（Tag）来定义文本、图像、链接、表格等元素在网页中的展示方式。

网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款等…

网页中也是存在固定的结构的，如：整体、头部、标题、主体

网页中的固定结构是要通过特点的HTML标签进行描述的

1
2
3
4
5
6
7
8
/<html>
 <head>
  <title>网页的标题</title>
</head>
<body>
  网页的主体内容
 </body>
</html>

HTML注释

注释的作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

浏览器执行代码时会忽略所有的注释

快捷键：在VS Code中：ctrl+/

HTML标签组成、关系

标签的结构图

结构说明：

1.标签由**< 、** > 、 / 、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为**标签名**

2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

HTML标签与标签之间的关系

父子关系（嵌套关系）

<head>

   <title>

   </title>

</head>

兄弟关系（并列关系）

<head></head>

<body></body>

 

HTML标题、段落

标题标签

代码：h系列标签

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

特点： 文字都有加粗

文字都有变大，并且从h1一h6文字逐渐减小

独占一行

段落标签

代码：<p>我是一段文字</p>

语义：段落

特点： 段落之间存在间隙 独占一行

HTML换行和水平线标签

换行标签

代码：<br>

语义：换行

特点： 单标签 让文字强制换行

水平线标签

代码：<hr>

语义：主题的分割转换

特点：单标签 在页面中显示一条水平线

文本格式化标签

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

语义：突出重要性的强调语境

图片标签

src属性

属性注意点： 1.标签的属性写在开始标签内部 2.标签上可以同时存在多个属性 3.属性之间以空格隔开 4.标签名与属性之间必须以空格隔开 5.属性之间没有顺序之分

alt属性

替换文本

当图片加载失败时，才显示alt的文本 当图片加载成功时，不会显示alt的文本

title属性

提示文本

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

width、height属性

设置图片的宽高

注：

如果只设置widthi或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） 如果同时设置了width和heighti两个，若设置不当此时图片可能会变形

路径 src

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

【一个固定的指定的位置】 例如： 盘符开头：D.Aday01\ images\1.jpg 完整的网络地址：https:/www.itcast.cn/2018czgw/images/logo.gif(了解)

相对路径：从当前文件开始出发找目标文件的过程

分类：

同级目录

./ 或 直接填写文件名字 下级目录

直接进入对应文件夹查找 上级目录

../ 进入上一级目录

../../上两级目录,可以多次叠加

音频标签支持三种格式分别是 MP3,wav ogg ; 推荐使用平时最常见的mp3格式

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

 视频标签

 

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

视频标签支持 MP4,webm,ogg,推荐使用MP4格式

超链接标签

特点： 双标签，内部可以包裹内容 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

注：当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接）

超链接标签target属性:

_self：默认值,在当前窗口中跳转(覆盖原始窗口)

_blank：在新窗口中跳转(保留原始窗口)

 

列表标签 

有序列表

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

无序列表

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

 

 

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

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

注：

ul标签中只允许包含li标签 li标签可以包含任意内容

自定义列表

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

显示特点：

dd前会默认显示缩进效果

注：

dl标签中只允许包含dt/dd标签 dt/dd标签可以包含任意内容

表格标签

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

注意点： 标签的嵌套关系：table>tr>td

表格属性

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

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

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

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

注：

caption标签书写在table标签内部

th标签书写在tr标签内部（用于替换td标签）

表格结构标签（了解）

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

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

合并单元格

合并单元格

步骤：

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并一只保留最上的，删除其他

左右合并一只保留最左的，删除其他

3.给保留的单元格设置：跨行合并(rowspan)或者跨列合并(colspan)

注：

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

表单标签 

用于登陆、注册、搜索页面

input标签

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

text标签【placehoder属性】

作用：占位符，提示用户输入文本的内容

radio属性值

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

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

file标签【multiple属性】

作用：多文件选择

reset标签【form表单预标签】

value属性 

作用：用于给按钮命名

select下拉菜单标签

作用：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

selecti标签：下拉菜单的整体

option标签：下拉菜单的每一项

常见属性：

selected:下拉菜单的默认选中

 textarea文本域标签

作用：在网页中提供可输入多行文本的表单控件

标签名：textarea 常见属性：

cols:规定了文本域内可见宽度

rows:规定了文本域内可见行数

注意点：

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

label标签

作用：常用于绑定内容与表单标签的关系, 增加点击范围,提高用户体验

标签名：label

方法①：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性 3.在label标签的for属性中设置对应的id属性值

方法②：(推荐)

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可 

语义化标签 

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

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

字符实体

标签名： 

在文字之间添加空格