Java研学-HTML

HTML

1 介绍

HTML(Hypertext Markup Language) 超文本标记语言。静态网页,用于在浏览器上显示数据

超文本: 指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

标记语言: 使用 < > 括起来的语言

超文本标记语言的结构, 包括"头"部分(英语:Head)、和"主体"部分(英语:Body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容。

2 基本语法

java 复制代码
<!DOCTYPE html>
<!--定义根-->
<html lang="en">
<!--定义头-->
<head>
    <meta charset="UTF-8">
    <!--定义页面标题-->
    <title>Title</title>
</head>
<!--定义页面主体内容-->
<body>
</body>
</html>

3 属性与值

java 复制代码
<!--color:属性名 red:属性值 属性名和属性值用 "=" 连接, 每个标签都有id,style,class等核心属性-->
<h1 style="color: red">这里是小红</h1>

① HTML 标准属性,是大多数 HTML 和 XHTML 都有支持的属性; class 规定元素的类名(classname); id 规定元素的唯一 id style 规定元素的行内样式(inline style) title 规定元素的额外信息以及其它的语言键盘属性等

② 标签上的可选和必选属性,只针对单个的标签有效果(Mapper.xml)

③ 事件属性,使 HTML 事件触发浏览器中的行为,例如点击某个 HTML 元素时启动一段 JavaScript

4 标签嵌套

java 复制代码
<!--正确嵌套-->
<span>这里是小黑<h1 style="color: red">这里是小红</h1></span>
<!--这是错误的,标签不能错乱嵌套-->
<h1 style="color: red">这里是小红<span>这里是小黑</h1></span>

5 转义字符与特殊字符

此处 引号 需用 英文
&gt; &lt; &amp; &quot;
> < & "
&reg; &copy; &trade; &nbsp;&emsp;
® © (两者都为空格)

6 常用 HTML 标签

html 复制代码
<!-- 注释内容 -->:注释标签;

<html>:文档根标签;

<head>:页面头部标签;

<title>:页面标题,放置于<head></head>之间;

<body>:页面主体部分;

<style>:写 css 或引入CSS文件,一般放在<head></head>中;

<script>: 写 JavaScript 或引入 JavaScript 文件,一般在<head></head>中;

<h1>到<h6>:标题一到标题六,与world一致;

<p>:定义段落

<div>:定义文档结构;为HTML提供结构和背景;

<span>:和<div>基本相似,区别是<span>默认不换行;

<br/>:单标签,插入一个换行;

<hr/>:单标签,定义一条水平线;

span 标签不会导致换行

div 会换行

p 会产生一个段落,段落之间有默认间距

7 超链接和锚点

超链接,即指向内容链接,属于一个网页中,可通过超链接同其他网页或站点之间进行连接的元素。从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片,电子邮件地址,文件,甚至是一个应用程序。

一个网页中作为超链接的对象,可以是一段文本或是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。各个网页链接后,才构成一个网站。

java 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tj</title>
</head>
<body>
<a href="#a1">第一页</a> <br/>
<a href="#a2">第二页</a> <br/>
<a href="#a3">第三页</a> <br/>
<!--用 name 或 id 属性,创建一个文档内部的书签(创建指向文档片段的链接)-->
<a id="a1">
    <div style="height: 800px;background-color: mediumorchid;">一</div>
</a>
<a id="a2">
    <div style="height: 800px;background-color:lemonchiffon">二</div>
</a>
<a id="a3">
    <div style="height: 800px;background-color:orange;">三</div>
</a>
</body>
</html>

8 列表标签

① 有序列表

java 复制代码
<!--type属性: 可指定列表项目序号类型,属性值有: 
 A : 表示使用大写英文字母作为序号;如A、B、C 等;
 a : 表示使用小写英文字母作为序号;如a、b、c 等; 
 I : 表示使用大写罗马数字作为序号;如I、II、III 等;
 i : 表示使用小写罗马数字作为序号;如i、ii、iii 等; 
 1 : 表示使用阿拉伯数字作为序号;如1、2、3 等;
 start属性:可表示列表的起始序号;-->
 <ol type="a" start="3">
    <li>大黄</li>
    <li>大白</li>
    <li>小黑</li>
    <li>小侯</li>
</ol>

② 无序列表

java 复制代码
<!--type 属性: 可指定列表项目符号类型,属性值有:
	disc:表示实心圆点; ●
	square:表示空心圆圈; ■
	circle:表示实现方块; ○-->
<ul type="circle">
    <li>大黄</li>
    <li>大白</li>
    <li>大黑</li>
    <li>小侯</li>
</ul>

③ 自定义列表 -- 无标识列表

java 复制代码
<!--<dl>:用于定义列表;该标签只有<dt>,<dd>两种子标签;
    <dt>:定义列表项的标题;
    <dd>:定义普通列表项;-->
<dl>
    <dt>金毛</dt>
    <dd>大黄</dd>
    <dd>小黄</dd>
    <dt>哈士奇</dt>
    <dd>哈总</dd>
</dl>

9 图片标签

于网页中嵌入一张图片; 标签不是在网页中插入图像,而是从网页上链接图像

java 复制代码
<!--标签属性: 两个必需属性:src 和 alt
    src : 指定显示图片文件所在位置; 
    alt : 指定一段文本,可用于当图片不能显示时显示的提示信息; 
    height: 图片高度,可为像素值或百分比; 
    width: 图片宽度,可为像素值或百分比;-->
<img src="dog.jpg" alt="dog" height="30%">

<!--<a>和<img>标签同时使用可做图片超链接;-->
<a href="demo.html"><img src="image/dog.jpg"></a>

10 表格标签

java 复制代码
<!--<table>: 定义表格,<table>可以有多个<tr>子标签
    常用属性:
    border:指定表格边框的宽度,默认是0;
    cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;
    cellspacing:指定单元格之间的间距,值可是像素或百分比;
    width:指定表格的宽度,值可以是像素或百分比;
<tr>: 定义表格的行
    align: 设置行中的单元格内容的位置(left/center/right)
    定义表格行,该标签只能有<td>或<th>子标签;
<td>: 定义单元格,放在<tr>中,表示把一行分成 N 个单元格;(N取决于N对<td>);
    常见属性:
    colspan:指定该单元格跨多少列,属性值是数字; colum
    rowspan:指定该单元格横跨的行数; row
    height:指定单元格的高度;
    width:指定单元格的宽度;
<th>:定义表格标题头的单元格,用法和<td>标签一样的,只是显示效果不同;-->


<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
    <tr style="background-color: orange">
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>体长</th>
        <th>体重</th>
        <th>电话</th>
    </tr>
    <tr>
        <td height="60px;">大黄</td>
        <td colspan="2">公</td>
        <td width="60px;">80</td>
        <td rowspan="2">20</td>
        <td>19212312314</td>
    </tr>
    <tr>
        <td>大白</td>
        <td>母</td>
        <td>50</td>
        <td>18</td>
        <td>19232132122</td>
    </tr>
</table>
</body>

11 表格分层标签

java 复制代码
<body>
<!--
<tbody>: 定义表格的主体,该标签只能包含<tr>子元素;
使用<tbody>标签可以将一个表格分成几个独立的部分;
<tbody>可以将表格里的一行或多行合并成一组,使用Ajax编程的时需要动态修改表格的某几行,此时可使用<tbody>标签;
<thead>:定义表格头(标题行),用法和 <tbody> 一致,功能有点差别;
<tfoot>:定义表格脚(统计行),用法和 <tbody> 一致,功能有点差别;
当打印表格式,表格头和表格脚的数据也会包含在数据的页面上;
<thead>,<tbody>,<tfoot>标签可以对表格的行进行分组,每对<tbody>就是一组;
无论三者的先后顺序如何,不影响页面顺序为上面显示表格头,中间是显示表格体,最下面显示表格脚数据;
建议顺序为:<thead>,<tfoot>,<tbody>;若网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,表明页面可用-->


<table>
<thead>
<tr>
    <th>名字</th>
    <th>体重</th>
    <th>颜色</th>
    <th>电话</th>
</tr>
</thead>
<tfoot>
    <tr align="center">
        <td colspan="4">
            首页 上一页 下一页 末页
        </td>
    </tr>
    </tfoot>
<tbody>
<tr>
    <td>大黄</td>
    <td>20</td>
    <td>黄色</td>
    <td>19212312322</td>
</tr>
<tr>
    <td>大白</td>
    <td>22</td>
    <td>白色</td>
    <td>19232132122</td>
</tr>
</tbody>
</table>
</body>

12 表单标签

form action="#" 中#的作用是将表单的提交目标设置为当前页面。当表单提交时,页面将重新加载并执行相应的处理程序。这种设置通常用于在同一页面上处理表单数据,而不需要跳转到其他页面。

java 复制代码
<body>
<!--
from : 表单标签,用来收集用户录入的数据
action: 指定数据提交的位置,当点击"提交"按钮时,表单数据提交到哪个地址
method : 指定表单数据提交的方式,分为 GET 或 POST 请求,默认是 get 方式(数据会显示在地址栏上);
enctype : 指定表单数据提交的编码格式,属性有一下三种 :
    application/x-www-form-urlencoded url 发送前编码所有字符(默认)
    multipart/form-data  不做编码,二进制方法提交 ,以后使用文件上传必须使用
    text/plain  空格转+号,不对特殊字符编码
-->


<form action="#" method="get">
</form>
</body>

13 表单控件标签

表单控件用于收集用户数据,是 form 表单的子元素。不同标签与类型的展现方式不同,需放在 form 标签内部

① input 标签

功能丰富,用于接收用户输入的信息

java 复制代码
type 属性指定输入标签的类型:
单行文本框 : type = text,输入的文本信息直接显示在框中;
密码输入框 : type = password,输入的文本以圆点形式显示;
单选框 : type = radio,如:性别选择;
复选框 : type = checkbox,如:多个兴趣选择;
隐藏域 : type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个
数据;
提交按钮 : type = submit,用于提交表单中的数据内容;
重置按钮 : type = reset,将表单中填写的内容均设置为初始值;
无动作按钮 : type = button,可使用javascript为其自定义事件;
文件上传域 : type = file,会生成一个文本框和一个浏览按钮;
图像域 : type = image, 它可以替代submit按钮,即图像提交按钮

<input> 标签中其他常见属性:
name: 指定 input 标签的名字,没有设置 name 属性的标签不能提交数据;
value:指定input标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disabled: 设置input标签加载时禁用此标签; 不能提交到
maxlength:文本框输入最大字符数,属性值是数字;
readonly: 指定文本框内值不允许直接修改; 能被提交
placeholder :提示信息的显示

② select 标签

下拉框标签,以 option 标签为子标签,二者一般结合使用:

java 复制代码
<!--
<select > 常用属性:
multiple="multiple" 可以选中多个
size="3" 显示几个
<option> 常用的属性 :
selected="selected":默认选中的选项-->

<select name="city" >
<option value="">---请选择---</option>
<option value="zh" selected="selected">牙克石</option>
<option value="en">海拉尔</option>
</select>

③ textarea 标签

文本域标签: 用户录入多行多列数据

java 复制代码
<textarea cols="60" rows="6">今天的天气是零下40度</textarea>
相关推荐
斑点鱼 SpotFish3 分钟前
用Python可视化国庆期间旅游概况与消费趋势
开发语言·python·旅游
only-lucky6 分钟前
在Qt中使用VTK
开发语言·qt
用户9047066835716 分钟前
如何使用 Spring MVC 实现 RESTful API 接口
java·后端
刘某某.17 分钟前
数组和小于等于k的最长子数组长度b
java·数据结构·算法
程序员飞哥22 分钟前
真正使用的超时关单策略是什么?
java·后端·面试
用户9047066835724 分钟前
SpringBoot 多环境配置与启动 banner 修改
java·后端
小杰帅气27 分钟前
类与对象1
开发语言·c++
chenyuhao202439 分钟前
《C++二叉引擎:STL风格搜索树实现与算法优化》
开发语言·数据结构·c++·后端·算法
立方世界43 分钟前
HTML编写规则及性能优化深度解析:从基础到企业级实践
前端·性能优化·html
小old弟1 小时前
后端三层架构
java·后端