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

字符实体

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

<!--在网页中敲键盘的空格,网页只识别一个-->
&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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33814.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu22.04 关于挂在设备为nfts文件格式无法创建软连接的问题

最近遇到情况&#xff0c;解压工程报错&#xff0c;无法创建软连接 但是盘内还有130G空间&#xff0c;明显不是空间问题&#xff0c;查找之后发现是移动硬盘的文件格式是NTFS&#xff0c;在ubuntu上不好兼容&#xff0c;于是报错。 开贴记录解决方案。 1.确定文件格式 使用命…

深度解读DeepSeek部署使用安全(48页PPT)(文末有下载方式)

深度解读DeepSeek&#xff1a;部署、使用与安全 详细资料请看本解读文章的最后内容。 引言 DeepSeek作为一款先进的人工智能模型&#xff0c;其部署、使用与安全性是用户最为关注的三大核心问题。本文将从本地化部署、使用方法与技巧、以及安全性三个方面&#xff0c;对Deep…

RK3568 Android13 源码编译

提示&#xff1a;RK3568 Android13 源码编译 脚本&#xff0c;源码编译管理方式优化 文章目录 获取源码设置屏幕配置确认屏幕修改源码的设备树 修改线程数整体编译Android固件配置JDK java 环境 source javaenv.sh使能编译 build/envsetup.sh lunch topeet_rk3568-userdebug整体…

【CentOS】搭建Radius服务器

目录 背景简介&#xff1a;Radius是什么&#xff1f;Radius服务器验证原理搭建Radius服务器环境信息yum在线安装配置FreeRADIUS相关文件clients.conf文件users文件重启服务 验证 参考链接 背景 在项目中需要用到Radius服务器作为数据库代理用户的外部验证服务器&#xff0c;做…

ToB公司找客户专用|大数据获客系统

对于ToB公司而言&#xff0c;找到并吸引合适的潜在客户并非易事。传统的获客手段如参加行业展会、电话推销以及直接拜访等&#xff0c;虽然在过去取得了一定成效&#xff0c;但如今却暴露出诸多问题。首先&#xff0c;这些方法往往成本高昂&#xff0c;无论是时间还是金钱上的投…

Linux 文件权限类

目录 文件属性 从左到右的10个字符表示 rwx作用文件和目录的不同解释 图标&#xff1a; 案例实操 chmod 改变权限 基本语法 经验技巧 案例实操 拓展&#xff1a;可以通过一个命令查看用户列表 chown改变所有者 基本语法 选项说明 案例实操 chgrp 改变所属组 基…

DeepSeek技术解析:MoE架构实现与代码实战

以下是一篇结合DeepSeek技术解析与代码示例的技术文章&#xff0c;重点展示其核心算法实现与落地应用&#xff1a; DeepSeek技术解析&#xff1a;MoE架构实现与代码实战 作为中国AI领域的创新代表&#xff0c;DeepSeek在混合专家模型&#xff08;Mixture of Experts, MoE&…

vue3:八、登录界面实现-页面初始搭建、基础实现

一、初始工作 1、创建登录文件 在src/views中创建文件LoginView.vue文件 2、创建路由 在router/index.js中增加登录的信息 代码 import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({hist…

dify+mysql的诗词助手

目录 数据库表结构&#xff1a; 数据库查询的http服务搭建&#xff1a; 流程引擎搭建&#xff1a; 开始&#xff0c; HTTP查询数据库&#xff0c; LLM数据分析&#xff0c; 直接回复&#xff0c; 效果测试&#xff1a; 下载链接&#xff1a; 数据库表结构&#xff1a;…

jenkins 配置邮件问题整理

版本&#xff1a;Jenkins 2.492.1 插件&#xff1a; A.jenkins自带的&#xff0c; B.安装功能强大的插件 配置流程&#xff1a; 1. jenkins->系统配置->Jenkins Location 此处的”系统管理员邮件地址“&#xff0c;是配置之后发件人的email。 2.配置系统自带的邮件A…

谷歌Chrome或微软Edge浏览器修改网页任意内容

在谷歌或微软浏览器按F12&#xff0c;打开开发者工具&#xff0c;切换到console选项卡&#xff1a; 在下面的输入行输入下面的命令回车&#xff1a; document.body.contentEditable"true"效果如下&#xff1a;

blender使用初体验(甜甜圈教程)

使用blender 建模了甜甜圈&#xff0c;时间空闲了&#xff0c;但愿能创建点好玩的吸引人的东西

Adobe Firefly 技术浅析(三):GANs 的改进

生成式对抗网络(GANs)在图像生成领域取得了显著的进展,但原始的 GANs 在训练稳定性、生成质量以及多样性方面存在一些挑战。Adobe Firefly 在其图像生成技术中采用了多种改进的 GANs 方法,以提高生成图像的质量和多样性。 1. 条件生成式对抗网络(cGANs) 1.1 基本原理 …

go GRPC学习笔记

本博文源于笔者正在学习的gprc&#xff0c;相关配套书籍素材来源是《Go编程进阶实战》&#xff0c;博文内容主要包含了RPC模式讲解&#xff0c;RPC通过htttp访问、拦截器、提高服务端与客户端容错的内容配置 在此之前需要下载protoc&#xff0c;这里不做下载过程 1、RPC模式 …

CentOS 系统安装 docker 以及常用插件

博主用的的是WindTerm软件链接的服务器&#xff0c;因为好用 1.链接上服务器登入后&#xff0c;在/root/目录下 2.执行以下命令安装docker sudo yum install -y yum-utilssudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.reposudo…

MindGYM:一个用于增强视觉-语言模型推理能力的合成数据集框架,通过生成自挑战问题来提升模型的多跳推理能力。

2025-03-13&#xff0c;由中山大学和阿里巴巴集团的研究团队提出了MindGYM框架&#xff0c;通过合成自挑战问题来增强视觉-语言模型&#xff08;VLMs&#xff09;的推理能力。MindGYM框架通过生成多跳推理问题和结构化课程训练&#xff0c;显著提升了模型在推理深度和广度上的表…

论文阅读笔记——LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

LoRA 论文 传统全面微调&#xff0c;对每个任务学习的参数与原始模型相同&#xff1a; m a x Φ ∑ ( x , y ) ∈ Z ∑ t 1 ∣ y ∣ l o g ( P Φ ( y t ∣ x , y < t ) ) 式(1) max_{\Phi}\sum_{(x,y)\in Z}\sum^{|y|}_{t1}log(P_{\Phi}(y_t|x,y<t)) \qquad \text{式(…

Umi-OCR 全家桶

介绍&#xff1a; 下载 访问官网地址 https://github.com/hiroi-sora/umi-ocrhttps://github.com/hiroi-sora/umi-ocr 点击下载&#xff08;.exe 文件 安装即可&#xff09; 桌面使用 安装完毕后去安装路径下点击 Umi-OCR.exe &#xff08;默认不会生成桌面的快捷方式&…

oracle中OS BLOCK的含义

在Oracle数据库中&#xff0c;OS BLOCK&#xff08;操作系统数据块&#xff09;是指操作系统层面上的数据块&#xff0c;它与Oracle数据库内部的逻辑存储单元BLOCK&#xff08;数据块&#xff09;有所区别但密切相关。以下是对OS BLOCK的详细解释&#xff1a; 定义与概念 OS BL…

mac部署GPT-SoVITS,生成粤语踩坑点及使用记录

自己录音&#xff0c;普通话或者粤语 注意&#xff1a; 与在其他设备上训练的模型相比&#xff0c;在mac上使用gpu训练的模型的质量明显较低&#xff0c;因此我们暂时使用cpu代替。 Install Xcode command-line tools by running xcode-select --install.Install FFmpeg by …