Day51.HTML、标签、表单、CSS

目录

1.Web基本概念

Web技术体系

2.HTML

一、HTML的基本标签

标签总结

(1) head标签 代表页面的“头”

(2) 超链接标签 

(3) 块标签 

(4) 实体字符(了解)

表格标签 

二、表单标签(重要)

3.CSS(了解)

CSS常用样式


总结:

1.标签由标签名、标签属性和文本内容三部分组成(注意:单标签没有文本内容)。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。
4.通用属性:所有标签都具有的属性(除

通用属性有:
    id:用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
    class:用来给标签取一个类名。
    style:用来设置该标签的行内样式。
    title:当鼠标移到该标签,所显示的提示内容。

5.自定义标签属性:通常用来传值或用于图片懒加载等方面。

格式:data-*
提示文本

...

6.table主要用于呈现格式化数据。表格是由行和列组成。

格式:
    
            …
        
        ...
    

7.table属性

border:表格边框,默认单位是像素
width:表格宽度,默认单位是像素
align:表格对齐方式(left(默认)/center/right)
cellpadding:单元格文本与边框的距离
cellspacing:单元格边框间距

8.跨行/跨列属性主要用来绘制复杂表格。

rowspan:跨行
colspan:跨列

9.完整表格组成:caption(标题)、thead(表头)、tbody(表体)和tfoot(表尾)四部分组成。

10.form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。

常用属性:
    name:表单名称
    action:表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等),或网址)。如果是#,表示提交到当前文件下。
    method:前端提交数据到后端的方法,主要有:get和post,默认的是get。

11.表单元素分为:

1)input类:主用用来输入,选择或发出指令。
    type:text/password/radio/checkbox/file/button/image/submit/reset
        a.text:单行文本输入框 type="text"可以不写,默认值。
            属性:placeholder(提示)/name(命名)/minlength和maxlength(最少/多输入的字符个数)/disabled(失效)/readonly(只读)
                  value(默认值)/pattern(正则匹配)
        b.password:密码框 属性与text一样
        c.radio:单选钮,通常是两项以上。常用属性有:name(必须要有)/value/checked(选中)/disabled(失效)/readonly(只读)
        d.checkbox:复选框,可以用来选择0项、1项或多项。
            常用属性有:name(必须要有)/value/checked(默认选中)/disabled(失效)/readonly(只读)
        e.file:文件上传按钮
        f.button:普通按钮,通常用它去调用脚本代码。
            常用属性有:value(按钮的标题)/disabled(失效)
        g.image:图片按钮,用法与button一样。有一个特殊属性:src(用来加载提示图片,用它替换了value)
            它有提交功能,与submit功能一样。
        h.submit:提交按钮,用来将表单数据提交到后台。
            常用属性有:value(按钮的标题)/disabled(失效)
        j.reset:重置按钮,将表单所有组件输入的内容全部清空,还原为初始状态。
            常用属性有:value(按钮的标题)/disabled(失效)
2)textarea类
    文本域(也可以叫多行文本框),主要用于输入大批量的文本内容。
    常用属性:name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value(获取内容)
3)select类
    下拉列表框,默认用于单项选择。用option呈现每个选项。
    multiple属性:表示可以多选,这时的下拉列表框变成了列表框
    size:最多显示的行数
4)button类
    普通按钮,具有提交功能。可以单独使用,不写在form元素中;如果写在form中,有提交功能。

1.Web基本概念

  • 客户端:与用户进行交互,用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据 。
  • 服务端:与客户端进行交互,接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据。

Day51.HTML、标签、表单、CSS_第1张图片

  • 服务器的作用:与客户端进行交互,接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据;

“服务器”是一个非常宽泛的概念,从硬件而言:服务器是计算机的一种,它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端甚至是火车系统等大型设备)提供计算或者应用服务。从软件而言:服务器其实就是安装在计算机上的一个软件,根据其作用的不同又可以分为各种不同的服务器,例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等

  • 常见的服务器操作系统
  • Linux系统: 使用最多的服务器系统,安全稳定、性能强劲、开源免费(或少许费用)。

  • Unix系统: 和硬件服务器捆绑销售,版权不公开,用法和Linux一样。

  • Windows Server系统: 源代码不开放,费用高昂,漏洞较多,性能较差,运维成本高。

  • 常见的服务器软件:Tomcat(应用服务器)、MySQL(数据服务器)、Redis、FastDFS、ElasticSearch。

  • 虚拟机服务器:虚拟的电脑(模拟器)

业务

业务就是服务器应用程序中的各个功能,例如商城里面的: 注册、登录、添加购物车、提交订单、结算订单等等都称之为业务。

请求(request):将客户端的数据发送到服务端,比如将用户的信息 发送到服务端

响应(response):服务端的数据反馈到客户端   注册成功 注册失败

Day51.HTML、标签、表单、CSS_第2张图片                 Day51.HTML、标签、表单、CSS_第3张图片

Web技术体系

客户端技术:

HTML、CSS、JavaScript、Vue、Ajax、Axios

服务器端技术:

Tomcat、Servlet、Request、Response、Cookie、Session、Filter、Listener、Thymeleaf

持久层技术(数据库技术已学):

MySql、JDBC、连接池、DBUtils

  • 网页的组成
  •  html:超文本标记语言  网页的框架 毛坯房
  • js: js文件 将静态网页变为动态网页 能交互
  • css: 样式 美化网页,精装房

2.HTML

HTML:Hyper Text Markup Language『超文本标记语言』。一门计算机语言,它的作用是搭建网页结构,在网页上展示内容。超文本:可以展示多种资源。标记语言:由一系列『标签』组成的,每个标签都有它固定的含义和确定的页面显示效果。
(

开始标签

结束标签)

html基本结构

              
          
                       
       
    某某宝     


                       
    hello
 今天天气
真好
呀 net/qq_43284469/article/details/109251591

基本语法规则

  1. 文档声明: HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的基本信息,其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本。

  2. 根标签:html标签是整个文档的根标签,只能有一个。其他标签必须放在html标签里面。

  3. 头部:head标签用于定义文档的头部,其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

  4. 主体:body标签定义网页的主体内容,在浏览器窗口内显示的内容都定义到body标签内。

  5. 注释:HTML注释的写法是:

  6. 标签名不区分大小写但建议使用小写

  7. 根标签 有且只能有一个。其他标签必须放在html标签里面。

  8. 无论是双标签还是单标签都必须正确关闭

  9. 标签可以嵌套但不能交叉嵌套,注释不能嵌套

  10. 属性必须有值,值必须加引号,单引号或双引号均可。如果属性名和属性值一样,可以省略属性值。

一、HTML的基本标签

标签总结

标签 说明 语义

~

标题 header

段落 paragraph

(单标签)
换行 break

水平线 horizontal rule
分割(块元素) division
区域(行内元素) span
加粗
倾斜
align="center" 居中
align="right" 居右
列表标签
  • 标记列表
      无序列表
        有序列表
        超链接标签
        target=" "

        在哪里打开跳转的页面

         _blank:新建一个空白页打开
         _self:在当前页打开

          图片标签
        src = "图片资源地址" 图片资源地址,本地文件地址或网络地址
        alt = "未找到" 图片没有加载成功的提示信息
        width = 100xp 设置图片的宽 单位xp(像素)
        height = 100xp 设置图片的高
        块标签

        水平线 horizontal rule
        块标签 进行页面布局,会换行 division
        包裹内容,不会换行 span

        (1) head标签 代表页面的“头”

        内部标签 说明
        </td> <td>定义网页的标题</td> </tr> <tr> <td><meta></td> <td>定义网页的基本信息(供搜索引擎)</td> </tr> <tr> <td><style></td> <td>定义CSS样式</td> </tr> <tr> <td><link></td> <td>链接外部CSS文件或脚本文件</td> </tr> <tr> <td><script></td> <td>定义脚本语言</td> </tr> <tr> <td><base></td> <td>定义页面所有链接的基础定位(用得很少)</td> </tr> </tbody> </table> <pre><code class="language-html"> <body> <!--注释--> <!-- align属性: 对齐属性 left: 左对齐(默认值) right: 右对齐 center: 居中 --> <h1 align ="center">一级标题</h1> <!--居中--> <h2 align ="right">二级标题</h2> <!--最右--> <h3>三级标题</h3> <!--默认最左--> <h4>四级标题</h4> <h5>五级标题</h5> <h5>六级标题</h5> <p>会当凌绝顶 一览众山小</p> <!--段落--> <p>穷则独善其身 达则兼济天下</p> <b>12345</b> <!-- 加粗--> <i>67890</i> <!-- 倾斜--><br> <!-- 单标签,换行--> <b><i>汗滴禾下土</i></b> <!--标签可以嵌套--> <!-- 无序列表--> <!--Ctrl + Shift 快速注解--> <ul> <li>有序1</li> <li>有序2</li> </ul> <!--有序列表--> <ol> 看书 <!--li表示当前内容是小标签,去了就是普通内容--> <li>无序1</li> <li>无序2</li> </ol> <!--快读创建 ul>li*2>{你好} + tab键 要创建一个无序列表 内部有三个li,内容为你好--> <ul> <li>你好</li> <li>你好</li> </ul> </body></code></pre> <h3 id="%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%C2%A0">(2) 超链接标签 </h3> <table> <tbody> <tr> <th style="width:192px;">标签</th> <th style="width:227px;">说明</th> <th style="width:234px;">语义</th> </tr> <tr> <td style="width:192px;"><strong><a></strong></td> <td style="width:227px;">超链接标签</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">href="资源地址"</td> <td style="width:227px;">资源地址,本地或网络地址</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">target=" "</td> <td style="width:227px;"> <p>在哪里打开跳转的页面</p> <p> _blank:新建一个空白页打开<br>  _self:在当前页打开</p> </td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;"></td> <td style="width:227px;"></td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;"><img> </td> <td style="width:227px;">图片标签</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">src = "图片资源地址"</td> <td style="width:227px;">图片资源地址,本地文件地址或网络地址</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">alt = "未找到"</td> <td style="width:227px;">图片没有加载成功的提示信息</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">width = 100xp</td> <td style="width:227px;">设置图片的宽 单位xp(像素)</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;">height = 100xp</td> <td style="width:227px;">设置图片的高</td> <td style="width:269px;"></td> </tr> <tr> <td style="width:192px;"></td> <td style="width:227px;"></td> <td style="width:269px;"></td> </tr> </tbody> </table> <p> 路径问题:</p> <ol> <li>相对路径:相对自身资源而言,会在本级文件夹查找  <br><br> 向上跳转一级  ../</li> <li>绝对路径:从服务器的根目录开始查询,具有明显的标识  /开头 (推荐使用)<br><br> /:服务器的根目录 http://localhost:63342</li> </ol> <pre><code class="language-html"><body> <h1 aligen = "center">超链接标签</h1> <!--超链接标签:进行资源跳转--> <a href="http://www.baidu.com">百度一下</a> <br> <!----> <a href="2.各种标签.html">跳转到2.各种标签页面</a> <!--href = "资源url" target = "_blank" 新的页面(空白页)打开 target = "_self" 在当前页打开 --> <a href="http://www.baidu.com" target = "_blank">百度空白页</a> <a href="http://www.baidu.com" target = "_self">百度当前页</a> <!--路径: 1.相对路径:相对自身资源而言,会在本级文件夹查找 ../跳转到上一级 2.绝对路径:从服务器的根目录开始查询 明显的标识 /开头 (推荐) /表示服务器的根目录 http://localhost:63342 --> <!--<a href="1.Success.html">相对路径访问</a>--> <a href="../02_html/1.Success.html">相对路径访问</a> <!--<a href="/1.Success.html">绝对路径访问</a>--> <!--http://localhost:63342/1.Success.html--> <a href="/World/Java_Web/02_html/1.Success.html">绝对路径访问</a> <!-- 图片标签 src = "图片资源地址" 本地文件地址或网络地址 alt = "图片没有加载成功的提示信息" width 设置图片的宽 单位px像素 屏幕标尺?? height 设置图片的高 --> <!--加载本地图片--> <!--<img src="../img/好康的.jpg" alt="图片没找到!">--> <!--属性设置--> <img src="../img/好康的.jpg" width="500px" height="300px" alt="图片没找到!"> <!--加载网络标签--> <img src="https://img0.baidu.com/it/u=962361882,2281204904&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="网络图片没找到"> </body></code></pre> <h3 id="%E5%9D%97%E6%A0%87%E7%AD%BE%C2%A0">(3) 块标签 </h3> <table> <tbody> <tr> <th style="width:192px;">标签</th> <th style="width:227px;">说明</th> <th style="width:234px;">语义</th> </tr> <tr> <td style="width:192px;"><strong><div></strong></td> <td style="width:227px;"><strong>块标签 进行页面布局,会换行</strong></td> <td>division</td> </tr> <tr> <td style="width:192px;"><strong><span></strong></td> <td style="width:227px;"><strong>包裹内容,不会换行</strong></td> <td>span</td> </tr> <tr> <td style="width:192px;"></td> <td style="width:227px;"></td> <td style="width:269px;"></td> </tr> </tbody> </table> <pre><code class="language-html"><!-- img标签是图片标签,用来显示图片 src属性设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片的边框大小 alt属性设置当指定路径找不到图片时,用来代替显示的文本内容 在JavaSE中路径也分为相对路径、绝对路径 相对路径: 从工程名开始算 绝对路径: 盘符:/目录/文件名 在web中路径分为相对路径、绝对路径两种 相对路径: . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./可以省略 绝对路径: 正确格式: http://ip:port/工程名/资源路径 错误格式: 盘符:/目录/文件名 --> <head> <meta charset="UTF-8"> <title>块级标签
        你好 世界

        (4) 实体字符(了解)

        Day51.HTML、标签、表单、CSS_第4张图片

        表格标签 

        标签 说明 语义
        表格标签
        一行         
        表头行的单元格使用,加粗、居中效果
        一个单元格
        style="text-align: center" 文字居中
        colspan="?" 合并列,合并?单元格数量
        rowspan="?" 合并行,合并?单元格数量
        
        
        姓名 属性 级别 忍村
        漩涡鸣人 下忍 木叶
        宇智波佐助 雷火 下忍
        我爱罗 砂隐村

        Day51.HTML、标签、表单、CSS_第5张图片

        二、表单标签(重要)

        在项目开发过程中,凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息,并且将用户输入的信息提交给服务器。

        在HTML中我们使用form<>标签来定义一个表单而对于form标签来说有两个最重要的属性:action和method。

        ① action属性

        用户在表单里填写的信息需要发送到服务器端,对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

        这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境,所以先借用一个HTML页面来当作服务器端地址使用。

        ② method属性

        『method』这个单词的意思是『方式、方法』,在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值:get或post,没有极特殊情况的话使用post即可。

        get:请求能够携带的参数较少,大小有限制会在浏览器的URL地址栏显示数据类容不安全但高效

        post:请求能够携带的参数没有限制,大小没有限制不会在浏览器的URL地址栏显示数据内容安全但不高效

        在用户使用一个软件系统时,需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交,而肯定是将所有数据填好后一起提交。

        我们通过『name属性』来给数据起『名字』,通过『value属性』来保存要发送给服务器的『值』。 但是名字和值之间既有可能是『一个名字对应一个值』,也有可能是『一个名字对应多个值』。 而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是:Mapname属性就是Map的键value属性就是Map的值

        表单标签共有4个:

        文件表单:

        头像:
        
        
        用户名:
        密 码
        性别
        爱好
        游泳 读书 看电影 跑步

        <

        3.CSS(了解)

        Css 层叠样式表  美化html页面的

        CSS的引入方式:

        行内样式:仅对当前标签生效

        
        
         

        内部样式:在当前页面的head标签中添加style标签,在style标签中编写css样式代码; 内部样式仅对当前页面生效

        
            
            Title
            
        
        
        
            
         
         
         
         

        外部样式

        创建、编辑CSS文件

        .two {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 5px;
        }

        引入外部文件

         CSS选择器

        标签选择器、类选择器、id选择器。优先级:id选择器>类选择器>标签选择器。

            

        CSS常用样式

        
        
        
            
            06-css常用样式.html
        
            
        
        
        

        你可能感兴趣的:(Web,Web,HTML,css)