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基本骨架

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><!--不会换行-->

字符实体

作用：在网页中显示预留字符(显示出特殊符号，如<、>)
在这里插入图片描述

<!--在网页中敲键盘的空格，网页只识别一个-->
&nbsp;你好&nbsp;&nbsp;&nbsp;&nbsp;世界！
<br>
&lt;&gt;

综合案例->写一个注册信息

<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>