0基础速通html

一、基础认知

1、网页
 ➢ 网页组成
 • 文字、图片、音频、视频、超链接 
 ➢程序员写的代码是通过什么软件转换成网页的？ 
• 浏览器

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

➢ 常见的五大浏览器：

• IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、欧朋浏览器

➢前端工程师日常推荐使用：

• 谷歌浏览器（Chrome）

3、骨架结构

 • html标签：网页的整体          • head标签：网页的头部

 • body标签：网页的身体         • title标签：网页的标题

4、注释

• 在VS Code中：ctrl + /

5、HTML标签的结构

6、HTML标签与标签之间的关系可分为

二、HTML标签学习 

1、标题标签

六种标题，可根据内容重要性进行自行选择，大小依次减小

h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

 2、段落标签

3、换行标签

与\n类似

 

 

4、水平线标签

5、文本格式化标签

6、图片标签

在网页中显示图片

1. src 目标图片的路径 
2. alt 替换文本
   当图片加载失败时，才显示alt的文本

     3、title 提示文本
           当鼠标悬停时，才显示的文本

 

      4、 width和height

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

 路径的介绍

• 绝对路径（了解）

• 相对路径（常用）

以自己为参考系，在文件夹上一层：../  当前文件夹./ 

7、音频标签 

8、视频标签 

 

9、链接标签

点击之后，从一个页面跳转到另一个页面

 1、href 目标网页的路径

2、target 目标网页的打开形式

10、列表标签

在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

1、无序列表

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

2、有序列表

3、自定义列表

11、表格标签

 合并单元格

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

 

12、表单标签
1、input系列

2、选择

单选框

复选框

 input小结

 3、button按钮

4、select下拉菜单

 • select标签：下拉菜单的整体

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

5、textarea文本域

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

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

 13、label标签

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

14、语义化标签

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

有语义的标签

 

15、字符实体

常见字符实体