本笔记根据B站up主“黑马前端”的视频(BV14J4114768)配套食用
HTML简介(p3)
了解网页的基本组成
什么是HTML
说出常用的浏览器
能够说出Web标准的三大组成部分
网页的基本概念(p4)
HTML 超文本标记语言(Hyper Text Markup Languague)用来描述网页的一种语言,是标记语。(却别与编程语言)。
超文本 = 超链接+多元素
每一个网页就是一个html文件,每个网站都拥有多个网页。
常用浏览器+其内核(p5)
常用浏览器 Firefox,Chrome,Safari,Opera,IE,Edge
浏览器内核:负责读取网页内容,整理讯息,计算网页的显示方式兵器显示界面
Web标准(p6)
Web 标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
为什么需要Web标准
浏览器不同,页面或者排版有差异,WEB标准可以便利读者使用。
标准构成
结构:网页元素进行整理分类 html
表现: 排版梅花,外观样式 CSS
行为: 交互 javascript
html 标签(上) (p7)
学习主要内容
书写规范
HTML 骨架标签
开发工具
常用标签
注释+特殊字符
<html>
<head></head>
</html>
//并列关系,一般来说标签都是双标签,但也有单标签
<br />
//单标签
一些基本标签的意义以及html骨架(p8)(p9)
<html>
<head>
<title>页面标签名
</title>
</head>
<body>页面内容</body>
</html>
VSCode工具创建页面(p10)
主用VSCode,一些快捷键:
创建文件为html文件后,可以在头位置写一个!符来快速构建html文件框架(即上图的html编码)
Ctrl + +/-可以放大缩小视图
可以通过左导航栏的对应文件右键->从文件夹中打开
vscode插件的安装和使用(p11)
新增标签(在使用vscode时自动生成框架(!)出现的几个tag)(p11)
采用最新的html版本来显示网页 当前文档的显示语言,en为英文网页。zh-CN定义语言为中文,和en对立,但无论如何定义,中英文都可以同步输入,对某些浏览器有作用,可以让浏览器判断需不需要翻译。 UTF-8称为万国码,有这一句话就可以显示大部分的字符,如果不写有可能出现字符的乱码。HTML常用标签(p12)
根据标签的语义,在核实的地方给一个最为合理的标签,可以使得页面结构更清晰,是标题可以给标题标签,需要段落就给与一个段落标签。
标题标签:(p13)
-
双标签,相当于word的多级标题,标题标签逐级递减。 > 特点:每个标题都独占一行且字体增大加粗
段落标签:(p14)(p15)(p16)
**双标签** 使用段落标签才能在浏览器中把文字分段**单标签** 强制换行:页面本身只会在写满一行文字才会换行,但这个单标签可以强制换行
基础标签
为文字设置粗体,斜体,下划线,与md文件相似,但通过标签来确立
标签名 | 意义 | 是否双标签(T:YES) |
---|---|---|
"strong/b" | 字体加粗 | T |
"em/i" | 字体倾斜 | T |
"del/s" | 删除线 | T |
"ins/u" | 下划线 | T |
表格中所有的前一个标签的强调性更强。
<div>
和<span>
标签
两个标签没有语义,更多属于一个器皿(视频成为盒子),用于装内容。
<div>
可以看作一个大盒子,这个盒子单独占一行,但对列没有要求
<span>
看作小盒子,也是单独占一行
图像标签和路径(⭐)
<img>
用于定义html页面中的图像。
补充:在vscode使用叹号+tab无法唤出模板
(解决方式)[https://blog.csdn.net/qq_52276628/article/details/125688809] 引用该文章。这个问题应该是大部分新版本的通病,而且大多数都是文中第三个问题。
html 常用案例:体育新闻案例(略)(p16)
文本格式化标签(p17)
基础标签
为文字设置粗体,斜体,下划线,与md文件相似,但通过标签来确立
标签名 | 意义 | 是否双标签(T:YES) |
---|---|---|
"strong/b" | 字体加粗 | T |
"em/i" | 字体倾斜 | T |
"del/s" | 删除线 | T |
"ins/u" | 下划线 | T |
表格中所有的前一个标签的强调性更强。
<div>
和<span>
标签
两个标签没有语义,更多属于一个器皿(视频成为盒子),用于装内容。
<div>
可以看作一个大盒子,这个盒子单独占一行,但对列没有要求
<span>
看作小盒子,也是单独占一行
图像标签和路径(⭐)
<img>
用于定义html页面中的图像。
<img src="URL" alt="character">
当图片无法显示时,alt标签中的字符内容可以替换图片显示
<img src="URL" title="character">
鼠标经过图象时,会在鼠标旁边标注title标签中的字符
<img src="URL" alt="character" width="500" highth="500" border="100">
对于图片的高度宽度进行修改。但一般来说只改高或宽一个属性,再用等比例缩放修改图像。(highth,width)
图片的边框border的粗细。用数据修改(这三个属性单位都为像素)
总结
以上给予的附加标签,alt,title,highth,width,border,都必须在标签img之后,但这几个属性本身没有优先。src必须存在,且放在img之后,属性之前
路径
目录文件夹和根目录
图片等文件放在同一个文件夹中才能便于管理,所以出现的目录文件夹和根目录的讲究
目录文件夹就是普通文件夹,只是所有的素材都按一定顺序保存在此,根目录就是打开目录文件夹的第一层
路径
相对路径:以图片相对于html页面的位置为参考
名称 | 符号 | 说明 |
---|---|---|
同一级路径 | 空 | |
上一级路径 | ../ | 上一级路径指的是:包裹这个html文件的上一个文件中有图片并使用他 |
下一级路径 | / | 与上一级相反 |
和电脑命操作方式相似
绝对路径
与相对路径区分,用\,以盘符为开头。或者以http在网上拿取网站
超链接标签(p28)
语法格式
<a href="跳转目标" target="c=窗口的弹出方式">文本或图像</a>
a = archor 锚
属性(target="——") | 作用 |
---|---|
href | 指定连接目标的url地址,使该标签有超链接的功能通过使用不同的内(使用herf="#名字",在要被转到的位置的标签给与一个id="名字")外部标签来选择搜索外连接还是调到当前页面的指定位置 |
target="_" | 页面的打开方式,其中 _self 为默认值,_blank 为在新窗口打开方式 |
示例:
<p>
<a herf="#live">
点击这个按钮:
</a>
</p>
<h1 id="live">
会直达这个标签所在的位置
</h2>
注释标签!!!
格式
<!-- 注释 -->
快捷键 crtl + /
注释有多重要不用多说了
特殊字符
特殊字符 | 字符代码 |
---|---|
(空格) | |
< | < |
> | > |
& | & |
(人民币符) | ¥ |
(版权符) | © |
(注册商标) | ® |
(摄氏度符) | ° |
正负号 | ± |
* | × |
/ | ÷ |
平方 | ² |
立方 | ³ |
用法,在文段中需要特殊字符时直接输入以上字符代码
html标签下(p31-35)
表格标签
<table>
<tr>
<th>第一号数据</th>
<th>第二号数据</th>
<th>第三号数据</th>
</tr>
<tr>
<td>第四号数据</td>
<td>第五号数据</td>
<td>第五号数据</td>
</tr>
</table>
</body>
</html>
<!-- 表格的基本框架,每个tr占1行,这个行全是td/th,且th是表头标签,这个标签内的文字居中加粗显示 -->
表格属性:一般通过css设置,但单词作为关键字,html和css都会使用(p36)
属性 | 选择 | 用法 |
---|---|---|
aligh | left,center,right | 表格对于页面对齐方式,写在table标签内 |
border | 1或(void) | 是否给表格写入边框 |
cellpadding | 像素值 | 规定边框与文字间的距离 |
cellspacing | 像素值 | 边框间空隙大小 |
width/highth | 像素值 | 同图片 |
表格结构标签(p37)
<thead>
<!-- 表格头部区域 -->
<tbody>
<!-- 表格身体区域 -->
合并单元格
- 合并单元格方式
跨行合并: rowspan=“合并单元格数”
跨列合并:colspan=“合并单元格数” - 找到目标单元格,写上合并方式 = 合并的单元格数量。
列表标签
列表:整齐,整洁
无序列表(重点)
<body>
<ul>
<li>榴莲</li>
<li>榴莲</li>
<li>罐头</li>
</ul>
</body>
注:ul的下一级标签只能有li标签,但li标签的下一级标签没有特殊要求
有序列表
<ol>
和ul相似;要求也相似,li。
自定义列表
<dl>父类</dl>
<dd>子1</dd>
<dd>子2</dd>
<dd>子3</dd>
表单标签
目的:收集用户信息
用户填写的内容:表单控件
表单域
在HTML标签中,
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步