HTML5(Web前端开发笔记第一期)
p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解
目录
- 三件套
- 标签
- 标题标签
- 段落标签
- 文本格式化标签
- 图像标签
- 超链接标签
- 锚点链接
- 默认链接地址
- 音频标签
- 视频标签
- HTML基本骨架
- 综合案例->个人简介
- 列表
- 表格
- 表单
- input标签
- 单选框radio
- 上传文件file
- 多选框checkbox
- 下拉菜单
- 文本域
- label标签
- 按钮
- 无语义的布局标签
- 字符实体
- 综合案例->写一个注册信息
三件套
Web三件套功能说明
1. HTML（超文本标记语言）
核心功能：定义网页的内容与结构，如标题、段落、列表、图片等元素的层级关系。
实现方式：通过标签搭建文档骨架，形成树状结构供浏览器解析
2. CSS（层叠样式表）
核心功能：控制网页的外观与布局，包括颜色、字体、间距、响应式设计等视觉效果。
实现方式：通过选择器（如类、ID）和属性（如 color、margin）为HTML元素添加样式规则
3. JavaScript（JS）
核心功能：实现网页的交互与动态功能，如表单验证、数据更新、动画效果等。
实现方式：通过操作DOM（文档对象模型）动态修改页面内容，或通过事件监听（如点击、输入）响应用户行为。
。
HTML负责结构，CSS控制样式，JavaScript处理交互和动态功能。
三者共同构建完整的Web页面：HTML提供内容基础，CSS提升视觉体验，JavaScript增强交互性，形成现代Web开发的核心技术体系。
。
比喻说明，HTML是骨骼，CSS是皮肤，JavaScript是器官
标签
HTML:超文本标记语言
超文本，即链接
标记，也叫标签，即带尖括号的文本
语法:</strong> 需要加粗的文字 <strong>
双标签：标签通常成对出现，中间包裹内容
单标签：只有开始标签，没有结束标签
<>里面 放英文字母(标签名)
结束标签比开始标签多"/"
举例
<strong>Hello World</strong><!-- 这是一个注释，它不会在浏览器中显示 --><!-- 换行(注意！浏览器不识别代码中的Enter换行) --><br><strong>Hello World</strong><!-- 添加水平线 --><hr>
嵌套关系：一个标签里面包含了其他标签的写法
并列关系：两个平级别的标签
举例
<html><!-- 嵌套关系 --><head></head><body></body><!-- 平级关系 -->
</html>
标题标签
标签名:h1~h6(双标签)
特点：文字加粗、字号逐渐缩小、独占一行(换行)
h1标签在一个网页中尽量只用一次，用来放新闻标题或网页logo
h2之后的无限制使用
<body><h1>Hello World</h1><h2>Hello World</h2>
</body>
段落标签
一般用在新闻段落、文章段落、产品描述信息等
标签名:p(双标签)
特点：独占一行、段落之间存在间隙
<body><p>这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解</p><!-- 段落之间有间隙 --><p>这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解</p>
</body>
文本格式化标签
为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等
<body><strong>加粗</strong>
<br>
<em>倾斜</em>
<br>
<ins>下划线</ins>
<br>
<del>删除线</del></body>
图像标签
在网页中插入图片
标签名<img src="图片的URL">
src用于指定图像的位置和名称，是图像标签的必须属性
属性名=“属性值”
属性写在尖括号里，标签名后面，标签名和属性之间用空格分开，不区分先后顺序
<body><img src="./1.1.jpg" alt="123" title="我老婆" width="50" height="50" >
<img src="./1.1.jpg" alt="123" title="我老婆" width="100" height="100"></body>
超链接标签
点击跳转其他页面
<!-- 将此窗口跳转到b站 -->
<a href="https://www.bilibili.com/">点击此处跳转b站</a><!-- 新开一个窗口跳转 -->
<a href="1.1.jpg" target="_blank">点击此处跳转</a><!-- herf写#，表示一个空连接 -->
<a href="#" >点击</a>
锚点链接
锚点链接
默认链接地址
默认链接地址
音频标签
标签名<audio src="音频的URL"></audio>
src用于指定音频的位置和名称，是音频标签的必须属性
<body><audio src="2023-09-24%2016-07-36.mp3" controls="controls"></audio>
<audio src="2023-09-24%2016-07-36.mp3" controls></audio>
<!-- 二者等同，这时因为如果属性名和属性值完全一样，可以简写为一个单词--></body>
视频标签
标签名<video src="视频的URL"></video>
src用于指定视频的位置和名称，是视频标签的必须属性
<body><video src="2023-09-24%2016-07-36.mp4" controls width="500" height="500"></video>
<!-- 想要自动播放，就必须要有muted属性 --></body>
HTML基本骨架
HTML的基本骨架是网页模板
html:整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主题，存放给用户看的代码，，例如图片、文字
title:网页标题
综合案例->个人简介
网页制作思路:从上到下、先整体再局部，逐步分析制作
分析内容->写代码->保存->刷新浏览器，看效果
声明：简介及图片完全虚构，如有雷同纯属巧合
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>个人简介</title>
</head>
<body><h1>张三</h1><hr><p>张三（1992年出生），中国<a href="#">人工智能</a>领域青年专家，现任中国<a href="#">人工智能</a>产业发展联盟理事、XX大学客座教授。</p><img src="./img.png" alt="张三照片" title="张三" width="200" height="200"><h2>学习经历</h2><p>2010-2014年：就读于XX大学计算机科学与技术专业，获学士学位， 期间连续四年获学术奖学金，并在核心期刊发表多篇人工智能领域论文 。<br>2014-2017年：攻读同校人工智能方向硕士学位，研究领域聚焦机器学习与自然语言处理，参与多项国家级科研项目</p><h2>主要成就</h2><p>技术创新：<ins>主导开发基于AI的医疗诊断系统，应用于三甲医院，显著提升早期疾病筛查准确率至95%以上</ins>。<br>行业影响：在金融领域推动智能风控模型落地，协助某银行降低30%信贷风险，相关成果获省级科技进步一等奖。<br>学术贡献：发表20余篇SCI论文，出版专著《人工智能跨领域实践》，被多所高校列为教材。</p><h2>社会任职</h2><p>2022年至今：<strong>担任中国人工智能产业发展联盟理事</strong>，参与制定行业技术标准与伦理规范。<br>2024年起：受聘为XX大学客座教授，联合培养硕博研究生，并主导校企合作实验室建设。<br>2025年：入选“青年科技领军人才计划”，兼任市政府数字化转型顾问团成员，推动智慧城市建设。</p></body>
</html>
列表
列表
列表作用：布局内容排列整齐的区域
列表分为：无序列表、有序列表、定义列表
无序列表：布局整齐的不需要规定顺序的区域
标签:ul嵌套li，ul是无序列表，li是列表条目
ul标签里面只能包含li标签；li标签里面可以包裹任何内容
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul><hr><ul><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ul>
有序列表：布局整齐的需要规定顺序的区域
标签:ol嵌套li，ol是无序列表，li是列表条目
ol标签里面只能包含li标签；li标签里面可以包裹任何内容
<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol><hr><ol><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ol>
定义列表
标签:dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
dl里面只能包含dt和dd
dt和dd里面能包裹任何内容
表格
网页中的表格于Excel表格类似，用来展示数据
标签:table嵌套tr，tr嵌套td/th
在网页中表格默认没有边框线，使用border属性可以为表格添加边框线
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td>赵六</td><td>2</td><td>18</td><td>10</td></tr></table>
表格结构标签:用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰
<table border="1"><thead><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr></thead><tbody><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr></tbody><tfoot><tr><td>总结</td><td>总结</td><td>总结</td><td>总结</td></tr></tfoot></table>
合并单元格：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
1：明确合并的目标
2：保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)
跨行合并：保留最上单元格，添加属性rowspa
跨列合并：保留最左单元格，添加属性colspan
3：删除其他单元格
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td rowspan="2">2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td colspan="4">总结</td></tr></table>
表单
表单
表单：收集用户信息
使用场景：登陆页面、注册页面、搜索区域
标签:<form></form>
input标签
input标签type属性值不同，则功能不同
标签:<input type = "...">
<!-- 特点：输入什么就显示什么-->
文本框：<input type="text">
<br>
<!-- 特点：不显示输入-->
密码框：<input type="password">
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">
input标签占位文本：提示信息
标签:<input type = "..." placeholder="提示信息">
多用于文本框和密码框
文本框：<input type="text" placeholder="请输入用户名">
<br>
密码框：<input type="password" placeholder="请输入密码">
单选框radio
<input type="radio" checked name="gender">男
<input type="radio" name="gender">女
上传文件file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能
上传文件：<input type="file" multiple>
多选框checkbox
多选框也叫复选框；默认选中：checked
<input type="checkbox" checked>选项A
<input type="checkbox" checked>选项B
<input type="checkbox">选项C
下拉菜单
标签:select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
<select><option>高一</option><option selected>高二</option><!-- 加了selected，默认选中 --><option>高三</option><option>大一</option>
</select>
文本域
作用：多行输入文本的表单控件
标签:<textarea>默认提示文字</textarea>
label标签
作用：网页中，某个标签的说明文本
用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
label标签-增大点击范围
写法一：label标签只包含内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
写法二：使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">男</label>
支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
按钮
标签:<button type="">按钮</button>
<!-- form表单区域 -->
<form>用户名:<input type="text"><br>密码:<input type="password"><br><button type="submit">提交</button><button type="reset">重置</button></form>
无语义的布局标签
作用：布局网页(划分网页区域，摆放内容)
div：独占一行
span：不换行
两个都是双标签
<div>这是div标签</div><!--独占一行-->
你好,世界!
<span>这是span标签</span><!--不会换行-->
字符实体
作用：在网页中显示预留字符(显示出特殊符号，如<、>)
<!--在网页中敲键盘的空格，网页只识别一个-->
你好 世界！
<br>
<>
综合案例->写一个注册信息
<body>
<!----------------------><h1>注册信息</h1><!---------表单控件-->
<form><!--个人信息-->
<h2>个人信息</h2><label>姓名:</label> <input type="text" placeholder="请输入姓名"><br><label>密码:</label> <input type="password" placeholder="请输入密码"><br><label>确认密码:</label> <input type="password" placeholder="请输入确认密码"><br><br><label>性别:</label><label><input type="radio" name="gender" checked>男</label><label><input type="radio" name="gender">女</label><br><br><label>居住城市:</label><select><option>乐山</option><option>重庆</option><option selected>成都</option><option>资阳</option><option>眉山</option></select><br><br><!--教育经历-->
<h2>教育经历</h2><label>最高学历</label><select><option>大学</option><option>博士</option><option selected>硕士</option><option>高中</option></select><br><br><label>学校:</label> <input type="text" placeholder="请输入学校"><br><label>专业:</label> <input type="text" placeholder="请输入专业"><br><br><label>在校时间</label><select><option>2015</option><option>2016</option><option selected>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option selected>2021</option><option>2022</option></select><br><br><!--工作经历-->
<h2>工作经历</h2><label>公司名称：</label><input type="text" placeholder="请输入公司名称"><br><label>工作描述：</label> <br> <textarea></textarea><br><br><!--协议--><input type="checkbox"><label>已阅读并同意下协议</label><ul><li><a href="#"><ins>《用户服务协议》</ins></a></li><li><a href="#"><ins>《隐私政策》</ins></a></li></ul><br><br><br><br><!--按钮--><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
<!---------------------->
</body>