HTML快速入门

8 篇文章 0 订阅

web

1.概述

使用java语言开发基于互联网的项目

2.软件架构

  • 1.C/S架构 :Client/Server 客户端服务器端

在用户本地有一个客户端程序,在远程有一个服务器

优点:用户体验好

缺点:需要开发(两端开发)安装,部署维护,麻烦

  • 2.B/S架构 Brower/Server 浏览器服务器

只需要一个浏览器,用户通过不同的网址,可以访问远程不同的服务器端

优点:不需要安装客户端,很方便开发(两端开发)安装,部署维护,简单

缺点:如果应用过大,用户的体验会受到影响,但是要实时下载(要求用户的带宽大),也对硬件要求较高

B/S架构怎么进行访问的?

资源的分类:

1.静态资源:

使用静态网页开发技术发布的资源.

特点:

  • 所有用户访问,得到的结果是一样的.
  • 如文本,图片,音频,视频,HTML,CSS,JavaScript
  • 如果用户请求的是静态资源,如果服务器会直接将静态资源直接显示

2.动态资源:

  • 使用动态网页发布的资源
  • 特点;
  • 所有用户访问,得到的结果可能不一样
  • 如:jsp/servlet/php/asp…
  • 所有请求的是动态资源,那么服务器执行动态资源,转换为静态资源,然后再发送给浏览器

静态资源:

  • HTML:用于搭建基础的网页,展示页面的内容

  • CSS:用于美化页面,布局页面

  • javaScript控制页面的元素,可以让页面动态的效果

HTML

概念:

超文本标记语言,

  • 超文本 超文本是用超链接的方法,把各种不同空间的文字信息组织在一起的网状文本
  • 标记语言;由标签构成的语言<标签名称>如html,xml,标记语言不是编程语言

快速入门

语法:

1.html文档后缀名 .html或者.htm

2.标签分为

  • 围堵标签(双标签):有开始标签和结束标签,如
  • 自闭合标签(单标签):开始标签和结束标签在一起的.如

3.标签是可以嵌套的:

需要正确的嵌套,必须完全包括

4.在开始标签中是可以定义属性的.属性是由键值对构成,属性用引号包围

5.html标签不区分大小写,建议用小写

标签

1. 文件标签 :构成html最基础的标签

  • html标签:html文档的根标签
  • head:头标签用于指定html的头
  • title:标题标签
  • body:体标签
  • :定义文档类型

2. 文本标签:和文本有关的标签

  • 注释:<!-- – !>

  • 段落


  • 换行


  • 水平线

    1.color:颜色

    2.width:宽度

    3.size:高度

    4.align:对其方式:

    ​ center

    ​ left

    ​ right

  • 粗体文字

  • 斜体文字

  • 定义文本

    1.color:颜色

    2.size:大小

    3.face:字体

属性的定义:

  • color:

    ​ 1.英文单词:red,green

    ​ 2.rgb(值1,值2,值3)值的范围(0-255)

    ​ 3.#值1#值2#值3:值的范围00-FF之间

  • width:

    ​ 1.数值:width=“20”,数值的单位是像素

    ​ 2.数值%:表示占父元素的比例

3. 图片标签

  • 属性:

    ​ src:路径

    ​ width:宽度(废弃)

    ​ align:对齐方式(废弃)

    ​ alt:图片加载失败时显示文字(废弃)

4. 列表标签

  • 有序标签

    • ol:定义一个有序列表
    • li:定义一个列表项
    • 属性:
      • type:(废弃)
  • 无序标签:

    • ul:定义一个无序列表
    • li:定义一个列表项
    • 属性:
      • type:(废弃)

5. 链接标签

  • :定义一个超链接
    • 属性:
      • href:指定访问资源的url路径
      • target:指定链接的打开方式
        • _self:在本地打开链接
        • _blank;新打开一个窗口打开超链接

6.div标签和span标签

块标签,没有实际的效果

span:文本信息在一行展示,行内标签,内联标签

div默认每一个div占满每一行

7.语义化标签:

回了提高可读性.

  • header
  • footer

8.表格标签:

  • table:定义一个表格
    • width:宽度
    • border:边框
  • tr:定义行
  • td;定义单元格
  • th;定义表头单元格(默认是居中显示的)
    • 表格标题

9.表单标签:

表单:用于采集用户输入的数据,用于和服务器进行交互.

  • 使用的标签

  • 表单标签:提交用户的输入,可以定义一个范围,表示用户数据采集的范围
    
    提交了用户名和密码的用户输入
        属性:
            1. action :指定提交的URL
            2. method:指定提交的方式
                常用的提交方式:get和post
            3.表单中数据要想被提交,表单项标签一定要指定name属性
    
  • GET请求和POST请求的区别

    • get请求会在地址栏显示
      • URL的长度是有限制的
      • get请求不太安全
    • post请求参数不会在地址栏中显示,会封装到请求体中
      • URL的长度没有限制
      • post请求比较安全
  • 表单项标签

    • input标签:可以通过type的属性值来展示用户输入的样式

      • type属性:
        • text:文本输入框,默认值
        • password:密码输入框
        • raido:单选框
          • 要想多个单选框实现同一件事的单选,需要指定name属性为一样的
          • 要想知道在提交后的值来判断哪个被提交,那么需要指定value的值
          • 指定check属性在某个单选框的属性内,表示其默认被选中
        • checkbox:复选框
          • 要想多个复选框实现同一件事的复选,需要指定name属性为一样的
          • 要想知道在提交后的值来判断哪个被提交,那么需要指定value的值
          • 指定check属性在某个复选框的属性内,表示其默认被选中
        • file:文件选择框可以选择文件提交给服务器
        • hidden:隐藏域,用于提交一些信息,在网页上看不到,但是会提交给服务器
        • 按钮;
          • submit:把用户输入提交给服务器
          • button:就是一个按钮,本身没有任何作用
          • image:通过src的属性指定图片的路径
      • value属性:指定默认的提示信息,但是点击之后不会消失
      • palaceholder:属性提示信息,点击输入后提示信息会消失

      • H5中新的type属性的取值:
        • color:拾色器,提交给服务器一个颜色
        • data:日期(年月日)
        • datatime:日期(年月日小时,分钟)
        • email:邮箱(自带一个校验的功能)
    • label标签:label标签的for属性一般会和input的id属性值对应,如果对应了,则点击label属性区域,会自动定位到input标签输入框首.

    • select标签:下拉标签

      • option:表单项,定义下拉标签的值
    • textarea:文本域

      • textarea:文本域的表单项
        • cols:指定每行的字符数
        • rows:指定默认行数,不够了可以自动扩容

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

炒冷饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值