JavaWeb--HTML

news2024/10/7 4:35:15

一：HTML简介

*HTML是一门语言，所有的网页都是用HTML这门语言编写出来的；

*HTML：超文本标记语言；

        超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还能定义图片，音频，视频等内容

       标记语言：由表签构成的语言

*HTML运行在浏览器上，HTML标签由浏览器来解析；

*标签都是预定义好的。例如：使用<img>展示图片

*W3C标准：网页主要由三部分构成

        结构：HTML；

        表现：CSS；

        行为：JavaScript；

二：HTML快速入门

1.基本步骤

(1)新建文本文件，后缀名改为.html

(2)编写HTML结构标签

(3)在<body>中定义文字

<html>
    <head>
        <title> html快速入门</title>
    </head>

    <body>
    乾坤未定，你我皆是黑马
    </body>

</html>

2.修改文字颜色

<html>
    <head>
        <title> html快速入门</title>
    </head>

    <body>
     <font color="red">乾坤未定，你我皆是黑马</font>
    </body>

</html>
注：
HTML 文件以 .htm 或 .html 为扩展名
HTML 标签不区分大小写 ：如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。
HTML 标签属性值 单双引皆可 ：如上案例中的color 属性值使用双引号也是可以的。
HTML 语法松散 ：比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写。

三：基础标签

<html lang="en">
<head>
    <!-- 页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

<hr>
<!--
    html 表示颜色：
        1. 英文单词：red,pink,blue...
        2. rgb(值1,值2,值3)：值的取值范围：0~255  rgb(255,0,0)
        3. #值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ff0000">传智教育</font>

<hr>

刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……<br>

有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。

<hr>
<p>
    刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
</p>
<p>
   有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。
</p>
<hr>

沙柳河水流淌<br>

<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>

<hr>
<center>
    <b>沙柳河水流淌</b>
</center>

</body>
</html>

四：图片，音频，视频标签

**img ：定义图片
                src：规定显示图像的 URL （统一资源定位符）
                height：定义图像的高度
                width：定义图像的宽度
**audio ：定义音频。支持的音频格式： MP3 、 WAV 、 OGG
                src：规定音频的 URL
                controls：显示播放控件
**video ：定义视频。支持的音频格式： MP4, WebM 、 OGG
                src：规定视频的 URL
                controls：显示播放控件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--
  资源路径：
     1.绝对路径：完整路径，这里的绝对路径是网络中的绝对路径。 
       格式为： 协议://ip地址:端口号/资源名称。
    如：
<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe？rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">
    
      2.相对路径：相对位置关系，找页面和其他资源的相对路径。
      ./ 表示当前路径
      ../ 表示上一级路径
      ../../ 表示上两级路径

  尺寸单位：
   1.像素：单位是px
   2.百分比：占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
-->
<img src="a.jpg" width="300" height="400">

<audio src="b.mp3" controls></audio>

<video src="c.mp4" controls></video>


</body>

</html>

五：超链接标签

a 标签属性：
        href：指定访问资源的 URL
        target：指定打开资源的方式
                _self：默认值，在当前页面打开
                _blank：在空白页面打开 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<a href="https://www.itcast.cn"  >点我有惊喜</a>
<a href="https://www.itcast.cn"  target="_blank">点我有惊喜</a>

</body>

</html>

六：列表标签

type:设置项目符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<ol type="A">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>果汁</li>
</ol>

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>果汁</li>
</ul>

</body>

</html>

七：表格标签

**table ：定义表格
        border：规定表格边框的宽度
        width ：规定表格的宽度
        cellspacing：规定单元格之间的空白
**tr ：定义行
        align：定义表格行的内容对齐方式
**td ：定义单元格
        rowspan:规定单元格可横跨的行数
        colspan:规定单元格可横跨的列数
**th ：定义表头单元格 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<table width="50%" border="1" cellspacing="0">
    <tr height="50">
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>

    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
    <td>010</td>
    <td><img src="../img/优衣库.png" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>
    </tr>

    <tr align="center">
    <td>010</td>
    <td><img src="../img/小米.png" width="60" height="50"></td>
    <td>小米</td>
    <td>小米科技有限公司</td>
    </tr>
</table>


</body>

</html>

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


<table width="50%" border="1" cellspacing="0">
    <tr height="50">

        <th colspan="2">品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>

    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td rowspan="2">009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>

    </tr>
</table>

</body>
</html>

八：布局标签

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

<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>

</body>
</html>

九：表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项（元素）：不同类型的input元素，下拉列表，文本域等

form：定义表单
     **action：规定当提交表单时向何处发送表单数据，该属性值就是 URL ，以后会将数据提交到服务端，该属性需要书写服务端的URL 。而今天我们可以书写 # ，表示提交到当前页面来看效果。
     **method ：规定用于发送表单数据的方式 ；method取值有如下两种：
                get：默认值。如果不设置method 属性则默认就是该值请求参数会拼接在URL 后边
url 的长度有限制 4KB
                post：浏览器会将数据放到http请求消息体中请求参数无限制的 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <input type="text" name="username">
    <input type="submit">
</form>

</body>
</html>

十：表单项标签

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <input type="hidden" name="id" value="123">



    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    头像：
    <input type="file"><br>

    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br>
    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">


</form>

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1523143.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

展开说说：Android之SharedPreferences

展开说说：Android之SharedPreferences

SharedPreferences 是一种轻量级的数据持久化存储机制。以key/value键值对形式存储在xml文件&#xff0c;用于保存一些应用程序数据。保存在 /data/data/PACKAGE_NAME/shared_prefs/xxx.Xml文件。 SharedPreferences 只能存储string&#xff0c;int&#xff0c;float&#xff…
阅读更多...
visual studio2019项目中引入头文件失效问题的解决

visual studio2019项目中引入头文件失效问题的解决

这几天把项目整理一下&#xff0c;但在引入头文件过程中非常曲折。 项目本身写好了可以运行&#xff0c;但是项目结构是这样的&#xff1a; 所以想把功能模块化&#xff0c;同一类协议功能放在一起。 于是建包&#xff0c;创建文件&#xff0c;导入头文件&#xff1a; 在新…
阅读更多...
瑞熙贝通打造智慧校园实验室安全综合管理平台

瑞熙贝通打造智慧校园实验室安全综合管理平台

一、建设思路 瑞熙贝通实验室安全综合管理平台是基于以实验室安全&#xff0c;用现代化管理思想与人工智能、大数据、互联网技术、物联网技术、云计算技术、人体感应技术、语音技术、生物识别技术、手机APP、自动化仪器分析技术有机结合&#xff0c;通过建立以实验室为中心的管…
阅读更多...
zookeeper基础学习之六: zookeeper java客户端curator

zookeeper基础学习之六: zookeeper java客户端curator

简介 Curator是Netflix公司开源的一套zookeeper客户端框架&#xff0c;解决了很多Zookeeper客户端非常底层的细节开发工作&#xff0c;包括连接重连、反复注册Watcher和NodeExistsException异常等等。Patrixck Hunt&#xff08;Zookeeper&#xff09;以一句“Guava is to Java…
阅读更多...
微信小程序开发系列（三十四）·自定义组件的创建、注册以及使用（数据和方法事件的使用）

微信小程序开发系列（三十四）·自定义组件的创建、注册以及使用（数据和方法事件的使用）

目录 1. 分类和简介 2. 公共组件 2.1 创建 2.2 注册 2.3 使用 3. 页面组件 3.1 创建 3.2 注册 3.3 使用 4. 组件的数据和方法的使用 4.1 组件数据的修改 4.2 方法事件的使用 1. 分类和简介 小程序目前已经支持组件化开发&#xff0c;可以将页面中的功能…
阅读更多...
【PyTorch】基础学习：一文详细介绍 torch.load() 的用法和应用

【PyTorch】基础学习：一文详细介绍 torch.load() 的用法和应用

【PyTorch】基础学习&#xff1a;一文详细介绍 torch.load() 的用法和应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…
阅读更多...
基于Android Studio的小米便签App的代码泛读结对心得体会

基于Android Studio的小米便签App的代码泛读结对心得体会

本次实验我本来最开始使用的是2023.2.1.23的Android studio版本&#xff0c;但是在选择项目的时候没有编程语言为java的选项导致导入项目之后运行不起来。 创建完项目之后默认的代码块是MainActivity.kt&#xff0c;这里面不能编写java代码 所以我选择了退版本退到21海豚版本…
阅读更多...
AcWing 2. 01背包问题

AcWing 2. 01背包问题

题目描述 解题思路&#xff1a; 相关代码&#xff1a; import java.util.Scanner; public class Main {public static void main(String[] args){Scanner scanner new Scanner(System.in);/** 背包问题的物品下标最好从1开始。* *//*定义一f[i][j]数组&#xff0c;i表示的…
阅读更多...
Java学习笔记------常用API（五）

Java学习笔记------常用API（五）

爬虫 从网站中获取 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import java.util.regex.Matcher; import java.util.reg…
阅读更多...
论文浅尝 | GPT-RE：基于大语言模型针对关系抽取的上下文学习

论文浅尝 | GPT-RE：基于大语言模型针对关系抽取的上下文学习

笔记整理&#xff1a;张廉臣&#xff0c;东南大学硕士&#xff0c;研究方向为自然语言处理、信息抽取 链接&#xff1a;https://arxiv.org/pdf/2305.02105.pdf 1、动机 在很多自然语言处理任务中&#xff0c;上下文学习的性能已经媲美甚至超过了全资源微调的方法。但是&#xf…
阅读更多...
2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第一部分】

2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第一部分】

最近回顾了Java B组的试题&#xff0c;深有感触&#xff1a;脑子长时间不用会锈住&#xff0c;很可怕。 兄弟们&#xff0c;都给我从被窝里爬起来&#xff0c;赶紧开始卷&#xff01;&#xff01;&#xff01; 2022年第十三届蓝桥杯Java B组(第一部分 A~F题) 目录 一、填空题 …
阅读更多...
Rabbit MQ详解

Rabbit MQ详解

写在前面,由于Rabbit MQ涉及的内容较多&#xff0c;赶在春招我个人先按照我认为重要的内容进行一定总结&#xff0c;也算是个学习笔记吧。主要参考官方文档、其他优秀文章、大模型问答。自己边学习边总结。后面有时间我会慢慢把所有内容补全&#xff0c;分享出来也是希望可以给…
阅读更多...
可视化搭建一个智慧零售订单平台

可视化搭建一个智慧零售订单平台

前言 智慧零售行业是在数字化浪潮中快速发展的一个领域&#xff0c;它利用先进的信息技术和大数据分析来提升零售业务的效率和顾客体验。智慧零售订单平台&#xff0c;具有跨平台、数据智能清洗和建模&#xff0c;以及更加丰富的数据展示形式等优势。智慧零售订单平台可以以文…
阅读更多...
MySQL8空间索引失效

MySQL8空间索引失效

发现问题 表结构如下&#xff0c;boundary字段建立空间索引 CREATE TABLE area (id int(11) NOT NULL COMMENT 行政区划编码,pid int(11) NOT NULL COMMENT 上级编码,deep int(11) NOT NULL COMMENT 深度,name varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_…
阅读更多...
镜像制作实战篇

镜像制作实战篇

“ 在失控边缘冲杀为&#xff0c;最终解脱” CMD与EntryPoint实战 EntryPoint 与 CMD都是docker 镜像制作中的一条命令&#xff0c;它们在概念上可能有些相似&#xff0c;但在使用中&#xff0c;两者是有明显的区别的。比如&#xff0c;执行一个没有调用EntryPoint、CMD的容器会…
阅读更多...
一起学数据分析_3（模型建立与评估_1）

一起学数据分析_3（模型建立与评估_1）

使用前面清洗好的数据来建立模型。使用自变量数据来预测是否存活&#xff08;因变量&#xff09;&#xff1f; &#xff08;根据问题特征&#xff0c;选择合适的算法&#xff09;算法选择路径&#xff1a; 1.切割训练集与测试集 import pandas as pd import numpy as np impo…
阅读更多...
使用PWM实现呼吸灯功能

使用PWM实现呼吸灯功能

CC表示的意思位捕获比较&#xff0c;CCR表示的是捕获比较寄存器 占空比等效于PWM模拟出来的电压的多少&#xff0c;占空比越大等效出的模拟电压越趋近于高电平&#xff0c;占空比越小等效出来的模拟电压越趋近于低电平&#xff0c;分辨率表示的是占空比变化的精细程度&#xf…
阅读更多...
(done) NLP “bag-of-words“ 方法 （带有二元分类和多元分类两个例子）词袋模型、BoW

(done) NLP “bag-of-words“ 方法 （带有二元分类和多元分类两个例子）词袋模型、BoW

一个视频&#xff1a;https://www.bilibili.com/video/BV1mb4y1y7EB/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 这里有个视频&#xff0c;讲解得更加生动形象一些 总得来说&#xff0c;词袋模型(Bow, bag-of-words) 是最简…
阅读更多...
spring boot nacos注册微服务示例demo_亲测成功

spring boot nacos注册微服务示例demo_亲测成功

spring boot nacos注册微服务示例demo_亲测成功 先安装好Nacos Nacos安装使用 创建Maven项目 结构如图 例如项目名为: test-demo 下面有个子模块: test-demo-data-process 父模块pom.xml <?xml version"1.0" encoding"UTF-8"?> <project …
阅读更多...
【Micropython ESP32】定时器Timer

【Micropython ESP32】定时器Timer

文章目录 前言一、分频系数1.1 为什么需要分频系数1.2 分频系数怎么计算 二、如何使用定时器2.1 定时器构造函数2.2 定时器初始化2.3 关闭定时器 三、定时器示例代码总结 前言 在MicroPython中&#xff0c;ESP32微控制器提供了丰富的功能&#xff0c;其中之一是定时器&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023