黑马程序员web前端 HTML、CSS、Bootstrap框架、less笔记【详细版】
CS 框架与 BS 框架
C：Client（客户端）、B：Browser（浏览器）、S：Server（服务器）
C/S 架构：需要安装、偶尔更新、不跨平台
B/S 架构：无需安装、无需更新、跨平台
浏览器相关知识
五大浏览器：
- Chrome 谷歌浏览器（早期使用 webkit 内核、现在使用 Blink 内核）
- Safari 苹果浏览器（webkit 内核）
- IE 浏览器（Trident 内核）
- Firefox 火狐浏览器（Gecko 内核）
- opera 欧朋浏览器（早期使用 Presto 内核【已放弃维护】，现在使用 Blink 内核）
四大内核：webkit、Blink、Trident、Gecko
网页相关概念
网页组成标准：
- 结构 HTML
- 表现 CSS
- 行为 javascript
HTML 定义
- HTML 超文本标记语言-- HyperText Markup Language
- 超文本 = 链接
- 标记 = 标记也叫标签，带尖括号的文本
标签写法
<!-- 开始标签 内容 结束标签 -->
<strong>加粗</strong>
- 标签成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多/
- 扩展：双标签：成对出现的标签、单标签：只有开始标签，没有结束标签
- 例：
<!-- 双标签 -->
<strong></strong>
<!-- 单标签 -->
<hr />
<br />
HTML 基本结构
- html 声明文档类型
- head 网页头部，存放给浏览器看的代码，例如： css
- body 网页主体，存放给用户看的代码，例如：图片、文字
- title 网页标题
<html>
<head>
<!-- 网页头部 -->
<title>网页标题<title>
</head>
<body>
<!-- 网页主体 -->
</body>
</html>
VS code 快速生成基本骨架
- 在 HTML 文件（.html）中，!（英文）配合 Enter、Tab 键
标签关系
- 作用：明确代码的书写位置
- 父子关系（嵌套关系）
- 兄弟关系（并列关系）
<!-- 父子关系 -->
<html>
<!-- 兄弟关系 -->
<head></head>
<body></body>
</html>
注释
- 注释就是对代码的解释和说明
- 注释不会在浏览器显示
- 在 VS code 中，添加/删除注释的快捷键：Ctrl+/
标题标签
- 一般用在新闻标题、文章标题、网页区域名称、产品名称等等
- 经验分享：h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
- h2-h6 没有使用次数的限制
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
- 一般用在新闻段落、文章段落、产品描述信息等等
- 独占一行
- 段落之间有间隙
<p>段落标签</p>
换行与水平线标签
- 换行 br、水平线 hr（单标签）
<span>1<br />换行2</span>
<!-- 水平线 -->
<hr />
文本格式化
- 作用：为文本添加特殊式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等
- 在一行显示
- 开发中使用：strong、em、ins、del 标签自带强调含义（语义）
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<ins>下划线</ins>
<u>下划线</u>
<del>删除线</del>
<s>删除线</s>
图像标签
- 作用：在网页中插入图片
- src 用于指定图像的位置和名称，是 img 的必须属性
<img src="图片的url" />
- 图片标签-属性
- alt 作用：替换文本（图片无法显示的时候显示的文字）
- title 作用：提示文本（鼠标悬停在图片上面的时候显示的文字）
<img
src="图片的url"
alt="图片无法显示的时候显示的文字"
title="鼠标悬停在图片上面的时候显示的文字"
/>
相对路径
- /表示进入某个文件夹里面 （文件夹名字/）
- .表示当前文件所在文件夹 （./）
- …/表示前往当前文件夹上一级文件夹 （…/）
<img src="./img/img.jpg" />
绝对路径
- 从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录(/)出发
- Windows 默认是,其他系统是/，建议统一写为/
<img src="C\images\img.jpg" />
超链接
- 作用：点击跳转到其他页面
- href 属性值是跳转地址，是超链接的必须属性
- target 属性值是链接的打开方式，_self 在原窗口打开、_blank 在新窗口打开
<a href="网页url">网页名称</a>
音频标签
- 常见属性：
- src（必须属性）作用：音频 url，支持格式：MP3、Ogg、Wav
- controls 作用：显示音频控制面板
- loop 作用：循环播放
- autoplay 作用：自动播放（为了提升用户体验，浏览器一般会禁用自动播放功能）
<audio src="音频url" controls loop autoplay></audio>
视频标签
- 常见属性：
- src（必须属性）作用：音频 url，支持格式：MP4、Ogg、WebM
- controls 作用：显示视频控制面板
- loop 作用：循环播放
- muted 作用：静音播放
- autoplay 作用：自动播放（为了提升用户体验，浏览器一般会禁用自动播放功能）
<video src="视频url" controls loop muted autopla></video>
列表
- 作用：布局内容排列整体的区域
- 列表分类：无序列表、有序列表、自定义列表
无序列表
- 作用：布局配列整体的不需要规定顺序的区域
- 标签：ul 嵌套 li、ul 是无序列表，li 是列表条目
- 注意事项：
- ul 标签里面只能包含 li 标签
- li 标签里面可以包裹任何标签
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
有序列表
- 作用：布局排列整齐的需要规定顺序的区域
- 标签：ol 嵌套 li、ol 是无序列表，li 是列表条目
- ol 标签里面只能包含 li 标签
- li 标签里面可以包裹任何标签
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
自定义列表
- 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情
- 注意事项：
- dl 里面只能包含 dt 和 dd
- dt 和 dd 里面可以包含任何标签
表格
- 标签：table 嵌套 tr，tr 嵌套 td、th
- 标签名、说明
- table 表格
- tr 行
- th 表头单元格
- td 内容单元格
- thead 表格头部内容
- tbody 表格主体
- tfoot 表格底部
- 提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线
<table border="1">
<!-- 表头 -->
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>表格内容</td>
</tr>
</tbody>
<!-- 表格尾部 -->
<tfoot>
<tr>
<td>表格尾部</td>
</tr>
</tfoot>
</table>
合并单元格
- 作用：将多个单元格合并成一个单元格，以合并同类信息
- 合并单元格的步骤：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并：保留最上单元格，添加属性 rowspan
- 跨列合并：保留最左单元格，添加 colspan
- 删除其他单元格
<table border="1" width="200" heigt="400">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>92</td>
<td>192</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="4">全市第一</td>
</tr>
</tfoot>
</table>
表单
- 作用：收集用户信息
- 使用场景：
- 登录页面
- 注册页面
- 搜索区域
form 表单区域
- 表格提交信息需要通过 form
- action 表格发送数据的地址
- method 提交方式：post、get
<form action="">
用户名：<input type="text" placeholder="请输入用户名
最低0.47元/天 解锁文章
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
