网站建设实验心得,网站建设设计大作业,wordpress 时间标题展示,wordpress 博客模板目录
HTML含义 HTML作用
HTML的常用元素
元素的特点
元素的分类
1 是否嵌套关系
2 是否独占一行
块元素#xff1a;独占一行
行内元素#xff1a;共享一行
行内元素与块级元素的转换
3是否有结束标签
常用标签
1 标题标签#xff1a;有六级 我们用h1 ~h6 表…目录
HTML含义 HTML作用
HTML的常用元素
元素的特点
元素的分类
1 是否嵌套关系
2 是否独占一行
块元素独占一行
行内元素共享一行
行内元素与块级元素的转换
3是否有结束标签
常用标签
1 标题标签有六级 我们用h1 ~h6 表示
2 段落标签
内容 3 图像标签: img src 图片路径 是为了添加图片使用的
4 视频标签 添加视频使用
5 列表
5.1 无序列表
5.2 有序列表
6 超链接 内容
1 访问同目录下的网页
2 访问外部 网页
3 访问本地网页
7 标签 8 表单
主要表单标签
综合实例
前端
注意
value属性在不同type下的作用
后端
思路 HTML含义
含义HTML 是一门超文本标记语言 怎么理解这句话呢我们把他拆开来理解 超文本可以理解为 超链接 a 。我们在后面学习超链接 a 时我们知道可以通过超链接的方式把每一个独立的网页串联起来变成我们所熟知的网站。 标记可以理解为给事物打上记号方便浏览器理解。在这里我们使用各种元素注明文本、图片和其他内容。如标题我们 有h1-h6 来表示图片 我们用标签 img表示视频 我们用标签 video表示等等。 总而言之;我们使用 各种元素 搭建 网页的内容 并通过超链接的方式 又使每一个网页相互之间存在某种联系并最终被浏览器解析执行成为我们最终我们看到的网页。 HTML作用
作用定义网页的结构和赋予网页内容
如下图所示最基本的网页框架
!doctype html
html langzh-CNheadmeta charsetutf-8 /title我的测试站点/title/headbodyp这是我的页面/p/body
/html如下图所示每一个部分的含义 !DOCTYPE html: 声明文档类型。早期的 HTML大约 1991-1992 年文档类型声明类似于链接规定了 HTML 页面必须遵从的良好规则能自动检测错误和其他有用的东西。文档类型使用类似于这样 HTMLCopy to Clipboard !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd文档类型是一个历史遗留问题需要包含它才能使其他东西正常工作。现在只需要知道 !DOCTYPE html 是最短的有效文档声明html/html: html 元素。这个元素包裹了页面中所有的内容有时被称为根元素。head/head: head 元素。这个元素是一个容器它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。meta charsetutf-8: meta 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据比如 base、link、script、style 或 title。charset 属性将你的文档的字符集设置为 UTF-8其中包括绝大多数人类书面语言的大多数字符。有了这个设置页面现在可以处理它可能包含的任何文本内容。没有理由不对它进行设置它可以帮助避免以后的一些问题。title/title: title 元素。这设置了页面的标题也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时页面标题也被用来描述该页面。body/body: body 元素。包含了你访问页面时所有显示在页面上的内容包含文本、图片、视频、游戏、可播放音频轨道等等。 HTML的常用元素
元素的组成 元素的组成开始标签和结束标签 以及标签之间的内容组成 开始标签Opening tag包含元素的名称本例为 p被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中它在段落文本的开始之前。 内容元素的内容本例中就是段落的文本。 结束标签Closing tag与开始标签相似只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误它可能会产生奇特的结果。 如下图所示 元素的特点 1 不区分大小写 2 字符串表示时 双引号单引号都可以使用。但不能交替使用如 11。 元素的分类
1 是否嵌套关系
嵌套元素把两元素相互嵌套但不重叠定义为嵌套元素。 你也可以把元素放到其他元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁可以将 very 一词嵌套在 strong 元素中意味着这个单词被着重强调 pMy cat is strongvery/strong grumpy./p注意;元素和元素之间不能重叠。 下面这行代码是错误的 pMy cat is strongvery grumpy./p/strong2 是否独占一行
根据是否独占一行定义为块元素 和行内元素
块元素独占一行 在HTML中常见的块元素主要包括以下几种 标题标签h1至h6这些标签用于定义HTML文档中的标题h1表示最高级别的标题而h6表示最低级别的标题。段落标签p用于定义HTML文档中的段落。div标签最典型的块元素用于定义一个文档中的分区或节常用于布局和样式化。列表标签包括无序列表ul、有序列表ol以及列表项li用于创建HTML文档中的列表。表格相关标签如table表格、tr表格行、th表格头单元格等虽然它们在现代网页设计中使用较少但仍然属于块元素。其他块元素如dl定义列表、dt定义术语、dd定义描述、hr水平线等这些标签在特定的HTML文档结构中也有应用。块元素的特点包括独占一行即每个块元素都会从新的一行开始并在其后的内容之前结束。可以设置宽度、高度、外边距以及内边距等CSS属性这使得块元素在网页布局和样式化中具有更大的灵活性。 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp1111111111/p p1111111111/p/body
/html 打开浏览器发现每一个块元素都独占一行 行内元素共享一行 实例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyspan1111111111/spanspan2222222/span/body
/html 打开浏览器发现每一个行内元素都共享一行 以下是一些常见的行内元素及其用途 文本相关元素 span用于对文本中的部分内容进行分组或应用样式。a用于创建超链接可以链接到其他网页或同一网页内的其他位置。em表示强调的文本通常呈现为斜体。strong表示语气更为强烈的强调文本通常呈现为粗体。b、i、u、s分别用于设置文本的粗体、斜体、下划线和删除线效果。sup、sub分别用于设置上标和下标文本。code、pre用于表示代码或预格式化文本。图像相关元素 img用于在HTML文档中嵌入图像。input typeimage用于创建图像输入字段通常用于提交表单时作为按钮使用。表单相关元素 inputtype属性为text、button、checkbox、radio等用于创建文本输入字段、按钮、复选框和单选按钮等。select用于创建下拉列表。textarea用于创建多行文本输入字段。button用于创建可点击的按钮。其他元素 label为表单元素定义标签。option用于定义下拉列表中的选项。iframe用于在当前HTML文档中嵌入另一个HTML文档。audio、video用于嵌入音频和视频内容。 行内元素与块级元素的转换 在CSS中可以使用display属性来修改元素的显示类型实现行内元素与块级元素之间的转换 将行内元素转换为块级元素display: block;将块级元素转换为行内元素display: inline;将元素转换为行内块级元素既具有行内元素的特性又可以设置宽度和高度display: inline-block; 这种转换在网页布局和样式化中非常有用可以灵活地调整元素的显示方式和行为。 3是否有结束标签
如果这个元素没有结束标签如 img ,video等 这些都没有结束标签我们称为空元素
在标签中根据有么有结束标签分为单标签/双标签。
单标签也称为空标签或自闭合标签是由一个尖括号包围的标签它没有结束标签。
在这里 单标签就是指 空元素。 我刚刚讲元素是由标签和标签所包含的内容组成接下来讲常见的标签
常用标签
1 标题标签有六级 我们用h1 ~h6 表示 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1111111111111111/h1h2111111111111111/h2h3111111111111111/h3h4111111111111111/h4h5111111111111111/h5h6111111111111111/h6/body
/html 打开浏览器 特点 大小依次降低 2 段落标签p 内容/p 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- h1111111111111111/h1h2111111111111111/h2h3111111111111111/h3h4111111111111111/h4h5111111111111111/h5h6111111111111111/h6--
p1111111111111/p
/body
/html 打开浏览器 3 图像标签: img src 图片路径 是为了添加图片使用的 实例 src 表示当前标签的属性查找图片时需要的路径 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
img srcC:\Users\Administrator\Pictures\image\6.jpg
/body
/html 打开浏览器 4 视频标签video 添加视频使用 5 列表
5.1 无序列表 格式如下 ul li /li /ul 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
!-- 无序列表--ulli1/lili22/lili333/li/ul
/body
/html 5.2 有序列表 格式olli /li/ol 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
!-- 有序列表--olli1/lili22/lili333/li/ol
/body
/html 6 超链接 a href 网页地址 内容 /a
超链接有三种应用方式
1 访问同目录下的网页 什么意思呢 假设你创建了多个HTML文件你想通过超链接跳转到其他网页中去 实例 打开浏览器 2 访问外部 网页 举个例 你想要访问 文心一言的网页 实例 3 访问本地网页 实例 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp今天a href#p1 天气/a怎么样/pbr
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
brp idp1天气真不错/p /body
/html 从以上的代码我们不难看出如果我们 要看写在下面的p标签的内容如果不使用超链接 是要使用鼠标一直滑动的但如果使用了超链接就更为方便。 思路把“#p1 作为锚点当你点击时会跳转到目标位置--p1。 7 标签 br hr
br :换行符 hr:水平制表符
实例 8 表单
表单的作用 收集用户提交的数据并传递给服务器 表单的语法 主要表单标签 form标签 作用定义表单的整体区域用于收集和传递用户信息。属性 action定义表单提交的服务器地址。method定义表单的提交方式常用的有GET和POST两种。 input标签 作用定义不同类型的用户输入数据方式是最重要也是最全能的表单标签之一。属性 type定义输入字段的类型如文本框text、密码框password、单选按钮radio、复选框checkbox、按钮button等。name定义提交的参数名后台可以通过这个属性找到对应的表单。value定义提交的数据对于文本框等输入型控件value属性表示输入框的默认值对于按钮等控件value属性表示按钮上显示的文本。checked用于单选按钮和复选框表示默认选中状态。 textarea标签 作用定义多行文本输入的控件允许用户输入大段文本。属性 rows设置文本区域的可见行数。cols设置文本区域的可见宽度以像素为单位。maxlength设置文本输入框的最大输入字数。placeholder定义文本输入框还未输入文本前框里的输入说明。 label标签 作用为表单元素定义文字标注提高用户交互体验。属性 for指定该标签与哪个表单元素关联其值应与表单元素的id属性值相同。 select标签 作用定义下拉列表允许用户从多个选项中选择一个或多个值。属性 name定义提交的参数名。通常与option标签一起使用option标签设置下拉列表中的各个选项。 button标签 作用定义按钮控件可以包裹更多类型的内容如文本、图片等。属性 type定义按钮的类型如普通按钮button、提交按钮submit、重置按钮reset。 综合实例
问题写一个表单 名字密码日期单选多选,上传文件并且记录文件的大小将这些信息上传给服务器在idea中搭建spring boot 项目接收来自前端发来的数据
最终结果如下图所示 点击提交 前端
重点 1 form标签中最为重要的三个属性 action 属性 ;定义表单提交的服务器地址 method 属性定义表单提交的方式如get :向服务器获取数据post:向服务器发送数据 enctype属性上传文件时需要添加该属性来选择数据格式multipart/form-data 注意 1在单选和多选都使用了 name 属性 原因表示同一字段组方便区分 2 checked 表示单选或多选中的默认选项 3value 表示默认值 在HTML的input标签中value属性扮演着关键角色它的功能根据input标签的type属性值的不同而有所差异。 value属性在不同type下的作用 文本输入typetext: value属性为文本输入框设定了默认值。当页面首次加载时这个值会显示在输入框内用户可以修改它。密码输入typepassword: 与文本输入类似value属性为密码输入框设定了默认值但出于安全考虑这些字符在输入框中通常以圆点或星号等掩码字符显示。单选按钮typeradio和复选框typecheckbox: 对于这两种类型的输入value属性定义了当该选项被选中时表单数据中将包含哪个值。此外checked属性可用于预设哪个选项在页面加载时就被选中。提交按钮typesubmit、重置按钮typereset和普通按钮typebutton: 在这些情况下value属性定义了按钮上显示的文本。例如一个提交按钮的value可能设为“提交”而一个重置按钮的value可能设为“重置”。隐藏输入typehidden: 隐藏输入字段不会在页面上显示但其value属性仍会随表单一起提交。这种类型通常用于传递不需要用户直接修改的数据。文件选择typefile: 对于文件选择输入value属性通常不由开发者直接设置而是由用户通过文件选择对话框选定文件后自动填充。不过出于安全和隐私的考虑即使文件被选中浏览器通常也不会在页面 代码如下 !DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionhttp://localhost:8080/test methodpost enctypemultipart/form-data用户 input typetext name usernamebr密码 input typepassword namepasswordbr日期 input typedate namedatebr男 input typeradio namesex value男 checked 女 input typeradio namesex value女brlabel Reading input typecheckbox namehobbies valuereading checked /labellabel traveling input typecheckbox namehobbies valuetraveling /label label Cooking input typecheckbox namehobbies valuecooking /label label Sports input typecheckbox namehobbies valuesports /label brinput typefile namefilebrinput typesubmit value提交/form
/body
/html!-- input typecheckbox nameff value唱歌input typecheckbox nameff value跳舞input typecheckbox nameff value游戏 --
后端
前提已经搭建好spring boot的基本工程
思路
1 在TestController 类中 通过RequestMapping 注解 映射路径方式找到服务器并调用ff方法向User类传递数据和获得传递过来的文件的大小最后通过IDEA控制台打印出来
//TestController 类中通过 RequestMapping 注解 映射路径的方式向服务器传递数据
package com.guoqing.controller;import com.guoqing.entity.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;RestController
public class TestController {RequestMapping(/test)public String ff(User user ,MultipartFile file) {System.out.println(useruser);System.out.println(filefile.getSize());return 收到数据;}}
2 User类 中的 成员变量每一个都对应前端代码中的namevalue单选多选值
代码如下 // 在entity 实体包中 User类 中 对应前端发来的数据package com.guoqing.entity;import org.springframework.format.annotation.DateTimeFormat;import java.time.LocalDate;
import java.util.List;public class User{private String username;private String password;DateTimeFormat(pattern yyyy-MM-dd)private LocalDate date;private String sex;private ListString hobbies;public String getUsername() {return username;}public void setUsername(String username) {this.username username;}public String getPassword() {return password;}public void setPassword(String password) {this.password password;}public LocalDate getDate() {return date;}public void setDate(LocalDate date) {this.date date;}public String getSex() {return sex;}public void setSex(String sex) {this.sex sex;}public ListString getHobbies() {return hobbies;}public void setHobbies(ListString hobbies) {this.hobbies hobbies;}Overridepublic String toString() {return User{ username username \ , password password \ , date date , sex sex \ , hobbies hobbies };}
}
本篇的最后由于我需要上传文件使用了method属性enctype属性 下一篇详细介绍method属性enctype属性的相关知识http请求数据格式编码
