JavaEE--HTML

最新推荐文章于 2024-11-09 23:47:15 发布

皮卡丘的忧伤₍˄·͈༝·͈˄*₎◞ ̑̑

最新推荐文章于 2024-11-09 23:47:15 发布

阅读量69

点赞数 1

文章标签： java-ee html java 前端开发语言

本文链接：https://blog.csdn.net/qq_61186691/article/details/133960888

版权

前言

前面介绍了网络方面的知识,这篇文章介绍一下前端三剑客之一HTML的基本结构和HTML的常用标签!

HTML结构

HTML最基本的结构!

<html>
    <head>
        <title>我的第一个HTML页面</title>
    </head>
    <body>
        hello world!
    </body>
</html>

html标签是整个html的根标签
head标签写页面的属性
body写的是页面显示的内容
title写的是页面的标签

在这里插入图片描述

标签层次结构

在这里插入图片描述

其中html是head和body的父表亲
haed和body是兄弟标签

快速生成代码吗的框架

在这里插入图片描述

其中 lang ="en"属性表示当前页面是一个 "英语页面"cn 是中文
这样快速生成更加方便!!!

HTML常见标签

1.注释标签

<!---->
<!-- hello world! -->

注释提高代码的可读性
注意要和代码逻辑一致
尽量使用中文
不要传递负能量

2.标题标签 h1-h6

        <h1>标题标签</h1>
        <h2>标题标签</h2>
        <h3>标题标签</h3>
        <h4>标题标签</h4>
        <h5>标题标签</h5>
        <h6>标题标签</h6>

数字越大,字体越小

3.段落标签 p

<p>段落标签!</p>
 段落

在这里插入图片描述

p 标签之间存在一个空隙
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格

4.换行标签 br

换行标签<br>
换行

在这里插入图片描述

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.

5.格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

    <strong>strong 加粗 </strong>
    <b>b 加粗</b>
    <p>
    <em>em 倾斜</em>
    <i>i 倾斜</i>
    <p>
    <del>del 删除线</del>
    <s>s 删除线</s>
    <p>
    <ins>ins 下划线</ins>
    <u>u 下划线</u>

在这里插入图片描述

6.图片标签 img

img 标签必须带有 src 属性. 表示图片的路径

<img src="R-C (1).jpg">

此时要把这个图片文件放到和HTML中的同级目录中也就是相对路径
也可以直接输入绝对路径

<img src="D:\HTML\R-C (1).jpg">

在这里插入图片描述

img标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<img src="R-C (2).jpg" alt="一只狗" width="200px" height="180px">

在这里插入图片描述

当图片被删除或不存在时alt就会显示出文字

<img src="R-C (1).jpg" title="这是一只狗" width="200px" height="180px">

在这里插入图片描述

如图鼠标放图片上会有显示

注意:

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行

7.超链接标签 a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

<a href="http://www.baidu.com">百度</a>

在这里插入图片描述

第一下就会在当前页面打开百度

<a href="http://www.baidu.com" target="_blank">百度</a>

加上target则用新的标签页打开

空链接: 使用 # 在 href 中占位

<a href="#">空链接</a>

在这里插入图片描述

下载链接: href 对应的路径是一个文件.

<a href="test.zip">下载文件</a>

网页元素链接: 可以给图片等任何元素添加链接

<a href="http://www.baidu.com"><imp src="R-C (1).jpg"></a>

这张图片可以点击跳转到百度(像极了网上的广告)!

7.表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域

<table border="1">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
            </tr>
            <tr>
                <td>里斯</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>女</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>

在这里插入图片描述

合并单元格

跨行合并: rowspan=“n”
跨列合并: colspan="n

<table border="1">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>20</td>
            </tr>
            <tr>
                <td>里斯</td>
                <td rowspan="2">18</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>女</td>
                
            </tr>
        </tbody>
    </table>

在这里插入图片描述

先确定跨行还是跨列
找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
删除的多余的单元格

8.列表标签

无序列表 ul li , .
有序列表 ol li
自定义列表 dl (总标签) dt (小标题) dd

<h3>无序列表</h3>
    <u1>
        <li>愚者</li>
        <li>正义</li>
        <li>倒吊人</li>
    </u1>

    <h3>有序列表</h3>
    <o1>
        <li>愚者</li>
        <li>正义</li>
        <li>倒吊人</li>
    </o1>

    <h3>自定义列表</h3>
    <d1>
        <dt>罗塔会</dt>
        <dd>愚者</dd>
        <dd>正义</dd>
        <dd>倒吊人</dd>
    </d1>

在这里插入图片描述

9.表单标签

表单是让用户输入信息的重要途径

form标签

描述了要把数据按照什么方式, 提交到哪个页面中

 <form action="http://www.baidu.com" method="get">
 </form>

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

文本框

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name">
    </form>

在这里插入图片描述

密码框

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
    </form>

在这里插入图片描述

密码是看不到的

单选框

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio">男
    </form>

在这里插入图片描述

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio">男&nbsp;&nbsp;&nbsp;
        <input type="radio">女
        
    </form>

在这里插入图片描述

这里可以设置多个,但是都可以选择
单选框之间必须具备相同的 name 属性, 才能实现多选一效果

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女
        
    </form>

在这里插入图片描述

这样可以多选一
&nbsp 表示一个空格!

复选框

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;
    </form>

在这里插入图片描述

按钮

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;<br>
        <input type="button" value="普通按钮">&nbsp;&nbsp;
        <input type="submit" value="提交">&nbsp;&nbsp;
        <input type="reset"  value="清空">
    </form>

在这里插入图片描述

普通按钮当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究)
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

选择文件

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;<br>
        <input type="button" value="普通按钮">&nbsp;&nbsp;
        <input type="submit" value="提交">&nbsp;&nbsp;
        <input type="reset"  value="清空"><br>
        头像:<input type="file">
    </form>

在这里插入图片描述

select标签

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;<br>
        <input type="button" value="普通按钮">&nbsp;&nbsp;
        <input type="submit" value="提交">&nbsp;&nbsp;
        <input type="reset"  value="清空"><br>
        头像:<input type="file"><br>
        大学:<select>
            <option>北京大学</option>
            <option>清华大学</option>
            <option>山西农业大学</option>
        </select>
    </form>

在这里插入图片描述

可以给的第一个选项, 作为默认选项

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;<br>
        <input type="button" value="普通按钮">&nbsp;&nbsp;
        <input type="submit" value="提交">&nbsp;&nbsp;
        <input type="reset"  value="清空"><br>
        头像:<input type="file"><br>
        大学:<select>
            <option>北京大学</option>
            <option selected="selected">清华大学</option>
            <option>山西农业大学</option>
        </select>
    </form>

在这里插入图片描述

这里默认是清华大学!!!

rextarea 标签

<form action="http://www.baidu.com" method="get">
        姓名:<input type="text" id="username" name="name"><br>
        密码:<input type="password"><br>
        性别:<input type="radio" name="sex">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女<br>
        爱好:<input type="checkbox">听音乐&nbsp;&nbsp;&nbsp;
        <input type="checkbox">跑步&nbsp;&nbsp;&nbsp;
        <input type="checkbox">写小说&nbsp;&nbsp;&nbsp;<br>
        <input type="button" value="普通按钮">&nbsp;&nbsp;
        <input type="submit" value="提交">&nbsp;&nbsp;
        <input type="reset"  value="清空"><br>
        头像:<input type="file"><br>
        大学:<select>
            <option>北京大学</option>
            <option selected="selected">清华大学</option>
            <option>山西农业大学</option>
        </select><br>
        备注:<textarea rows="7" cols="50">

        </textarea>
    </form>

在这里插入图片描述

10.无语义标签: div & span

就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<div>
        <span>愚者</span>
        <span>正义</span>
        <span>倒吊人</span>
        </div>
        <div>
        <span>月亮</span>
        <span>太阳</span>
        <span>星星</span>
        </div>
        <div>
        <span>审判</span>
        <span>魔术师</span>
        <span>隐者</span>
        </div>