Java前端基础—HTML

Java前端基础—HTML

目录

  • Java前端基础—HTML
    • 1.简介
    • 2.基础语法
      • 2.1HTML页面固定结构
      • 2.2标题标签
      • 2.3段落标签
      • 2.4换行标签
      • 2.5水平线标签
      • 2.6文本标签
      • 2.7图片标签
      • 2.8音频标签
      • 2.9视频标签
      • 2.10链接标签
      • 2.11列表标签
      • 2.12表格标签
      • 2.13表单标签
      • 2.14语义标签

1.简介

1.网页组成：文字，图片，音频，视频，超链接。
2.代码如何转换成网页：依靠的是浏览器的渲染和解析将代码翻译成网页。
3.渲染引擎**（浏览器内核）**：浏览器中专门对代码进行解析渲染的部分。浏览器出品的公司不同，内在的渲染引擎也是不同，渲染引擎不同，导致解析相同代码的速度、性能、效果也不同。这就是后面前端要处理一大难题，适配兼容问题。
4.web 标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一。

构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和为止等页面样式（颜色、大小等）
行为JavaScript网页模型的定义与页面交互（负责页面的动态效果）

2.基础语法

2.1HTML页面固定结构

<!-- 
html：网页的整体
head：网页的头部，就是网页上面的名字
body：网页的身体，就是网页具体的内容
title：网页的标题
-->
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        主体内容
    </body>
</html>

2.2标题标签

<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>2级标题</h3>
    <h4>2级标题</h4>
    <h5>2级标题</h5>
    <h6>2级标题</h6>
</body>

2.3段落标签

<!--
段落标签独占一行
段落标签里面选择style=，选择风格特性，这里2em代表段落前面空两格
-->
<p style="text-indent: 2em;">
        这是一个段落<br>标签
</p>

2.4换行标签

<!-- 换到下一行，这是个单标签 -->
<p style="text-indent: 2em;">
        这是一个段落<br/>标签
 </p>

2.5水平线标签

<!-- <hr/>是个单标签 -->
<body>
    <h1>这是一个标题标签</h1>
    <hr/>
    <h2>2级标题</h4>  
</body>

2.6文本标签

<body>
    <b style="color: red;">加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除线</del>
</body>

2.7图片标签

<!--
特点：是单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置，也可以加载gif
属性值：
	alt：替换文本，只有图片加载失败时候才会显示的文本
	title：提示文本，当鼠标悬停的时候，才显示文本title文本不仅仅用于图片标签，还可以用于其他标签
	width和height：宽度和高度（数字）如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）如果同时设置了width和height两个,若设置不当此时图片可能会变形
-->
<body>
    <img src="链接地址" alt="">
</body>

2.8音频标签

<!-- 
src:路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
 -->
<audio src="./音频名.mp3" controls></audio>

2.9视频标签

<!--
src:视频路径
controls:显示播放空间
autoplay:自动播放(谷歌浏览器中需要配合muted实现静音播放) loop:循环播放
 -->
<video src="./视频名.mp4" controls autoplay muted></video>

2.10链接标签

<!--
空链接：用#代替
href:设置跳转链接网站地址
target:设置目标网页的打开形式
  _self	 默认值，在当前窗口中跳转(覆盖原网页)
  _blank 在新窗口中跳转(保留原网页)
-->
<a href="https://www.baidu.com">跳转到百度</a>

2.11列表标签

<!--
1.无序列表  2.有序列表：有明确排序的布局  3.自定义列表
 -->
 <body>
 	<!-- 表示无序序列的整体，用于包裹li标签 -->
    <ul> 
    	<!-- 表示无序列表的每一项，用于包含每一行的内容 -->
        <li>这是一个无序列表</li> 
    </ul>
    
	<!-- 表示有序序列的整体，用于包裹li标签 -->
	<ol>
		<!-- 表示有序列表的每一项，用于包含每一行的内容 -->
        <li>这是一个有序列表</li>
    </ol>
	
	<!-- dl	表示自定义列表的整体，用于包裹dt/dd标签 -->
	<dl>
		<!-- dt	表示自定义列表的主题 -->
        <dt>帮助中心</dt>
        <!-- dd标签会自动显示缩进 -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>

2.12表格标签

<body>
  1.普通表单，没有样式
  <!-- 表格整体，可用于包裹多个tr -->
  <table> 
  	<!-- 表格每行，可用于包裹td -->
    <tr> 
    	<!-- 表格单元格，可用于包裹内容-->
        <td>姓名</td><td>学科</td><td>成绩</td> 
    </tr>
    <tr>
        <td>小明</td><td>数学</td><td>142</td>
    </tr>
    <tr>
        <td>小风</td><td>英语</td><td>144</td>
    </tr>
  </table>  

  2.添加样式，表名和表头的表格
  <table border="3" width="200" height="120"> <!-- 添加样式 -->
  	<!-- 
		caption-表格大标题-表示表格整体大标题，默认在表格整体顶部居中位置显示
		th-表头单元格-表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
	-->
  	<caption><b>成绩单</b></caption>
    <tr>
        <th>姓名</th><th>学科</td><th>成绩</td>
    </tr>
    <tr>
        <td>小明</td><td>数学</td><td>142</td>
    </tr>
    <tr>
        <td>小风</td><td>英语</td><td>144</td>
    </tr>
  </table>  

  3.含有表格结构的标签
  <table border="3" width="200" height="120">
    <caption><b>成绩单</b></caption>
    <thead>
      <tr>
        <th>姓名</th><th>学科</th><th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td><td>数学</td><td>142</td>
      </tr>
      <tr>
        <td>小风</td><td>英语</td><td>144</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>姓名集</td><td>学科集</td>><td>1111</td>
      </tr>
    </tfoot>
  </table>  
  4.合并单元格
  <tr>
      <td>耶耶</td>
      <!-- 
		rowspan	合并单元格的个数跨行合并，将多行单元格垂直合并
		colspan	合并单元格的个数跨列合并，将多列的单元格水平合并
	  -->
      <td rowspan="2">144</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>云云</td><!--<td>133--></td><td>数学</td>
    </tr>
</body>

2.13表单标签

场景：在网页中显示收集用户信息的表单效果，如登录页、注册页
标签名：input，input标签可以通过type属性值的不同，展示不同效果
type属性值：

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于多选多
inputsubmit提交按钮，用于提交
inputreset重置按钮，用于重置
inputbutton普通按钮，默认无功能，需要配合js添加功能
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表单标签</title> 
</head>
<body>

<!-- 1.type = "text"时placeholder提示文字 -->
<p>
   <input type="text" placeholder="请输入姓名"> 
</p>
<!-- 2.type = "radio"时只能有一个被选中，checked默认选中 -->
<p>
  性别：<input type="radio" name="gender">男
   <input type="radio" name="gender" checked> 女
</p>
<!-- 3.type = "file"时选择文件，multiple多文件选择 -->
<p>
    文件选择：<input type="file" multiple>
</p>
<!-- 4.input和button的type 都可以为”submit“,”reset“,"button" -->
<p>	
   <button type="submit">提交按钮</button>
</p>
<!-- 5.下拉列表标签，select是整体，option是下拉每一项，option是默认选中 -->
<select>
	<option>小明</option>
	<option selected>小白</option>
</select>
<!-- 6. textarea 文本域标签 场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：cols：规定了文本域内可见宽度  rows：规定了文本域内可见行数
右下角可以拖拽改变大小，该样式主要采用CSS设置 
-->
<br/><br/>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<!-- 7.label 常用于绑定内容与表单标签的关系，原来需要点选项前的圆圈，现在直接点击文本也可以选中 -->
<p>
	<label><input type="radio" name="gender"> 女</label>
</p>
</body>
</html>

2.14语义标签

<body>
	<!-- 无语义标签 -->
    <div>这是一个div标签</div>
    <div>这是第二个div标签</div>
    <span>这是一个span标签</span>
    <span>这是第二个span标签</span>

	<!-- 有语义的布局标签 -->
	<header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

	<!-- 空格-&nbsp -->
	<header>网页&nbsp;&nbsp;头部</header>
</body>

注：以上是HTML主要使用部分，还有些细碎衍生部分这里不多做说明。可以从这里去学习HTML相关知识：点这里

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

命令行之巅：Linux Shell编程的至高艺术（中）

命令行之巅：Linux Shell编程的至高艺术（中）

文章一览 前言一、输入/输出及重定向命令1.1 输入/输出命令1.1.1 read命令1.1.2 echo命令 1.2 输入/输出重定向1.3 重定向深入讲解1.4 Here Document1.4.1 /dev/null 文件 二、shell特殊字符和命令语法2.1 引号2.1.1 双引号2.1.2 单引号2.1.3 倒引号 2.2 注释、管道线和后台命令…
阅读更多...
一文理解机器学习中二分类任务的评价指标 AUPRC 和 AUROC

一文理解机器学习中二分类任务的评价指标 AUPRC 和 AUROC

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在机器学习的二分类任务中&#xff0c;评估模型性能是至关重要的一步。两种常用的评价指标是 Precision-Recall Curve 下的面积 (AUPRC) 和 Receiver Operating Characteristic Curve 下的面积 (AUROC)…
阅读更多...
Visual Studio Code(VS Code)配置C/C++环境

Visual Studio Code(VS Code)配置C/C++环境

一、Visual Studio Code安装 Visual Studio Code&#xff0c;下文中简称为VS Code的详细安装方法请参考VSCode安装教程&#xff08;超详细&#xff09;-CSDN博客 二、MinGW编译器下载与配置 1、MinGW介绍 MinGW(Minimalist GNU for Windows)是一款用于Windows 平台的轻…
阅读更多...
少儿编程在线培训系统：客户服务与学习支持

少儿编程在线培训系统：客户服务与学习支持

2.1 VUE技术 VUE它是由HTML代码&#xff0c;配上嵌入在HTML代码里面的Java代码组成的应用于服务器端的语言&#xff0c;使用VUE进行开发能够更加容易区分网页逻辑以及网页设计内容&#xff0c;让程序员开发思路更加清晰化&#xff0c;VUE在设计组件时&#xff0c;它是可以重用的…
阅读更多...
uniapp Native.js原生arr插件服务发送广播到uniapp页面中

uniapp Native.js原生arr插件服务发送广播到uniapp页面中

前言 最近搞了个设备&#xff0c;需求是读取m1卡&#xff0c;厂家给了个安卓原生demo&#xff0c;接入arr插件如下&#xff0c;接入后发现还是少了一部分代码&#xff0c;设备服务调起后触发刷卡无法发送到uniapp里。 中间是一些踩坑记录&#xff0c;最后面是解决办法&#xf…
阅读更多...
C项目 天天酷跑（下篇）

C项目 天天酷跑（下篇）

上篇再博客里面有&#xff0c;接下来我们实现我们剩下要实现的功能 文章目录 碰撞检测 血条的实现 积分计数器 前言 我们现在要继续优化我们的程序才可以使这个程序更加的全面 碰撞的检测 定义全局变量 实现全局变量 void checkHit() {for (int i 0; i < OBSTACLE_C…
阅读更多...
HarmonyOS NEXT 实战之元服务：静态案例效果--航空出行

HarmonyOS NEXT 实战之元服务：静态案例效果--航空出行

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; import { authentication } …
阅读更多...
福特汽车物流仓储系统WMS：开源了，可直接下载

福特汽车物流仓储系统WMS：开源了，可直接下载

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。欢迎大家到本文底部评论区留言。 近日&#xff0c;福特汽车公司推出了其广受好评的仓库管理系统GreaterWMS&#xff08;更大仓库管理系统&#xff09;的开源版本&#xff0c;意味着各行…
阅读更多...
STM32完全学习——FLASH上FATFS文件管理系统

STM32完全学习——FLASH上FATFS文件管理系统

一、需要移植的接口 我们通过看官网的手册&#xff0c;可以看到我们只要完成下面函数的实现&#xff0c;就可以完成移植。我们这里只移植前5个函数&#xff0c;获取时间的函数我们不在这里移植。 二、移植接口函数 DSTATUS disk_status (BYTE pdrv /* Physical drive nmuber…
阅读更多...
pyqt5冻结+分页表

pyqt5冻结+分页表

逻辑代码 # -*- coding: utf-8 -*- import sys,time,copy from PyQt5.QtWidgets import QWidget,QApplication, QDesktopWidget,QTableWidgetItem from QhTableWidgetQGN import Ui_QhTableWidgetQGN from PyQt5.QtCore import Qt from PyQt5 import QtCore, QtGui, QtWidgets…
阅读更多...
Windows 使用 非安装版MySQL 8

Windows 使用 非安装版MySQL 8

1.下载MySQL 8 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.40-winx64.zip 2.创建my.ini 下载解压后&#xff0c;发现根目录没有my.ini文件&#xff0c;需手动创建 my.ini # For advice on how to change settings please see # http://dev.mysql.com/doc/refma…
阅读更多...
海外招聘丨 苏黎世联邦理工学院—机器学习在社会和政治科学中的应用博士后

海外招聘丨 苏黎世联邦理工学院—机器学习在社会和政治科学中的应用博士后

雇主简介 苏黎世联邦理工学院是世界领先的科技大学之一。我们以优质的教育、尖端的基础研究和将新知识直接转化为社会而闻名。来自 120 多个国家的 30,000 多名学生认为我们的大学是一个鼓励独立思考和激励卓越的环境的地方。 我们位于欧洲中心&#xff0c;但与世界各地建立联…
阅读更多...
微信小程序中遇到过的问题

微信小程序中遇到过的问题

记录微信小程序中遇到的问题&#xff08;持续更新ing&#xff09; 问题描述&#xff1a;1. WXML中无法直接调用JavaScript方法。2. css中无法直接引用背景图片。3. 关于右上角胶囊按钮。4. 数据绑定问题。5. 事件处理问题。 问题描述&#xff1a; 1. WXML中无法直接调用JavaSc…
阅读更多...
idea 8年使用整理

idea 8年使用整理

文章目录 前言idea 8年使用整理1. 覆盖application配置2. 启动的时候设置编辑空间大小&#xff0c;并忽略最大空间3. 查询类的关系4. 查看这个方法的引用关系5. 查看方法的调用关系5.1. 查看被调用关系5.2. 查看调用关系 6. 方法分隔线7. 选择快捷键类型8. 代码预览插件9. JReb…
阅读更多...
RAGFLOW使用笔记【更新ing】

RAGFLOW使用笔记【更新ing】

0.引言 本文记录使用RAGFLOW的一些问题以及解决办法&#xff0c;它以笔记的形式存在&#xff0c;方便我以后回顾自己的学习工作。 1.RAGFLOW上传文件大小默认是128M,如何修改上传文件大小&#xff1f; 更新ragflow/docker/.env中的MAX_CONTENT_LENGTH 环境变量 然后同步更新…
阅读更多...
ubuntu22.04安装PaddleX3

ubuntu22.04安装PaddleX3

PaddleOCR 安装过程可以参考PaddleX本地安装教程 我的电脑环境配置&#xff1a; ubuntu22.04 cuda11.8&#xff08;之前安装的是12.4没有匹配的paddle-gpu;这里改成11.8&#xff09; 一、安装基础环境 1、 conda create -n ppx1 python3.10 2、 conda activate ppx1 3、…
阅读更多...
Android 之 Activity 的启动模式（launchMode）

Android 之 Activity 的启动模式（launchMode）

一、Activity 启动模式 在实际项目中&#xff0c;应该根据项目的实际需要来为每个 Activity 指定恰当的启动模式 launchMode。启动模式一共有四种&#xff0c;分别是 standard、singleTop、singleTask 和 singleInstance。可以在 AndroidManifest.xml 中通过给 <activity&g…
阅读更多...
软件老化分析

软件老化分析

软件老化 课程&#xff1a;软件质量分析 作业 解答 Python代码如下&#xff1a; n int(input("类别数&#xff1a;")) theta list(map(float, input("各个类别的权重&#xff1a;").split())) m list(map(int, input("各个类别的度量元数量&…
阅读更多...
Jenkins 构建流水线

Jenkins 构建流水线

在 Linux 系统上安装 Jenkins 服务&#xff0c;以及配置自动化构建项目 前置准备环境&#xff1a;docker、docker-compose、jdk、maven 一、环境搭建 1. Jenkins 安装 &#xff08;1&#xff09;拉取镜像 # 安装镜像包&#xff0c;默认安装最新版本 docker pull jenkins/jen…
阅读更多...
5G学习笔记之Non-Public Network

5G学习笔记之Non-Public Network

目录 0. NPN系列 1. 概述 2. SNPN 2.1 SNPN概述 2.2 SNPN架构 2.3 SNPN部署 2.3.1 完全独立 2.3.2 共享PLMN基站 2.3.3 共享PLMN基站和PLMN频谱 3. PNI-NPN 3.1 PNI-NPN概述 3.2 PNI-NPN部署 3.2.1 UPF独立 3.2.2 完全共享 0. NPN系列 1. NPN概述 2. NPN R18 3. 【SNPN系列】S…
阅读更多...
最新文章

Copyright @ 2022~2023