• HTML+CSS

    新建maven项目

    删除src目录(java相关的东西)创建Web目录
    在这里插入图片描述

    table相关

    表头标签

    input相关

    placeholder 占位文本
    maxlength 设置最大字符长度
    value 设置空间的值
    readonly只读

    1.文本相关标签

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>内容<br>标题1h1>
<h2 align="center">内容标题2h2>
<h3 align="right">内容标题3h3>
<h4>内容标题4h4>
<h5>内容标题5h5>
<h6>内容标题6h6>
<hr>
<p>段落标签1p>
<p>段落标签2p>
<p>段落标签3p>
加粗<b>标签b>
斜体<i>i>
下划线<u>标签u>
删除线<s>标签s>

<h1>列表标签h1>
<h2>无序列表h2>
<ul>
    <li>刘备li>
    <li>诸葛亮li><li>孙尚香li><li>刘禅li><li>关羽li>
ul>
<h2>有序列表h2>
<ol>
    <li>Java基础li>
    <li>Java APIli>
    <li>Web前端li>
ol>
<h2>列表嵌套h2>
<ol>
    <li>凉菜
        <ul>
            <li>拍黄瓜li><li>花毛一体li>
        ul>
    li>
    <li>炒菜
        <ul>
            <li>宫保鸡丁li><li>木须肉li>
        ul>
    li>
ol>
body>
html>

    • 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
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    2.个人简历

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1 align="center">个人简历h1>
<hr>
<h2>基本信息h2>
<p>姓名:<b>苍老师b>p>
<p>性别:<i>男i>p>
<p>爱好:<s>摄影s>p>
<h2>个人经历h2>
<ul>
    <li>小学9年li>
    <li>中学6年li>
    <li>高中12年li>
ul>
<h2>获得荣誉h2>
<ol>
    <li>知名度最高奖li>
    <li>达内体重达人li>
ol>
body>
html>

    • 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

    3.图片标签

    src资源路径:
	相对路径:访问站内资源时使用
		1.资源和页面在同一目录:直接写图片名
		2.资源在页面的上级目录: ../图片名
		3.资源在页面的下级目录:文件夹名/图片名
	绝对路径:访问站外资源时使用，也称为图片盗链，有找不到图片的风险
	alt:当图片不能正常显示时显示文本
	title:图片标题 悬停在图片上显示的内容
	width/height:设置宽高
		1.像素
		2.百分比
		如果只是设置宽度，高度会等比例缩放	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<img src="aa.png" alt="传奇哥靓照">
<img src="../b.jpg" title="你看我美吗?" width="50">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    4.超链接

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<a href="http://www.baidu.com">超链接1a>
<a href="02简历练习.html">超链接2a>
<a href="a.png">超链接3a>

<a href="http://www.tmooc.cn"><img src="a.png" alt="">a>
<img src="../imgs/a.jpg" alt="">
<img id="top" src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
<img src="../imgs/e.jpg" alt="">
<img src="../imgs/f.jpg" alt="">
<a href="#top">回到顶部a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    5.表格

    • 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
    • 相关属性:border 边框 colspan跨列 rowspan跨行
      在这里插入图片描述
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table border="1">
    <tr>
        
        <td colspan="2">1-1td>
        
        <td rowspan="2">1-3td>
        <td rowspan="3">1-4td>
    tr>
    <tr>
        <td>2-1td>
        <td>2-2td>
    tr>
    <tr>
        <td align="center" colspan="3">3-1td>
    tr>
table>
<table border="1">
    <caption>购物车caption>
    <tr>
        <th>编号th><th>名称th><th>价格th>
    tr>
    <tr>
        <td>1td><td>康师傅冰红茶td><td>3元td>
    tr>
    <tr>
        <td>2td><td>小茗同学td><td>6元td>
    tr>
table>
body>
html>

    • 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
    • 34
    • 35
    • 36
    • 37

    6.表单

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<form action="http://www.baidu.com">
    
    用户名:<input type="text" name="username" maxlength="5" value="tom" readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    
    性别:<input type="radio" name="gender" checked value="m" id="r1"><label for="r1">男label>
    <input type="radio" name="gender" value="w" id="r2"><label for="r2">女label>
    <br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        
        <option value="bj">北京option>
        <option value="sh" selected>上海option>
        <option value="gz">广州option>
    select><br>
    <input type="submit" value="注册">
    
    <input type="reset" value="重置">
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册button>
    <button type="reset">重置按钮button>
    <button type="button">自定义按钮button>
form>
body>
html>

    • 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
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    7.分区标签

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>div1div>
<div>div2div>
<div>div3div>
<span>span1span>
<span>span2span>
<span>span3span>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    8.css引入方式

    my.css文件
h3{
    color: green;
}

    • 1
    • 2
    • 3
    • 4
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*先通过选择器找到页面中的元素，然后添加样式*/
        h2{
            color: blue;
        }
    style>
    
    <link rel="stylesheet" href="my.css">
head>
<body>

<h1 style="color: red">内联样式1h1>
<h1 style="color: red;">内联样式2h1>
<h2>内部样式1h2>
<h2>内部样式2h2>
<h3>外部样式1h3>
<h3>外部样式2h3>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    9.选择器

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*id选择器*/
        #p1{color: red}
        /*类选择器*/
        .c1{color: blue}
        /*分组选择器*/
        h3,#p1,.c1{background-color: red}
        /*属性选择器*/
        input[type='text']{background-color: red}
        input[type='password']{color: green}
        /*任意元素选择器*/
        *{
            /*边框:粗细 样式 颜色*/
            border: 1px solid red;
        }
    style>
head>
<body>
    <input type="text">
    <input type="password">
    <h3>我是h3h3>
    
    <p id="p1">苹果p><p class="c1">香蕉p><p>橘子p>
    <div>冰箱div>
    <div class="c1">洗衣机div>
body>
html>

    • 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

    10.选择器练习

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #zxy{color: green}
        .c1{color: blue}
        h1,h2{background-color: yellow}
        input[type='submit']{background-color: red}
        input[type='button']{color: pink}
        *{border: 1px solid red}
    style>
head>
<body>
<ul>
    <li id="zxy">张学友li><li class="c1">刘德华li><li>郭富城li>
ul>
<h1 class="c1">悟空h1><h1>八戒h1><h1>沙僧h1>
<h2>刘备h2>
<input type="submit">
<input type="button" value="按钮">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
  • 相关阅读:
    游戏合作伙伴专题：BreederDAO 与《王国联盟》结成联盟
    Java中Arrays类中的数组操作方法详解
    基于Html+Python+Django+Sqlite的机票预订系统
    golang pprof监控系列（2） —— memory，block，mutex 使用
    Ansible初识以及安装
    R数据分析：样本量计算的底层逻辑与实操，pwr包
    【无源谐波滤波器通常用于电力系统中的谐波抑制】用于抑制电力系统谐波的无源谐波滤波器（Simulink实现）
    leetcode：6151. 统计特殊整数【数位dp模板】
    2023，软件测试人的未来在哪里？
    使用Emscripten编译Eigen算法模块为WebAssembly
  • 原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126485488