前言 看B站黑马程序员视频,记下的笔记
目录
基础概念铺垫
-
基础简介
- 网页由哪些部分组成——文字、图片、音频、视频、超链接
- 代码通过什么软件转换成网页——浏览器
- 五大浏览器(推荐Chrome)
- 相同的网页在不同的浏览器中显示效果不一定会完全一致
-
web标准的构成
- 结构:HTML→页面元素
- 表现:CSS→页面样式
- 行为:JavaScript→页面交互的动态效果
HTML基础
-
基础认知
- HTML→超文本标记语言
- 文本加粗实践:
-
HTML骨架结构
- 标签
- html标签:网页的整体
- head标签:网页的头部
- body标签:网页的身体
- title标签:网页的标题
-
<html> <head> <title>网页的标题</title> </head> <body> 网页的主体内容 </body> </html>
- 标签
-
开发工具:VS Code
- VS2022安装:vs2022安装使用教程,Visual Studio 2022详细安装使用调试教程C语言编译器,C++编译器_哔哩哔哩_bilibili
- VScode安装//TODO:并安装各种好用的插件VScode最新版安装教程及入门使用(小白必看)_哔哩哔哩_bilibili
- 在VScode中查看md文件:安装插件Markdown Preview Enhanced+ctrl-shift-v
-
ctrl-shift-m 开/关预览 cmd-k v or ctrl-k v 打开预览 仅 VSCode 可用
ctrl-shift-s 滑动同步预览 / 滑动同步 markdown 源 - 使用指南:Markdown Preview Enhanced
-
-
HTML的注释:
-
<!-- 我是注释 -->
-
vscode中快速添加注释:ctrl+/(小键盘里的/不行)
-
-
HTML的标签:
- 标签间的关系:
- 父子关系(嵌套关系)
- 兄弟关系(并列关系)
- 标签的分类:单标签 双标签(开始标签+结束标签)
- 标签间的关系:
-
HTML标签学习
-
排版标签
-
标题标签
-
<h1>1级标题</h1> 有1~6级标题
-
小技巧:vscode中输入h3*5可以直接出来5个
-
小技巧:vscode中输入ctrl+d 可以选定多个相同的单词
-
小技巧:vscode中输入alt+shfit +向下方向键可以复制整行到下一行
-
-
特点:
-
文字都会加粗
-
都有变大(大小依次递减)
-
独占一行
-
-
-
段落标签
-
场景:页面中用于分段显示
-
代码:<p>我是一段文字</p>
-
语义:段落
-
特点:
-
段落之间存在间隙
-
独占一行
-
-
-
换行标签
-
场景:让文字强制换行显示
-
代码:<br>(单标签)
-
语义:换行
-
特点:单标签;让文字强制换行
-
-
水平线标签
-
场景:分割不同主题内容的水平线
-
代码:<br>(单标签)
-
语义:主题的分割转换
-
特点:单标签;在页面中显示一条水平线
-
-
-
文本格式化标签
- 第二组突出重要性的强调语境
<b>加粗</b> <strong>加粗</strong>
<u>下划线</u> <ins>下划线</ins>
<i>倾斜</i> <em>倾斜</em>
<s>删除线</s> <del>删除线</del>
- 标签语义化:strong、ins、em、del,表示的强调语义更强烈
- 第二组突出重要性的强调语境
-
媒体标签
- 图片标签
-
场景:在网页中显示图片
-
代码:<img src="属性值" alt="">
-
例:<img src="./Dumbledore.jpeg" alt="This is Dumbledore" title="邓布利多于开学典礼" height="300">
-
src:属性名;src="属性值":标签属性;img:标签名
-
属性注意点:
-
标签的属性可以写在开始标签内部
-
标签上可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性名之间必须以空格隔开
-
属性之间没有顺序之分
-
-
-
特点:单标签;img标签需要展示对应的效果,需要借助标签的属性进行设置
-
图片标签的alt属性
-
属性名:alt
-
属性值:替换文本
-
当图片加载失败时,才显示alt的文本
-
当图片加载成功时,不会显示alt的文本
-
-
-
图片标签的title属性
-
属性名:title
-
属性值:提示文本(当鼠标悬停时,才显示的文本)
-
注:title属性还可用于其他标签
-
- 图片标签的width和height属性
-
属性名:width和height
-
属性值:宽度和高度(数字)
-
注:
-
如果只设置width和height中的一个,另一个没设置的会自动等比例缩放(图片不会变形)
-
如果同时设置了width和height两个,若设置不当,图片可能会变形
-
-
-
- 路径
-
场景:页面需要加载图片,需要先找到对应的图片
-
分类:绝对路径(盘符开头/完整的网络地址);相对路径(常用)
-
相对路径:下级目录;上级目录(../)
-
- 音频标签
- 场景:在页面中插入音频
- 代码:<audio src="./Hedwig's Theme.mp3" controls autoplay loop></audio>
- 常见属性:
-
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放
-
- 视频标签
- 场景:在页面中插入视频
- 代码:<video src="./7月25日/7月25日.mp4" controls autoplay muted width="400"></video>
- 常见属性:(与音频标签类似)
- 图片标签
-
链接标签
- 场景:点击之后,从一个页面抓到另一个页面
- 称呼:a标签、超链接、锚链接
- 代码;<a href="https://www.wizardingworld.com/">wizard world</a>
- 特点:
- 双标签,内部可包裹内容
- href = "#" 空链接
- 自带颜色
- 属性
- target属性:目标网页的打开方式
- __self:默认值,在当前窗口跳转(覆盖原网页)
- _blank 在新窗口跳转(保留原网页)
- target属性:目标网页的打开方式
-
列表标签
-
无序列表 有序列表 自定义列表 场景 在网页中表示一组无顺序之分的列表,如:新闻列表 在网页中表示一组有顺序之分的列表,如:排行榜 在网页的底部导航中通常会使用自定义列表实现 标签组成 ul + li ol+li dl + dt + dd 显示特点 列表的每一项前默认显示圆点标识 列表的每一项前默认显示序号标识 dd前会默认显示缩进效果 注意 ol/ul标签中只允许包含li标签
li标签中可以包含任意内容
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
标签组成 ul/ol:显示无序/有序列表的整体,用于包裹li标签
li:表示无序/有序列表的每一项,用于包含每一行的内容
dl:表示自定义列表的整体,用于包裹dt/dd标签
dt:表示自定义列表的主题
dd:表示自定义列表的针对主题的每一项内容
-
-
表格标签
- 场景:在网页中以表格的方式整齐展示数据
- 基本标签:
标签名 说明
table 表格整体,用于包裹多个tr tr 表格每行,可用于包裹td
td 表格单元格,可用于包裹内容 - 注意:标签的嵌套关系:table > tr >td
- 相关属性:
属性名 属性值 效果 border 数字 边框宽度 width 数字 表格宽度 height 数字 表格高度 -
实际开发时针对于样式效果推荐用CSS设置
-
-
表格标题和表头单元格标签
-
场景:在表格中表示整体大标题和一列小标题
-
其他标签:
标签名 名称 效果 caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示 th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 -
注意:caption标签书写在table内部;th标签书写在tr标签内部(用于替换td标签)
-
-
表格的结构标签(了解)
-
场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
-
结构标签:
标签名 名称 thread 表格头部 tbody 表格主体 tfoot 表格底部 -
注意:表格结构标签内部用于包裹tr标签(可以省略)
-
-
合并单元格:
-
场景:将水平或垂直多个单元格合并成一个单元格;跨行合并+跨列合并
-
属性:
-
注:
-
左上原则:上下合并:保上删下;左右合并:保左删右
-
只有听一个结构标签的单元格才能合并,不能跨结构标签合并(不能跨thead、tbody、tfoot)
-
-
-
表单标签
- 场景:登录注册搜索
- input系列标签:
- 场景:在网页中手机用户信息的表单效果,如:登录注册页
- 标签名:input(可以通过type属性值的不同,展示不同效果)
- type属性值
标签名 type属性值 效果 相关属性 input text 文本框,用于输入单行文本 placeholder:占位符。提示用户输入内容的文本 input password
密码框,用于输入密码 input radio 单选框,用于多选一 name:分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选中
checked:默认选中
input checkbox 多选框,用于多选多 input file 文本选择,用于之后上传文件 multiple:多文件选择 input 系列标签——按钮:在网页中显示不同功能的按钮表单控件 input submit 提交按钮,用于提交 注意 input reset 重置按钮,用于重置 如果需要实现以上按钮功能,需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来即可
value:更改按钮显示文字
input button 普通按钮,默认无功能,之后配合js添加功能
- button按钮标签
- 场景:在网页中显示用户点击的按钮
标签名 type属性值 说明 button submit 提交按钮,点击之后提交数据给后端服务器 button reset 重置按钮,点击之后回复表单默认值 button button 普通按钮,默认无功能,之后配合js添加功能 - 标签名:button
- type属性值:(同input的按钮系列)
- 注意:
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签,更便于包裹其他内容:文字、图片等
- 场景:在网页中显示用户点击的按钮
- select下拉菜单标签
- 场景:在网页中提供多个选择项的下拉菜单表单控件
- 标签组成:
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
- 常见属性:
- selected:下拉菜单(select)的默认选中(注意与单选多选框(radio/checkbox)的默认选中checked作区分)
- textarea文本域标签
- 场景:在网页中提供可输入多行文本的表单控件
- 标签名:textarea
- 常见属性
- cols:规定了文本域内可见高度
- rows:规定了文本域内可见行数
- 注意:右下角可以拖拽改变大小(实际开发推荐CSS)
- label标签
- 场景:常用于绑定内容于表单标签的关系
- 标签名:label
- 使用方法①:(较复杂)
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
- 使用方法②:(较简单)
- 直接说那个label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
- 注意:右下角可以拖拽改变大小(实际开发推荐CSS)
-
语义化标签
- 没有语义的布局标签-div和span
- 场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
- div标签:一行只显示一个(独占一行)
- span标签:一行可以显示多个
- 有语义的布局标签(了解)
- 场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用
- 标签:(用在手机端网页)
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章 - 注:以上标签显示特点和div一致,但是比div多了不同的语义
- 没有语义的布局标签-div和span
-
字符实体
- 场景:在网页中展示特殊符号效果时,需要使用字符实体替代
- 结构:半角符号&和;
- 常见字符实体:HTML ISO-8859-1 参考手册 (w3school.com.cn)
显示结果
描述
实体名称
实体编号
空 格
 
<
小于号
<
<
>
大于号
>
>
&
和号
&
&
"
双引号
"
"
’
单引号
'(IE不支持)
'
×
乘 号
×
×
÷
除 号
÷
÷
-