JavaWeb笔记(1)-HTML学习-优快云博客

本文链接：https://blog.youkuaiyun.com/yy19961124/article/details/98100121

B/S架构详解

1. 资源分类
    a. 静态资源：
        使用静态网页开发技术发布的资源
        特点：
            所有用户访问得到的结果是一致的
            如：文本，图片，音频，视频等 -- HTML，CSS，JavaScript
        如果用户请求的是静态资源，则服务器会直接将静态资源发送给浏览器
        浏览器中内置了静态资源的解析引擎
    b. 动态资源：
        使用动态网页技术发布的资源
        特点：
            所有用户访问，得到的结果可能不一致
            如：jsp/servlet,php,asp...
            如果用户请求的动态资源，那么服务器会执行动态资源转化为静态资源，再发送给浏览器
    c. 静态资源分工：
        HTML：用于搭建基础网页，展示页面的内容
        CSS：用于美化页面，布局页面
        JavaScript：用于控制页面的元素，让页面有一些动态的效果

HTML学习

1. HTML：超文本标记语言(Hyper Text Markup Language)
    a. 超文本：
        超文本使用超链接的技术，将各种不同空间的文字信息组织在一起的网状文本
    b. 标记语言：
        有标签构成的语言。如html，xml
        标记语言不是编程语言，没有逻辑性
2. 语法格式：
    a. 标签分类：
        1. 围堵标签：
            有开始标签和结束标签，如<html></html>，<head></head>等
        2. 自闭和标签：
            开始标签和结束标签在一起，如换行标签<br/>
    b. 标签可以嵌套
    c. 在开始标签内可以定义属性
        属性是由键值对构成的，值需要使用引号(单双都行)括起
    d. 标签不区分大小写，建议用小写

HTML标签学习

1. 文件标签：构成html的最基本标签
    * html：html文档的根标签
    * head：头标签。用于指定html文档的属性，或者引入一些外部资源
    * title：标题标签
    * body：体标签
    <!DOCTYPE html>是HTML5中定义文件的类型为html文档
2. 文本标签：
    * 注释：<!--注释内容-->
    * <br />：换行标签。html中制表符和换行符等会被解析为一个空字符
    * <h1> to <h6>：标题标签。自带换行，1~6字体从大到小
    * <p>：段落标签
    * <hr />：分隔水平线。已废弃，其中有属性可以更换样式，但是不建议在html中定义样式，后期将在CSS中定义。
    * <b>：字体加粗
    * <i>：斜体
    * <font>：字体标签。通过属性来修改字的显示--color(字体颜色)，size(字体大小)，face(字体样式)
            color有三种定义方式：
                1. 英文单词
                2. rgb(值1,值2,值3)：三原色的值来指定，每个范围0~255。(已废弃)
                3. #值1值2值3：三原色值来指定，每个范围00~FF。
            size有两种定义方式：
                1. 像素值
                2. 基于父类元素的百分比
    * <center>：文本居中标签。(已废弃)
3. 图片标签：
    * <img \>：图片标签
        src属性：图片的文件路径
            默认路径在当前下开始查找：(../表示父目录),(./表示当前目录)
        alt属性：图片加载失败时，图片处显示的文本信息
        align属性：布局属性
        width：宽 -- 像素值
        high：高 -- 像素值
4. 列表标签：
    a. 有序列表
        * <ol>：有序列表 -- 用于包裹整个列表内容
            type属性：用于定义有序列表的排序规则与序号类型，默认数字1开始
            start属性：用于定义开始的编号
        * <li>：列表项 -- 用于包裹每个数据内容
    b. 无序列表
        * <ul>：无序列表 -- 用于包裹整个列表内容
            type属性：用于定义无序列表列表项的标识类型，默认为黑色实心圆
        * <li>：列表项 -- 用于包裹每个数据内容
5. 超链接标签
    * <a>：超链接标签
        href属性：指定访问资源的URL
            * 可以写资源的URL
            * 可以写邮箱，例如：<a herf = "xxx@xx">联系我们</a>
        target属性：指定打开超链接资源的窗口，默认是自身标签页，即自身标签页来加载连接的资源页面
                    默认为_self
                    设为_blank，则标识在新标签页加载连接的资源
        可以在文本位置放置资源，例如图片等，点击资源就会跳转到herf属性指定的连接
        例如:
            <a herf = "www.baidu.com" target = "_blank"><img src = "imgPath"></a>
    * 阻止跳转：
        1. 超链接功能：
            -- 可以被点击<必须要有href属性才能被点击>
            -- 点击后跳转到href指定的url，href为空值时跳转自身页面
        2. 如果需要点击超链接后，在当前页面执行某些效果，而不在跳转页面(也不刷新自身页面)
            解决方法：
                将href属性值设置为"javascript:void(0);"
                <a href="javascript:void(0);">点击不跳转</a>
6. div和span标签
    * <span>：行内标签(内联标签)，包裹的信息会在一行显示
                默认无任何效果。用于结合CSS控制样式
    * <div>：块级标签。每个div占满一行
7. 语义化标签：
    a. HTML5中为了提高程序可读性，提供了一些标签
        * <header>：
        * <footer>：
        ...
8. 表格标签：
    a. html中表格只有行的概念，每一行中再定义单元格
        * <table>：定义一个表格
            width：宽度
            height：高度
            border：边框
            cellpadding：定义内容和单元格的距离 -- 0表示内容顶格
            cellsapcing：定义单元格之间的距离 -- 0表示单元格之间的线合并为一根
            bgcolor：背景色
            align：对齐方式
        * <tr>：定义一行
            bgcolor：背景色
            height：高度
            align：对齐方式
        * <td>：在一行内定义一个单元格(即一个数据项)
            用于合并单元格的属性：
            colspan：表示当前单元格占的列数
                如果一个单元格占多列，该属性定义在该单元格最左边的单元格内
            rowspan：表示当前单元格占的行数
                如果一个单元格占多行，该属性定义在最上的那一行的单元格属性中，下面的行的单元格都要减少数量
        * <th>：定义表头的单元格，默认加粗居中显示
        * <caption>：表格的标题
        //下面标签用于表示标识内容，配合CSS样式
        * <thead>：表示表格的头部分
        * <tbody>：表示表格的体部分
        * <tfoot>：表示表格的尾巴部分
    b. 使用table布局：
        1. 如果某一行只有一个单元格，则使用<tr><td></td></tr>完成
        2. 如果某一行有多个单元格，则相互合并单元格过于繁琐，使用表格嵌套
            <tr>
                <td>
                    <table></table>
                </td>
            </tr>
9. 表单标签：
    a. 表单：用于采集用户输入的数据，用于和服务器交互
    b. 使用标签：
        * <form>：用于定义表单。可以定义一个范围，范围表示采集用户数据的范围
            1. 使用form标签包裹采集到的数据才会被提交
            2. 属性：
                action：指定提交数据的URL
                method：指定提交方式 -- 一共7种，常用两种
                    get：
                        1. 请求的参数会在地址栏中显示，会封装在请求行中
                        2. 请求参数的大小是有限制的(由于URL有长度限制)
                        3. 不太安全
                    post：
                        1. 请求参数不会在地址栏中显示，会封装为请求体中
                        2. 请求参数的大小没有限制
                        3. 比较安全
                name：数据项的名称
            3. 表单数据要想被提交，必须为每个数据指定name属性
    c. 表单项标签：
        * <input />：输入框标签
            1. type属性：可以同type属性改变元素展示的样式
                text值：文本输入框
                    -- value属性可以设置默认值，但是效果是默认值不会消失
                    -- 应该使用placeholder属性设置默认提示信息，当点击输入后，默认值会消失
                password值：密码输入框
                    -- value属性可以设置默认值，但是效果是默认值不会消失
                    -- 应该使用placeholder属性设置默认提示信息，当点击输入后，默认值会消失
                radio值：单选框 
                    -- 要想多个单选框实现单选，必须将其name属性相同
                    -- 一般会给每个单选框指定value属性值，用来标识单选的是哪一个内容
                    -- 默认被选择，使用checked属性，checked="checked"
                checkbox值：复选框
                    -- 要想多个复选框实现复选组，必须将其name属性相同
                    -- 一般会给每个选框指定value属性值，用来标识选的是哪一个内容
                    -- 默认被选择，使用checked属性，checked="checked"
                file值：选择文件框
                    -- 用于打开文件管理器选择文件
                hidden值：隐藏域
                    -- 虽然不会显示，但是可以设置其value属性的值，提交表单时也会将该值提交
                    -- 主要用于提交一些信息
                按钮：
                    button值：普通按钮
                        -- 时常配合JavaScript来实现点击效果
                    submit值：提交按钮
                        -- 用于提交表单
                        -- value属性值为按钮上的字符显示
                    image值：图片按钮
                        -- src属性设置图片路径
                        -- 也可以提交表单
                date/datetime-local值：日历输入框
                email值：可以校验邮箱格式的输入框
                number值：仅数字输入框
            2. <label>标签：指定输入项的文字描述信息
                -- label标签中的for属性值需要与input的id属性相同
                -- 如果相同，则点击label区域的文字描述信息，会让input输入框获取输入焦点
        * <select />：下拉列表
            1. <option>列表项标签
                value属性值：用于区分提交的选项
            2. 需要对select定义name属性，才能提交内容
            3. 默认选择selected
        * <textarea />：文本域
            1. cols属性：
                指定列数，每一行有多少个字符
            2. rows属性：
                定义默认能写多少行