HTML笔记

内容概述

1
2
1. Web概念概述
2. HTML

Web概念概述

Java Web

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

软件架构

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

    • 在用户本地有一个客户端进程,在远程有一个服务器端进程
    • 优点:用户体验好
    • 缺点:开发、安装、部署、维护麻烦
  2. B/S: Browser/Server 浏览器/服务器

    • 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端进程

    • 优点:开发、安装、部署、维护简单

    • 缺点:如果应用过大,用户体验会受到影响。对硬件要求过高:服务器,带宽

B/S 架构详解

  • 资源分类:
    1. 静态资源:使用静态网页开发技术发布的资源
      • 特点:
        • 所有用户访问,看到的效果是一样的
        • 如:文本,图片,音频,视频,HTML,CSS,JavaScript
        • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以来展示这些静态资源
      • HTML:用于搭建基础网页,展示页面的内容
      • CSS:美化页面,布局页面
      • JavaScript:控制页面的元素,是页面有一些动态的效果
    2. 动态资源:使用动态网页及时发布的资源
      • 特点:
        • 每个访问的用户得到的结果可能不同
        • 如:jsp/servlet, php, asp
        • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
  • 我们要学习动态资源,必须先学习静态资源

HTML

概念

  • 是最基础的网页开发语言。
  • Hyper Text Markup Language 超文本标记语言
  • 超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
  • 标记语言:由标签构成的语言 <标签名称> 如HTML,XML
  • 标记语言不是编程语言

入门语法

  1. HTML后缀名 .html 或者 .htm
  2. 标签分为:
    1. 围堵标签:有开始标签和结束标签
    2. 自闭合标签
  3. 标签可以嵌套:需要正确嵌套,不能交叉
  4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可以)引起来
  5. html 的标签不区分大小写,但是建议使用小写
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>这是title</title>
</head>

<body>
<front color='red'>Hello,World</front><br/>
<front color='green'>Hello,World</front>
</body>
</html>

标签

文档标签:构成html最基本的标签

  • html:html文档的跟标签
  • head:头标签。用于指定html文档的一些属性,引入外部的资源
  • title:标题标签
  • body:网页的主体
  • <!DOCTYPE html>:html5 中定义该文档是 html 文档

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

  • 注释:<!-- 注释内容 -->
  • <h1> - <h6>:标题标签。字体大小递减
  • <p>:段落标签
  • <br/>:换行
  • <hr color=''/>:一条水平线
    • color
    • width
    • size
    • align:对齐方式(center/left/right)
  • <b>:加粗
  • <i>:斜体
  • <font>:字体
    • color
    • size
    • face:字体
  • 属性定义:
    • color:
      1. 英文单词
      2. RGB( 0255, 0255, 0~255 )
      3. #值1值2值3:00~FF 之间,#FFFFFF 白
    • width:
      1. 数值:width=’20’ ,单位为 px(像素)
      2. 数值%:在父元素中所占的比例
  • 特殊字符:
显示结果 描述 代码表示
< 小于号 &lt;
> 大于号 &gt;
空格 &nbsp;
& 和号 &amp;
引号 &quot;

图片标签

  • <img sec='图片路径' align='' alt='图片替换信息' />
  • src路径写法:
    • 相对路径,以 . 开头的路径
    • ./ : 表示当前目录,不写 ./ 的话默认加 ./
    • ../ : 表示上一级目录

列表标签:

  • 有序列表:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ol type='a/1/I'>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    </ol>
    <ul type='disc/square/circle'>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    </ul>
    • ol : orderlist
    • li :
  • 无序列表

    • ul : unorderLst
    • li :

链接标签

  • <a href='http://www.bilibili,com' target=''></a>
  • 属性:
    • href =
      • 指定访问资源的URL(统一资源定位符)。既可以是网络中的,也可以是本地项目中的
      • 'mailto:384878281@qq.com':给这个邮箱发邮件
    • target =
      • _self:默认值,在本页面打开链接
      • _blank:在新标签页打开
  • 使用<a></a>包裹<img>,达到点击图片跳转链接的目的

div 和 span:

  • div:每一个div占满一整行。块级标签
  • span:文本信息在一行展示,行内标签,内联标签

语义化标签

HTML5 中为了提高进程的可读性,提供了一些没有样式的标签,要结合CSS一起使用

  • header
  • footer

表格标签

  • table:定义表格

    • 属性:boder是否有边框,width表格宽度,cellpadding内容和边框之间的距离,cellspacing边框粗细,bgcolor背景色,align表格的对齐方式
  • tr:定义行

    • bgcolor:背景色
    • align:对齐方式
  • td:定义单元格

    • colspan:合并列
    • rowspan:合并行
  • th:定义表头单元格

  • caption:表格标题

  • thead:表示表格的头部分

  • tbody:表示表格的体部分

  • tfoot:表示表格的脚部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <table border='1' width='50%' cellpadding='4' cellspacing='0'>
    <thead>
    <caption>学生信息表</caption>

    <tr>
    <th rowspan='2'>编号</th>
    <th>姓名</th>
    <th>成绩</th>
    </tr>
    </thead>


    <tr>

    <td>name01</td>
    <td>70</td>
    </tr>

    <!--第三行-->
    <tr>
    <td>2</td>
    <td colspan='2'>name02</td>

    </tr>

    <tfoot>
    <tr>
    <td>3</td>
    <td>name03</td>
    <td>0</td>
    </tr>
    </tfoot>
    </table>

表单标签

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

  • form:用于定义表单的。可以定义一个范围,范围代表次啊及用户数据的范围

  • 属性:

    • action:指定提交数据的URL
    • method:指定提交方式,一共7种,两种比较常用:
      • get:
        1. 请求参数会在地址栏中显示。会封装到请求行中
        2. URL长度是有限制的
        3. 不太安全
      • post
        1. 请求参数不会在地址栏中显示。会封装在请求体中
        2. URL长度是有没有限制的
        3. 较为安全
  • 表单项中的数据要想被提交,必须指定其name属性

  • 在提交时,name定义的是键值对的键,value定义的是键值对的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <form action='#' method='get'>

    <lable for='username'>用户名:</lable><input type='text' name='username' placeholder='请输入用户名' id='username'><br>
    密码:<input type='password' name='password'><br>
    性别:<input type='radio' name='gender' value='male'>
    <input type='radio' name='gender' value='female'><br>
    爱好:<input type='checkbox' name='hobby' value='sing' checked='checked'>
    <input type='checkbox' name='hobby' value='dance'>
    <input type='checkbox' name='hobby' value='rap'> Rap <br>

    文档:<input type='file' name='file'><br>
    隐藏域:<input type='hidden' name='id' value='***'><br>
    拾色器:<input type='color' name='color'><br>
    生日:<input type='date' name='birthday'><br>
    生日:<input type='datetime-local' name='birthday'><br>
    邮箱:<input type='mail' name='email'>
    年龄:<input type='number' name='age'>
    <br>

    <input type='submit' value='登陆'>
    <input type='button' value='按钮'>
    <input type='image' src=''>
    </form>
  • 表单项标签

    • input:可以通过type属性,改变元素展示的样式
      • type:
        • text:文本输入框,默认值
          • placeholder:提示信息。当输入框内容发生变化,会清空
        • password:密码输入框。不示输入的内容
        • radio:单选框
          1. 要想让多个单选框实现单选的效果,则多个单选框的name属性必须一样
          2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
          3. checked属性可以让此选项默认被选中
        • checkbox:复选框
        • file:文档选择框
        • hidden:隐藏域,用于提交一些信息
        • color:取色器
        • date:
        • 按钮:
          • submit:提交按钮,用于提交一些信息
          • button:普通按钮
          • image:图片提交按钮,通过src属性指定图片的路径
  • label:指定输入项的文字描述信息
    • label的for属性一般会和input的id属性值对应。如果对应了,点击label,会让对应的input输入框获得焦点
  • select:下拉列表
  • textarea:文本域