HTML+CSS学习笔记
HTML
HTML骨架：（VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键）
html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字
常用标签：
1、标题标签：（文字加粗、字号逐渐减小、独占一行（换行））
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>.
2、段落标签：（独占一行、段落之间存在间隙）
<p>段落</p>
3、换行和水平线：
<br>、<hr>
4、文本格式化标签：
<strong></strong>：加粗
<em></em>：倾斜
<ins></ins>：下划线
<del></del>：删除线
5、图像标签：(在网页中插入图片)
<img src="图片的 URL" alt=“替换文本” title=“提示文本”>：src用于指定图像的位置和名称，使用相对路径
图像属性：
1、alt：替换文本。图片无法显示的时候显示文字
2、title：提示文本。鼠标悬停在图片上面的时候显示的文字
3、width：图片的宽度。值为数字，没有单位
4、height：图片的高度。值为数字，没有单位
6、超链接标签：（点击跳转到其他页面）
<a href="https://www.baidu.com">跳转到百度</a>
属性：
1、href ：href 属性值是跳转地址，是超链接的必须属性。开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次
2、target：超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
7、音频：（插入一段音频）
<audio src="音频的 URL" loop=“loop” autoplay=“autoplay”></audio>
属性：
1、src：音频URL，必备属性
2、control：显示音频控制面板
3、loop：循环播放
4、autoplay：自动播放
8、视频：（插入一段视频）
<video src="视频的 URL"></video>
<video src="./media/vue.mp4" controls loop muted autoplay></video>
属性：
1、src：视频URL，必备属性
2、control：显示视频控制面板
3、loop：循环播放
4、autoplay：自动播放
5、muted：静音播放
9、列表
1、无序列表
布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
1 <ul> 2 <li>第一项</li> 3 <li>第二项</li> 4 <li>第三项</li> 5 ...... 6 </ul> 7 <ol> 8 <li>第一项</li> 9 <li>第二项</li> 10 <li>第三项</li> 11 ...... 12 </ol>
2、有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
1 <ol> 2 <li>第一项</li> 3 <li>第二项</li> 4 <li>第三项</li> 5 ...... 6 </ol>
3、定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
View Code
1 <dl> 2 <dt>列表标题</dt> 3 <dd>列表描述 / 详情</dd> 4 ...... 5 </dl>
10、表格
table 嵌套 tr，tr 嵌套 td / th。
1 <table border="1"> 2 <tr> 3 <th>姓名</th> 4 <th>语文</th> 5 <th>数学</th> 6 <th>总分</th> 7 </tr> 8 <tr> 9 <td>张三</td> 10 <td>99</td> 11 <td>100</td> 12 <td>199</td> 13 </tr> 14 <tr> 15 <td>李四</td> 16 <td>98</td> 17 <td>100</td> 18 <td>198</td> 19 </tr> 20 <tr> 21 <td>总结</td> 22 <td>全市第一</td> 23 <td>全市第一</td> 24 <td>全市第一</td> 25 </tr> 26 </table>
11、表单
收集用户信息
<input type="..." >
属性：
1、type：
1、text：文本框，用于输入单行文本
2、password：密码框
3、radio：单选框
4、checkbox：多选框
5、file：上传文件
2、placeholder：标签站位文本，用于显示提示信息
单选框：
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
属性：
1、name：控件名称。控件分组，同组只能选一个
2、checked：默认选中
上传文件：
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
<input type="le" multiple>
属性：
multiple：支持多选
多选框：
<input type="checkbox" checked> 敲前端代码
下拉菜单：
select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
默认显示第一项，selected 属性实现默认选中功能
1 <select> 2 <option>北京</option> 3 <option>上海</option> 4 <option>广州</option> 5 <option>深圳</option> 6 <option selected>武汉</option> 7 </select> 8 <textarea>默认提示文字</textarea>
文本域：
多行输入文本的表单控件。style=“resize:none” ，避免文本框大小由用户自定义，禁用文本域拖拽拉伸功能
<textarea style=“resize:none”>默认提示文字</textarea>
按钮：
<button type="">按钮</button>
属性：
1、submit：提交按钮，点击后提交数据到后台（默认功能）
2、reset：重置功能，点击后将表单控件恢复默认值
3、button：普通按钮，默认没有功能，配合JavaScript使用
1 <!-- form 表单区域 --> 2 <!-- action="" 发送数据的地址 --> 3 <form action=""> 4 用户名：<input type="text"> 5 <br><br> 6 密码：<input type="password"> 7 <br><br> 8 9 <!-- 如果省略 type 属性，功能是 提交 --> 10 <button type="submit">提交</button> 11 <button type="reset">重置</button> 12 <button type="button">普通按钮</button> 13 </form> 14 <div>div 标签，独占一行</div> 15 <span>span 标签，不换行</span>
12、无语义布局标签
div：独占一行
span：不换行
13、有语义的布局标签：
1、header：网页头部
2、nav：网页导航
3、footer：网页底部
4、aside：网页侧边框
5、section：网页块区
6、article：网页文章
14、字符实体
空格：
<：<
>：>
CSS的引入方式：
内部样式表：CSS 代码写在 style 标签里面
<style>/* 选择器 { } */</style>
外部样式表：
<link rel="stylesheet" href="./my.css">
1、CSS 代码写在单独的 CSS 文件中（.css）
2、在 HTML 使用 link 标签引入
行内样式：配合 JavaScript 使用，CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>
选择器：
1、标签选择器：
使用标签名作为选择器 → 选中同名标签设置相同的样式。
<style> p {}</style>
2、类选择器
<style> .classname {}</style>
类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
3、id选择器
id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
<style> #idname {}</style>
4、通配符选择器，去除一些样式或者设置默认的样式
<style> * {}</style>
5、复合选择器
1、后代选择器：
选中某元素的后代元素
选中某元素的后代元素
父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开
<style> div span {}</style>
2、子代选择器
选中某元素的子代元素（最近的子级）
父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。
<style>div > span {color: red;}</style>
3、并集选择器
选中多组标签设置相同的样式
选择器1, 选择器2, ..., 选择器N { CSS 属性}