JavaWeb（学习笔记）(html)（01）

T1 引言

T2 标题段落换行

标题

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

段落

<p>段落1</p>

<p>段落2</p>

换行

<br> 不带分割线

<hr> 带分割线

T03 有序/无序列表

有序列表

<ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>   
        <li>草莓</li>
</ol>

无序列表

<ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>   
        <li>草莓</li>
</ul>

T04 超链接

超链接

href 用于定义要跳转的目标资源的地址
1 完整的ur1http://www.atguigu.com/
2 相对路径以当前路径的所在路径寻找资源
3 绝对路径
        target 用于定义目标资源的打开方式

        _self 在当前窗口打开目标资源

        _blank 开启新窗口打开目标资源

<body>
    <a href="https://www.bilibili.com/"target="_blank">bilibili</a>
    <!-- target="_blank" 超链接打开新页面 -->
    <!-- 相对路径 -->
    <a href="T02标题段落换行.html">超链接2</a>
    <!-- 绝对路径 -->
</body>

T05 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><img src="img/T05.png" alt=""></h1>
    <p>HTML 图片元素用于在 HTML 页面中插入图像。图片可以是静态的，也可以是动态的。静态图片可以是 JPEG、GIF、PNG 格式的图片，也可以是矢量图形 SVG。动态图片可以是 Flash、Java、Silverlight 等插件，也可以是使用 JavaScript、VBScript、JScript 等脚本语言生成的图片。</p>
    <p>HTML 图片元素的语法格式如下：</p>
    <pre>&lt;img src="image.jpg" alt="image description" width="100" height="100"&gt;</pre>
    <p>src 属性指定了图像文件的 URL，alt 属性是图像的替代文本，width 和 height 属性设置了图像的宽度和高度。</p>
    <p>HTML5 新增了 srcset 和 sizes 属性，可以为不同屏幕分辨率提供不同的图像文件，以提高图像的加载速度和显示质量。</p>
    <p>HTML 5 还新增了 picture 元素，可以为不同设备和网络条件提供不同的图像，以实现更好的图片加载和显示效果。</p>
</body>
</html>

T06 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 style="text-align:center">表格</h3>
    <table border="1" style="margin:0px auto;width: 300px;">
        <thead></thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>备注</td>
            </tr>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td rowspan="6"> 亲三名升职加薪</td>
            </tr>

            <tr>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
            </tr>

            <tr>
                <td>王五</td>
                <td>女</td>
                <td>21</td>
            </tr>
            <tr>
                <td>总人数</td>
                <td colspan="2">2000</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td colspan="2">90</td>
            </tr>
            <tr>
                <td>及格率</td>
                <td colspan="2">0.8</td>
            </tr>


        </tbody>
        <tfoot></tfoot>
    </table>

</body>
</html>

T07 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        表单 
            表单项标签一定要定义name属性，用于提交表单数据
            表单项还需要定义value属性，用于显示默认值
            action: 表单提交的地址
            method: 提交方式
                get  1.参数会以键值对形式放在url后提交
                     2.数据直接暴露在url中，安全性较差，不推荐使用
                     3.数据量不宜过大
                     4.地址栏上只能是字符，不能提交文件
                     5.相比于post效率高，适合小数据量的表单提交
                post 1.参数会放在请求体中提交
                     2.数据不会暴露在url中，安全性较好，推荐使用
                     3.数据是单独打包通过请求体发送，提交的数据量比较大
                     4.可以提交文件


            enctype: 编码类型，multipart/form-data或application/x-www-form-urlencoded
            name: 表单名称
            id: 表单id  
            type: 表单类型，
                如text 单行普通文本框
                password 密码文本框
                submit 提交按钮
                reset 重置按钮
                button 按钮
                checkbox 多选框
                radio 单选框
                    多个单选框使用了相同的name，就会有互斥效果
                    checked 属性可以设置默认选中项
                select 下拉列表
                file 文件上传
                hidden 隐藏域
                image 图片上传
                range 滑动条
                color 颜色选择器



    -->
    <form action="T08welcome.html" method="post">
        <!-- 添加表单项目 用户输入信息的标签 -->
        用户名：
            <input type="text" name="username" id="username"><br>
        密码：
            <input type="password" name="password" id="password"><br>
        性别：
            <input type="radio" name="gender" value="male" checked>男
            <input type="radio" name="gender" value="female">女<br>
        爱好：
            <input type="checkbox" name="hobby" value="reading"> 读书
            <input type="checkbox" name="hobby" value="swimming"> 游泳
            <input type="checkbox" name="hobby" value="running"> 跑步<br>
        兴趣：
            <select name="interest" id="interest">
                <option value="reading"> 读书 </option>
                <option value="swimming"> 游泳 </option>
                <option value="running"> 跑步 </option>
            </select><br>
        头像：
            <input type="file" name="avatar" id="avatar"><br>
        隐藏域：
            <input type="hidden" name="hidden" value="hiddenValue"><br>
        颜色选择器：
            <input type="color" name="color" id="color"><br>
        滑动条：
            <input type="range" name="range" id="range"><br>
        个人简介：
            <textarea name="introduction" id="introduction" cols="30" rows="10"></textarea><br>

        登录：
            <input type="submit" value="登录">
            <input type="reset" value="清空">
        

            
    </form>

</body>
</html>

T09 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: #ffe2e2;">
    <!-- 
        css 设计样式的
        通过元素的style属性来设置元素的样式
        样式的属性和值之间用冒号:隔开
        多个样式属性用分号;隔开
        样式的优先级：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
    -->
    <!--  
        块元素：自己独占一行的元素
            div

        行内元素：和其他元素在一行显示的元素
            span
    -->
    <div style="border: solid red; width: 200px; height: 100px; padding: 10px; margin: 10px;background-color: rgb(202, 182, 220);">页面开头部分</div>
    <div style="border: solid red; width: 200px; height: 100px; padding: 10px; margin: 10px;background-color: rgb(202, 182, 220); ">页面中间部分</div>
    <div style="border: solid red; width: 200px; height: 100px; padding: 10px; margin: 10px;background-color: rgb(202, 182, 220);">页面结尾部分</div>
    <span style="border: solid blue; width: 100px; height: 50px; padding: 5px; margin: 5px;background-color: rgb(153, 153, 255);">span块</span>
</body>
</html>

T10 特殊字符

具体请在官网查表

HTML 字符实体 (w3school.com.cn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        对于html来说，某些写符号是有特殊含义的，如果想在网页中显示这些符号，需要使用转义字符。
        常见的转义字符有：
        &lt; &gt; &amp; &quot; &apos;
    -->
</body>
</html>

JavaWeb（学习笔记）(html)（01）

T1 引言

T2 标题 段落 换行

标题

段落

换行

T03 有序/无序列表

有序列表

无序列表

T04 超链接

超链接

T05 图片

T06 表格

T07 表单

T09 布局

T10 特殊字符

悦读

T2 标题段落换行