HTML5(Web前端开发笔记第一期)-EW帮帮网

p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解

三件套

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>

HTML5(Web前端开发笔记第一期)

目录

三件套

标签

标题标签

段落标签

文本格式化标签

图像标签

超链接标签

锚点链接

默认链接地址

音频标签

视频标签