day26_HTML

news2025/8/6 10:09:18

今日内容

上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili
同步笔记沐沐霸的博客_CSDN博客-Java2301
零、 复习昨日
一、二阶段介绍
二、HTML

零、 复习昨日

见代码

一、二阶段介绍

第一阶段: 基础入门

  • java基本语法
  • 编程基础(方法,数组)
  • 面向对象编程
  • 常用类
  • 高级(IO,线程,新特性)
  • 未讲(反射.class,注解@)

第一阶段主要是java入门,知道使用java如何编程

第二阶段: javaweb阶段 开发入门

  • 前端
    • 网页(用户直接交互界面)
    • html 网页
    • css 美化
    • js 动起来 - jquery
    • boostrap
  • 服务器
    • 接收网页发送的请求
    • 响应给网页数据
  • 数据库
    • 存储数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DYqIjqig-1678192873380)(https://qiushiju-tuchuang.oss-cn-hangzhou.aliyuncs.com/image/javaweb%E5%BC%80%E5%8F%91.png)]

二、HTML


2.1 HTML概念

​ 网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。

2.2 什么是HTML

HTML全称:Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素
  • 标记:标签,不同的标签实现不同的功能
  • 语言:人与计算机的交互工具

2.3 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

2.4 HTML书写规范

  • HTML标签是以尖括号包围的关键字 例如<a> <img>
  • HTML标签通常是成对出现的,有开始就有结束
  • HTML通常都有属性,格式:属性=‘属性值’(多个属性之间空格隔开)
    • 属性放在开标签内
  • HTML标签不区分大小写,建议全小写
  • HTML标签支持合理的嵌套
<!-- 例如 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>

2.5 开发工具

  • VSCode (微软) (我们使用这款)
  • HBuilder (国产)
  • WebStorm (IDEA家族的)
  • Dreamweaver (考古队)

2.5.1 安装 VSCode

默认下一步下一步就可以.

image-20230306175553697

建议勾选2345,这样可以在右键时有 一个提示"使用VSCode打开文件"

2.5.2 插件

安装插件

  • Auto rename tag (自动改标签名)
  • Chinese (Simplified)(简体中文)
  • Material lcon Theme (图标样式)
  • open in browser (快速使用浏览器打开页面)
  • Prettier - Code formatter (格式化代码)

image-20230306175911196

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

image-20230306175937001

2.5.3 使用vscode

使用VSCode,最好的方式

  • 先在本地磁盘创建好一个前端项目(文件夹)
  • 使用VSCode打开该文件夹
  • 创建页面文件

image-20230306180220055

image-20230306180240350

image-20230306180252280

2.5.4 运行

1 在磁盘中找到文件,使用浏览器打开

2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

三、HTML基本标签


3.1 结构标签[重要]

<html>:根标签       
    <head>:网页头标签
   		<title></title>:页面的标题      
    </head>      
    <body></body>:网页正文
</html>
属性名代码描述
text< body text=“#f00”></ body>设置网页正文中所有文字的颜色
bgcolor< body bgcolor=“#00f”></ body>设置网页的背景色
background< body background=“1.png”></ body>设置网页的背景图

颜色的表示方式:

  • 第一种方式:用表示颜色的英文单词,例,red green blue

  • 第二种方式:用16进制表示颜色,例,#000000 #ffffff #325687 #377405

  • 第三种方式: 用三原色rgb(0,0,0) 数字取值0-255

3.2 排版标签 [重要]

  • 可用于实现简单的页面布局

  • 注释标签:

  • 换行标签:< br> (单标签,没有行间距)

  • 段落标签:< p>文本文字</ p>

    • 特点:段与段之间有空行 (行间距比较大)
    • 属性:align对齐方式(left、center、right)
  • 水平线标签:< hr/> (单标签)

    • 属性:
      • ​ width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)
      • ​ size: 水平线的粗细 (像素表示,例如:10px)
      • ​ color:水平线的颜色
      • ​ align:水平线的对齐方式

3.3 块标签[重要]

使用CSS+DIV是现下流行的一种布局方式

标签代码描述
div< div></ div>行级块标签,独占一行,换行
span< span></ span>行内块标签,所有内容都在同一行

3.4 基本文字标签

font标签处理网页中文字的显示方式

属性名代码描述
size< font size=“7”></ font>用于设置字体的大小,最小1号,最大7号
color< font color=“#f00”></ font>用于设置字体的颜色
face< font face=“宋体”></ font>用于设置字体的样式

3.5 文本格式化标签

使用标签实现标签的样式处理

标签代码描述
b< b></ b>粗体标签
strong< strong></ strong>加粗
em< em></ em>强调字体
i< i></ i>斜体
small< small></ small>小号字体
big< big></ big>大号字体
sub< sub></ sub>上标标签
sup< sup></ sup>下标标签
del< del></ del>删除线

3.6 标题标签

随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行

标签代码描述
h1< h1></ h1>1号标题,最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题,最小字号

3.7 列表标签

无序列表:使用一组无序的符号定义, < ul>< /ul>

<ul type="circle">
    <li></li>
</ul>
属性值描述用法举例
circle空心圆< ul type=“circle”>< /ul>
disc实心圆< ul type=“disc”>< /ul>
square黑色方块< ul type=“square”>< /ul>

有序列表:使用一组有序的符号定义, < ol>< /ol>

<ol type="a" start="1">
    <li></li>
</ol>
属性值描述用法举例
1数字类型< ul type=“1”>< /ul>
A大写字母类型< ul type=“A” >< /ul>
a小写字母类型< ul type=“a”>< /ul>
I大写古罗马< ul type=“I”>< /ul>
i小写古罗马< ul type=“i”>< /ul>

列表嵌套:无序列表与有序列表相互嵌套使用

代码举例:
	<ol>
		<li></li>
        <li></li>
        <li>
        	<ul>
                <li></li>
            </ul>
        </li>
	</ol>

3.8 图形标签

在页面指定位置处中引入一幅图片, < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息

路径问题:

  • ./ 当前文件夹 .
  • …/ 上一层文件夹

3.9 链接标签[重要]

  • 在页面中使用链接标签跳转到另一页面

    • 标签: < a href=“”>< /a>

    • 属性:href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式,target属性

    • _blank在新窗口中打开
    • _self在原页面中打开
  • 指向同一页面中指定位置
    • 定义位置: < a name=“名称”>< /a>
    • 指向: < a href=“#名称”>< /a>

  • 定义位置: < a name=“名称”>< /a>
  • 指向: < a href=“#” target=“名称”>< /a>

练习: 图片加链接

    <a href="https://baijiahao.baidu.com/s?id=1759639483122297148">
      <img src="../images/1.jpg" />
    </a>

练习: 列表加链接

    <ul>
      <li>
        <a href="#">外长现场读宪法回应台湾问题热</a>
      </li>
      <li>
        <a href="#">委员建议允许女职工哺乳期灵活办公</a>
      </li>
      <li>
        <a href="#">十组数据看增进民生福祉</a>
      </li>
    </ul>

3.10 表格标签

1-11-21-3
1-11-2

普通表格(table,tr,td)

<table> <!--  表格 -->
	<tr> <!--  table row 行 -->
		<td></td> <!-- 单元格 -->
	</tr>
</table>

表格的列标签(th):内容有加粗和居中效果

<table>
	<tr>
		<th></th> <!-- table head-->
	</tr>
</table>

表格的列合并属性(colspan):在同一行内同时合并多个列
column 列

<table>
	<tr>
		<td colspan="合并的列数"></td>
	</tr>
</table>

表格的行合并属性(rowspan):在同一列跨多行合并

<table>
	<tr>
		<td rowspan="合并的行数"></td>
	</tr>
</table>

练习: 模仿下图形式(2行,4列,每个单元格是图片,点击图片能跳转)

image-20221108100414023

作业: 请假表格

四、HTML表单标签**[最重要]**


html表单用于收集不同类型的用户输入数据

4.1 form元素常用属性

  • action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
  • method:请求方式:get 和post
    • get:
      • 地址栏,请求参数都在地址后拼接 path?name=张三&password=23456
      • 不安全
      • 效率高
      • get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据
    • post:
      • 地址栏:请求参数单独处理。
      • 安全可靠些
      • 效率低
      • post请求大小理论上无限;一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值:application/x-www-form-urlencoded 普通表单
    • multipart/form-data 多部分表单(一般用于文件上传)​

4.2 input元素

作为表单中的重要元素,可根据不同type值呈现为不同状态

属性值描述代码
text单行文体框< input type=“text”/> 默认的
password密码框< input type=“password”/>
radio单选按钮< input type=“radio”/>
checkbox复选框< input type=“checkbox”/>
date日期框< input type=“date”/>
time时间框< input type=“time”/>
datetime日期和时间框< input type=“datetime”/>
email电子邮件输入< input type=“email”/>
file文件上传< input type=“file”/>
hidden隐藏域< input type=“hidden”/>
submit表单提交按钮< input type=“submit”/>
button普通按钮< input type=“button”/>
reset重置按钮< input type=“reset”/>

input标签中属性

  • value 输入框的值
  • name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

4.3 select 元素(下拉列表)

  • 单选下拉列表:< select>< /select>

  • 默认选中属性:selected=“selected”

    • ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可
<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>
  • 多选下拉列表属性: < select></ select>
  • 多选列表:multiple=“multiple”
<select multiple="multiple">
    <option></option>
</select>

4.4 textarea元素(文本域)

多行文本框: < textarea cols=“列” rows=“行”>< /textarea>

4.5 综合示例

案例效果图
image-20230306182027262

作业: 12306 注册页面

五、HTML框架标签


  • 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
  • 使用框架的缺点:
    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面

5.1 iframe

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>

<a href="demo2.html" target="myframe">页面2</a>
<a href="demo3.html" target="myframe">页面3</a>
<a href="demo4.html" target="myframe">页面4</a>

<!-- 
	iframe 内联框架标签
		src: 资源路径.当前页面加载,会自动从src指定的路径出加载出页面.该页面就出现在
		     该框架内
		name: 定义该框架标签的名字
		width/height: 
 -->
<iframe src="demo1.html" name="myframe" width="600px" height="600px"></iframe>
</body>
</html>

六、HTML的其它标签和特殊字符


6.1 其他标签

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
 <!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href:引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src:js的文件地址-->
<script type="text/javascript" src=""></script>

6.2 特殊字符

占位符:空格 - &nbsp;

七、总结

主要重点是: 
1 了解二阶段内容
2 学习的是HTML,重点在于标签,记住 (抄,敲)
   上课的时候练习,HTML标签一定要会嵌套
3 关于html属性,了解即可
4 有几个属性必须会
	<img src="">
	<a href="">
	<iframe src="">
	<input type="各种属性值">

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新增 IEC61850、Profinet 驱动

2 月&#xff0c;Neuron 团队主要侧重于开发新的驱动&#xff0c;新增了南向 IEC61850 驱动、南向 Allen-Bradley DF1 驱动、Profinet 驱动支持以及静态点位等功能&#xff0c;这些新驱动和新功能将在 2.4 版本中正式发布。 IEC61850 驱动 IEC61850 标准是电力系统自动化领域…

网络基础(2)

目录1. 端口号2. 套接字socket3. 网络通信3.1 sockaddr与sockaddr_in3.2 接口服务端3.2.1 创建套接字&#xff0c;打开网络文件3.2.2 给该服务器绑定端口和ip&#xff08;特殊处理&#xff09;3.2.3 初始化相关服务器3.2.4 提供服务客户端3.2.5 绑定3.2.6 使用服务4. makefile实…

关于 JavaScript 中的 Promises

在 JavaScript 中&#xff0c;Promise 是一个对象&#xff0c;它表示一个可能还不可用&#xff0c;但会在未来解决的值。Promises 用于处理异步操作&#xff0c;例如发出网络请求或访问数据库&#xff0c;其中结果不是立即可用的。如果你准备好了&#xff0c;我想开始我们的冒险…

基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇

本文目录前言做项目的三大好处强强联手(天狗组合)专栏作者简介专栏的优势后端规划1. SpringBoot 和 SpringCloud 的选择2. Mybatis 和 MybatisPlus 和 JPA 的选择3. MySQL 和 Mongodb 的选择4. Redis 和 RocketMQ5. 后端规划小总结后端大纲提前掌握的知识点一期SpringBoot二期S…

EventLoop机制

JavaScript 是单线程的语言 JavaScript 是一门单线程执行的编程语言。也就是说&#xff0c;同一时间只能做一件事情。 单线程执行任务队列的问题&#xff1a; 如果前一个任务非常耗时&#xff0c;则后续的任务就不得不一直等待&#xff0c;从而导致程序假死的问题。 同步任…

机器学习和深度学习的综述

机器学习和深度学习的综述 1.1.1人工智能、机器学习、深度学习的关系 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是最宽泛的概念&#xff0c;是研发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。由于这个定义…

代码随想录算法训练营第二十一天打卡 | 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

打卡第21天&#xff0c;继续二叉树&#xff0c;前几天终于补完了&#xff0c;感觉难度上来了。 今日任务 530.二叉搜索树的最小绝对差501.二叉搜索树中的众数 二叉树的最近公共祖先 530.二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不…

计算机网络——路由、交换、子网篇

子网掩码 解释1 作者&#xff1a;纪言 链接&#xff1a;https://www.zhihu.com/question/56895036/answer/447915532 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 仅限ip4首先子网掩码这名字取得很好&#xff0c…

Java创建线程的方式只有一种:Thread+Runnable

Java创建线程的方式其实只有一种&#x1f468;‍&#x1f393;一、继承Thread&#x1f468;‍&#x1f393;二、实现Runnable接口&#x1f468;‍&#x1f393;三、实现Callable接口&#x1f468;‍&#x1f393;四、通过线程池创建&#x1f468;‍&#x1f393;五、总结一般我…

SOLID 原则要这么理解!

什么是 SOLID 原则 SOLID 原则其实是用来指导软件设计的&#xff0c;它一共分为五条设计原则&#xff0c;分别是&#xff1a; 单一职责原则&#xff08;SRP&#xff09;开闭原则&#xff08;OCP&#xff09;里氏替换原则&#xff08;LSP&#xff09;接口隔离原则&#xff08;…

Matter 系列 #9|乐鑫 Matter 预配置服务加速设备生产

乐鑫 Matter 系列文章 #9 目录 Matter 预配置服务 1. 设备认证 (Device Attestation) 2. 独特性 (Uniqueness) 3. 安全性 (Security) 联系我们​​​​​​​ 如今&#xff0c;物联网行业蓬勃发展&#xff0c;大量市场参与者正在积极地构建 Matter 智能设备。 乐鑫一直致…

盲盒开发:多元化设计、数字化销售、可持续发展

随着互联网的发展&#xff0c;盲盒成为了一种新型文化现象和玩具消费方式。它不仅满足了人们的消费需求&#xff0c;也引发了人们对玩具和收藏品的热爱和追求。目前&#xff0c;盲盒市场已经逐渐发展成为一个庞大的产业&#xff0c;其中海外盲盒市场更是异彩纷呈&#xff0c;备…

Git安装初始化及Gitee上传提交步骤

一、git安装git下载https://git-scm.com/download/win直接点击下一步“next”安装即可在桌面右键&#xff0c;选择 Git Bash Here 在 Git Bash Here 终端里输入 git --version 查看 git 版本&#xff0c;如图所示&#xff0c;说明 Git 安装成功。在终端设置用户签名邮箱git con…

windows7安装sql server 2000安装步骤 及安装过程中遇到的问题和解决方式

提示&#xff1a;文章写完后windows7安装sql server 2000安装步骤 及安装过程中遇到的问题和解决方式&#xff0c; 文章目录一、ms sql server 2000是什么&#xff1f;版本简介&#xff1a;**特点&#xff1a;****优点&#xff1a;**二、步骤1.下载安装包及Sq4补丁包2.安装 ms …

淘宝 APP 网络架构演进与弱网破障实践

作者&#xff1a;沈良炜 阿里大淘宝终端体验平台团队 面对移动互联网络下复杂多变的网络环境&#xff0c;如何提供更稳定可靠的请求性能&#xff0c;保障用户的加载浏览体验&#xff1f;本文将为大家分享淘宝APP统一网络库的演进。 一、引言 自2013年ALLIN无线到今天&#xff0…

ESP32设备驱动-土壤湿度传感器驱动

土壤湿度传感器驱动 1、土壤湿度传感器介绍 土壤湿度传感器由两个探头组成,用于测量水的体积含量。 两个探头让电流通过土壤,然后得到电阻值来测量水分值。 当有更多的水时,土壤会传导更多的电,这意味着电阻会更小。 因此,水分含量会更高。 干燥的土壤导电性差,所以当…

第八章.贝叶斯分析—贝叶斯定理朴素贝叶斯

第八章.贝叶斯分析 8.1 贝叶斯定理&朴素贝叶斯 贝叶斯主要应用与新闻分类&#xff0c;文本分类&#xff0c;评论分析。 1.数理统计学处理的信息 1).贝叶斯方法 关于统计推断的系统理论和方法&#xff0c;称为贝叶斯方法。 2).经典统计学 总体信息&#xff1a;当前总体样…

【2223sW2】LOG2

写在前面 好好学习&#xff0c;走出宿舍&#xff0c;走向毕设&#xff01; 一些心路历程记录&#xff0c;很少有代码出现 因为鬼知道哪条代码到时候变成毕设的一部分了咧&#xff0c;还是不要给自己的查重挖坑罢了 23.3.2 检验FFT 早上师兄帮忙看了一眼我画的丑图&#xff…

什么是模块,Python模块化编程(入门必读)

Python 提供了强大的模块支持&#xff0c;主要体现在&#xff0c;不仅 Python 标准库中包含了大量的模块&#xff08;称为标准模块&#xff09;&#xff0c;还有大量的第三方模块&#xff0c;开发者自己也可以开发自定义模块。通过这些强大的模块可以极大地提高开发者的开发效率…

深入理解Mysql索引底层数据结构与算法

索引是帮助MySQL高效获取数据的排好序的数据结构 深入理解Mysql索引底层数据结构与算法1.常见的数据结构讲解1.1 二叉树1.1.1 二叉树的定义1.1.2 二叉树示例1.1.3 Mysql为什么不使用二叉树进行数据存储1.2 红黑树1.2.1 红黑树的定义1.2.2 红黑树示例1.2.3 Mysql 为什么不适用红…