HTML基础，大三老学姐在线总结
DAY01
HTML
基础认知
认识网页
- 问题1：网页由哪些部分组成？
文字、图片、音频、视频、超链接
- 问题2：我们看到的网页背后本质是什么？
前端程序员写的代码
- 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
IE浏览器（IE已“死”）、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
不同浏览器渲染引擎不同，解析的效果会存在差异，前端程序员推荐使用谷歌浏览器（Chrome）
为什么需要Web标准？（了解）
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！
Web标准的构成
Web标准中分成三个构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
巧记忆web标准：
- Web标准要求页面实现：结构、表现、行为三层分离
HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
网页体验-构建基本网页的步骤
在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
双击这个文件，输入代码等内容 → 记得保存！
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容
HTML页面固定结构
网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特点的 HTML标签 进行描述的
HTML骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
开发工具
VS Code，傻瓜式安装
VS Code的基本快捷键
快速生成标签：英文 + tab
保存文件：ctrl + s• 注意1：写完文件之后务必需要保存文件，否则网页无变化• 注意2：可以设置自动保存省去每次保存的麻烦
快速查看网页效果：右击 → Open in Default Browser• 快捷键：alt + b• 注意：必须安装了open in browser 插件
生成骨架：shift+!• 注意1：!必须是英文的，中文!无效• 注意2：必须保证当前文件后缀名是.html，否则无效• VS Code自动生成的骨架多了其他标签，之后会介绍
快速复制一整行：ctrl + c
快速粘贴一整行：ctrl + v
快速删除（剪切）一整行：ctrl + x
上一行快速粘贴到下一行：shift+alt+下箭头
HTML注释
注释是给程序员看的，快捷键ctrl+/，浏览器不会执行注释
<!-- 注释 -->
HTML标签的结构
标签的结构图：
结构说明：
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
小结：
双标签的属性需要写在开始标签还是结束标签中？
开始标签
标签上可以同时存在几个属性？
多个
标签名与属性之间，属性与属性之间以什么隔开？
空格
HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）
<head><title></title> </head>
基础认知小结
前端基础概念铺垫：
网页的基本组成元素：文字、图片、音频、视频、超链接等
五大浏览器 + Web标准
HTML初体验：
HTML：超文本标记语言
HTML骨架结构
VS Code的使用
语法规范：
HTML的注释
标签的构成：双标签 / 单标签
标签的属性： 属性名=“属性值”
标签的关系：父子 + 兄弟
HTML标签学习
标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6> </body> </html>语义：1~6级标题，重要程度依次递减
特点：
文字都有加粗
文字都有变大，并且从h1 → h6文字逐渐减小
独占一行
注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>我的大明星，你在我的生活里满分</h1><hr><p>张真源 <br> 中戏大一新生，物化政超难选课，逆天改命429分，音乐剧新生，出演铁流东进小柴火，2003年4月16日出生于重庆市江北区，时代少年团成员，live之神，内娱男菩萨，张真源大帅哥，183+个子，冬奥会志愿者，冬奥会手势舞C位。应援色水玉暖之，7家小偷别抢了。</p><p>易烊千玺 <br> 作品长安十二时辰、少年的你、中国医生、长津湖、奇迹，TFBOYS组合成员，获得无数奖项</p> </body> </html>语义：段落
特点：
段落之间存在间隙
独占一行
换行标签
场景：让文字强制换行显示
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>我的大明星，你在我的生活里满分</h1><hr><p>张真源 <br> 中戏大一新生，物化政超难选课，逆天改命429分，音乐剧新生，出演铁流东进小柴火，2003年4月16日出生于重庆市江北区，时代少年团成员，live之神，内娱男菩萨，张真源大帅哥，183+个子，冬奥会志愿者，冬奥会手势舞C位。应援色水玉暖之，7家小偷别抢了。</p><p>易烊千玺 <br> 作品长安十二时辰、少年的你、中国医生、长津湖、奇迹，TFBOYS组合成员，获得无数奖项</p> </body> </html>
语义：换行
特点：
单标签
让文字强制换行
水平线标签
场景：分割不同主题内容的水平线
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>我的大明星，你在我的生活里满分</h1><hr><p>张真源 <br> 中戏大一新生，物化政超难选课，逆天改命429分，音乐剧新生，出演铁流东进小柴火，2003年4月16日出生于重庆市江北区，时代少年团成员，live之神，内娱男菩萨，张真源大帅哥，183+个子，冬奥会志愿者，冬奥会手势舞C位。应援色水玉暖之，7家小偷别抢了。</p><p>易烊千玺 <br> 作品长安十二时辰、少年的你、中国医生、长津湖、奇迹，TFBOYS组合成员，获得无数奖项</p> </body> </html>语义：主题的分割转换
特点：
单标签
在页面中显示一条水平线
文本格式化标签的介绍
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
标签 说明 b 加粗 u 下划线 i 倾斜 s 删除线 标签 说明 strong 加粗 ins 下划线 em 倾斜 del 删除线 语义：突出重要性的强调语境
strong、ins、em、del，表示的强调语义更强烈！
图片标签
场景：在网页中显示图片
代码：
<img src="" alt="">
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！
标签的完整结构图：
属性注意点：
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
图片的常见属性有哪些？
属性 说明 src 指定需要展示图片的路径 alt 替换文本，当图片加载失败时，才显示的文字 title 提示文本，当鼠标悬停时，才显示的文字 width 图片的宽度 height 图片的高度 路径的介绍
绝对路径一般不用，相对路径常用
相对路径
概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
同级目录
下级目录
上级目录
相对路径-同级目录
同级目录：当前文件和目标文件在同一目录中
类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
生活中：两个人独处一室，我想找你，直接喊名字即可！
代码步骤：直接写目标文件的名字即可
方法一：
<img src="目标图片.gif">
方法二：
<img src="./目标图片.gif">
VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
相对路径-下级目录
下级目录：目标文件在下级目录中
<img src="data:images/目标图片.gif">
类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
先知道你去了哪一个房间 → 房间名：卧室
进入这个房间 → 进入
此时又独处一室 → 直接喊你名字
代码步骤：
先知道在哪个文件夹里面 → 文件夹名字
进入这个文件夹 → /
此时看到目标文件直接喊她 → 直接写目标文件名字
VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
相对路径-上级目录
上级目录：目标文件在上级目录中
<img src="../目标图片.gif">
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
先要出卧室，来到大厅 → 出去
此时又独处一室 → 直接喊你名字
代码步骤：
先出当前文件夹，到上一级目录 → ../
此时看到目标文件直接喊她 → 直接写目标文件
VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！
路径小结
相对路径有哪三种情况：
同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字！
上级目录：直接下：../目标文件名字！
VSCode中路径的快捷操作？
同级和下级目录：./ 之后选择即可
上级目录：../ 之后选择即可
音频标签的介绍
场景：在页面中插入音频
代码：
<audio src="./music.mp3" controls></audio>
常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放 播放控件
注意点：
音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签的介绍
场景：在页面中插入视频
代码：
<video src="./video.mp4" controls></video>
常见属性：
属性名 功能 src 视频的路径 controls 显示播放的控件 autoplay 自动播放(谷歌浏览器中需要配合muted实习静音播放) loop 循环播放 <!-- 谷歌浏览器可以让视频自动播放，但是必须静音状态muted --> <video src="../video/zjsjw.mp4" controls autoplay muted loop></video>注意点：
视频标签目前支持三种格式：MP4 、WebM 、Ogg
链接标签的介绍
场景：点击之后，从一个页面跳转到另一个页面
称呼： a标签、超链接、锚链接
代码：
<a href="./目标网页.html">超链接 </a>
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
显示特点：
a标签默认文字有下划线，CSS样式：去除下划线属性为text-decoration:none;
a标签从未点击过，默认文字显示蓝色
a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
属性名：target
属性值：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口跳转(覆盖原网页) |
| _blank | 在新窗口跳转(保留原网页) |
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>空链接（拓展补充）
代码：
<a href="#">空链接，不知道跳到哪</a>功能：
点击之后回到网页顶部
开发中不确定该链接最终跳转位置，用空链接占个位置
小结：
1.排版标签：
•标题h系列、段落p、换行br、水平线hr
2.文本格式化标签：
•加粗strong、下划线ins、倾斜em、删除线del
3.图片标签：
•img标签+ src属性+ alt属性+ title属性+ width属性+ height属性
4.路径：
•相对路径：同级目录+ 下级目录+ 上级目录
5.音频标签、视频标签：
•audio标签、video标签+ src属性+ controls属性
6.链接标签：
•a标签+ href属性+ target属性
DAY02
HTML
列表标签
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
无序列表
场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成:
标签名 说明 ul 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 显示特点：
列表的每一项前默认显示圆点标识
在CSS中去除默认圆点属性是：list-style: none;
注意点
ul标签中只允许包含li标签
li标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>水果市场</h1><ul><li>香蕉</li><li>苹果</li><li>火龙果</li><li>樱桃</li></ul>
</body>
</html>
有序列表
场景：在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成：
标签名 ol 表示有序列表的整体，用于包裹li标签 li 表示有序列表的每一项，用于包含每一行的内容 显示特点：
列表的每一项前默认显示序号标识
注意点
ol标签中只允许包含li标签
li标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>成绩分布</h1><ol><li>段文娟：99</li><li>段文鸯：80</li></ol>
</body>
</html>
自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现。
标签组成：
标签名 说明 dl 表示自定义列表的整体，用于包含dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 显示特点：
dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>产品售后</dt><dd>维修处理</dd><dd>退货处理</dd></dl>
</body>
</html>
无序列表最常用，有序列表偶尔用，自定义列表底部导航用
表格标签
表格的基本标签
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
标签名 说明 table 表格整体，可用于包裹多个tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容 注意点：
标签的嵌套关系：table > tr > td
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300"><!-- table包含tr,tr包含td --><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>段文娟</td><td>100</td><td>牛逼</td></tr><tr><td>易烊千玺</td><td>90</td><td>无氧攀珠峰</td></tr></table>
</body>
</html>
表格相关属性
场景：设置表格基本展示效果
常见相关属性：
属性名 属性值 说明 border 数字 边框宽度 width 数字 表格宽度 height 数字 表格高度 注意点：
实际开发时针对于样式效果推荐用CSS设置
表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
其他标签：
标题名 名称 说明 caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示 th 表头单元格 表示一行小标题，通常用于表格的第一行，默认内部文字加粗并居中显示 注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><table border="1"><caption> <b>学生成绩单</b> </caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>张三</td><td>100分</td><td>真棒，第一名</td></tr><tr><td>李四</td><td>99分</td><td>真棒，第二名</td></tr><tr><td>王五</td><td>98分</td><td>真棒，第三名</td></tr><tr><td>总结</td><td>平均</td><td>真棒，大学霸</td></tr></table> </body> </html>
表格的结构标签（了解）
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
合并单元格-思路
场景：将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：
明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
上下合并→只保留最上的，删除其他
左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1"><caption> <b>学生成绩单</b> </caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td rowspan="3">100分</td><td>真棒，第一名</td></tr><tr><td>李四</td><td>真棒，第二名</td></tr><tr><td>王五</td><td>真棒，第三名</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="2">真棒，大学霸</td></tr></tfoot></table>
</body>
</html>
表单标签
input系列标签
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
input标签可以通过type属性值的不同，展示不同效果
type属性值：
标签名 type属性值 说明 input text 文本框，用于输入单行文本 input password 密码框，用于输入密码 input radio 单选框，用于多选一 input checkbox 多选框，用于多选多 input file 文本选择，用于之后上传文件 input submit 提交按钮，用于提交 input reset 重置按钮，用于重置 input button 普通按钮，默认无功能，之后配合js添加功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 写什么就显示什么 -->文本框：<input type="text"><br><br><!-- 书写的内容都会变成点点显示 -->密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file"><br><br>提交按钮：<input type="submit"><br><br>重置按钮：<input type="reset"><br><br>普通按钮：<input type="button">
</body>
</html>
input系列标签-文本框
场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
属性名 说明 placeholder 占位符。提示用户输入内容的文本
input系列标签-密码框
场景：在网页中显示输入密码的表单控件
type属性值：password
常用属性（同文本框）：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容的文本 |
注意点：
type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>文本框：<input type="text" placeholder="请输入用户名"><br>密码框：<input type="password" placeholder="请输入密码">
</body>
</html>
input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
属性名 说明 name 分组。有相同name属性值的单选框为一组，一组中同时只有一个被选中 checked 默认选中 注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
input系列标签-复选框
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
场景：在网页中显示多选多的多选表单控件
type属性值：checkbox
常用属性（同单选框）：
属性名 说明 checked 默认选中 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body>性别： <input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br>兴趣爱好：<input type="checkbox" checked>打篮球<input type="checkbox" >看电视<input type="checkbox" >唱歌 </body> </html>input系列标签-文件选择
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" multiple>
</body>
</html>
input系列标签-按钮
场景：在网页中显示不同功能的按钮表单控件
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮。点击之后提交数据给后端服务器 |
| input | reset | 重置按钮。点击之后恢复表单默认值 |
| input | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意点：
•如果需要实现以上按钮功能，需要配合form标签使用
•form使用方法：用form标签把表单标签一起包裹起来即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="">用户名：<input type="text"><br><br>密码：<input type="password" ><br><br><!-- 提交 --><input type="submit" value="免费注册"><input type="reset"><input type="button" value="普通按钮"></form>
</body>
</html>
button按钮标签
场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮。点击之后提交数据给后端服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意点：
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>我是按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮，没有任何功能</button>
</body>
</html>
select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><select><option>北京</option><option>上海</option><option>广州</option><option selected>深圳</option></select>
</body>
</html>
textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><textarea cols="60" rows="30"></textarea>
</body>
</html>
label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标的for属性中设置对应的id属性值
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
语义化标签
没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>
</body>
</html>
有语义的布局标签（了解）
常见有语义的布局标签有哪些？
•header：网页头部
•nav：网页导航
•footer：网页底部
•aside：网页侧边栏
•section：网页区块
•article：网页文章
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header>网页头部</header><nav>网页导航</nav><footer>网页底部</footer><aside>侧边栏</aside><section>网页区块</section><article>网页文章</article>
</body>
</html>
字符实体只用记住 
HTML就这么多啦，后期会总结CSS，大家加油
HTML基础，大三老学姐在线总结相关推荐
- 大三老学姨想说。。。
时间真的过的好快啊~16级小石榴现在变成了老石榴,我们曾经也是小萌新,如今成为了即将毕业的老学姨. 从大二暑假开始,我就跟着YL老师做一个小项目,开学后,在大三上半年我参加了数学建模比赛,嘻嘻嘻... ...
- 【将要进入大学的你该如何学习？如何避免大学生活的各种坑？来看看这篇文章吧！】来自一名大三老学长对将要入学的大一新生的大学生活建议
(虽说题目有点标题党)其实是我家亲戚的小女孩马上要进入大学了,要我给一些建议,然后就罗里吧嗦地写了这么多,可能说的还不够全面,后续如果有时间我又想起来点什么会再补充.希望对将要进入大学的新生们能有所帮 ...
- 大三计算机系学什么,我是一个大三计算机系的学生,我想考本专业的研究生该复习哪些课程?请有经验的学哥学姐帮帮我!谢谢啦!...
我是一个大三计算机系的学生,我想考本专业的研究生该复习哪些课程?请有经验的学哥学姐帮帮我!谢谢啦!以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
- 老学姐2021年数字IC秋招复盘
本着学习交流的目的,写了下面的内容,希望大家都能拿到心仪的offer. 1. 秋招变春招? 从我个人经历来说是这样的,因为今年很多企业六七月份就开始提前批了,而我六七月还在做项目,等我开始的时候,发现 ...
- 计算机大三大四学什么,为什么大学期间很少看到大三大四的同学，他们都在做什么？...
原标题:为什么大学期间很少看到大三大四的同学,他们都在做什么? 网友一: 有的忙于实践学习. 在大学期间,除了课堂学习之外,每一个专业都会安排有诸多实习环节,有认知实习.专业实习.社会实践以及各类操作 ...
- 零基础大数据应该学什么
大数据应该学什么?如果是有基础就根据个人情况来定,如果是零基础想学习大数据,大数据应该学什么?大数据要学的东西有很多,下面列举了一些学习大数据就该学习的技术,许多想学习大数据不知道大数据应该学什么的, ...
- 上海大学c语言基础题目,求c语言大神学长学姐解答题目
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 [问题描述]验证哥德巴赫猜想:任何一个大于6的偶数均可表示为两个素数之和｡例如,6=3+3,8=3+5,-,18=5+13｡要求将6~100之间的偶数都表 ...
- 土地资源管理就业怎么这么难_土地资源管理专业老学姐的毕业建议
临近毕业,学妹学弟们纷纷变得焦躁起来,上研的上研,出国的出国,交换的交换,我们这些没考上又不想二战的人真的好迷茫.虽然自己也是一个新手,不能说真的能告诉你们得到想要的结果应该如何做,但是作为过来人帮你 ...
- 从业老学姐Python经验分享，别再相信培训机构“爬虫好学”的鬼话了，少走弯路！
嗨~我是小鱼 前言 相信很多小伙伴在学习编程时都会去网络上搜索资料,寻找一些前辈的学习方法.这样的开始未尝不可,但是,在搜索的过程中你会惊讶的发现,网络上铺天盖地的"三个月速成python& ...
最新文章
- PHP用户输入安全过滤和注入攻击检测
- JFileChooser多选、选择目录
- Java根据学号提取班级_学生成绩管理系统 1. 能够实现根据以下关键字查询：学生姓名 、学号、班级、课 联合开发网 - pudn.com...
- 物联网技术概论的课程编号_选课推荐 | 第5期:物联网技术概论
- 【转】医学图像之DICOM格式解析
- Application Request Routing (ARR) TIME OUT 502
- HBase之HFile索引机制
- go java websocket_java的连接wss的websocket服务器代码如何转成go代码
- 百面机器学习！算法工程师面试宝典！| 码书
- thinkphp5之配置tp5重写伪静态
- 创维电视安装第三方app
- 《Delphi 4 开发大全》作者、Delphi研发团队开发工程师：史蒂夫·特谢拉（Steve Teixeira）访谈
- GoJS学习-节点渐变背景色
- C# .net+DevExpress自定义控件（UserControl）之分页控件
- 5.网页中增加新的内容
- centos 8 使用 nmcli 配置网桥Bridge（最后有踩坑过程）
- 关于后缀表达式的转换
- 全面分析战！Redis持久化策略，这么一理顺，才知很简单
- Comet OJ 2019 夏季欢乐赛题解
- xsl特殊符号输出总结