5-StarrySky
5-StarrySky

Java后端须知的前端知识

Java后端须知的前端知识

HTML （超文本标记语言）
  • W3C标准
    • 结构：HTML
    • 表现：CSS
    • 行为：JavaScript
快速入门
<html>
	<head>
		<title>title>
	head>
	<body>
        <font color="red">font>
	body>
html>
基础标签

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

<h1>我是标题h1h1>
<h2>我是标题h2h2>
<h3>我是标题h3h3>
<h4>我是标题h4h4>
<h5>我是标题h5h5>
<h6>我是标题h6h6>
<hr>

body>
html>
HTML 显示结果 描述
< ; < 小于号或显示标记
> ; > 大于号或显示标记
& ; & 可用于显示其他特殊字符
" ; " 引号
® ; @ （里面的a应该是R） 已注册
© ; @ （里面的a应该是C） 版权
&trade ; TM 商标
  ; 不断行的空白
图片、音频、视频标签

  • 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>Titletitle>
head>
<body>

<img src="a.jpg"width="300" height="400">

<audio src="b.mp3"controls>audio>
<video src="c.mp4"controls width="500"height="300">video>
body>
超链接标签

: 定义超链接，用于链接到另一个资源

  • href:指定访问资源的URL

  • target:指定打开资源的方式

    _se1f：默认值，在当前页面打开
    _blank：在空白页面打开

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Titletitle>
head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道a>
body>
html>
列表标签
标签 描述
    		定义有序列表（有序号）
      		定义无序列表
    		• 定义列表项

      可以添加格式，来换对应的样式，但一般在CSS中进行进一步的修改

      表格标签
      标签 描述
      定义表格
      定义行
      定义单元格
      定义表头单元格

      • table:定义表格

        • border:规定表格边框的宽度
        • width:规定表格的宽度
        • cellspacing:规定单元格之间的空白

      • tr:定义行

        • align:定义表格行的内容对齐方式

      • td:定义单元格

        • rowspan:规定单元格可横跨的行数
        • colspan:规定单元格可横跨的列数
      DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Titletitle>
head>
<body>
<table border="1">
	<tr align="center">
		<th>序号th>
		<th>品牌Logoth>
		<th>品牌名称th>
		<th>企业名称th>
	tr>
	<tr align="center">
		<td>010td>
		<td><img src="../img/三只松鼠.png"width:="60"height="50">td>
		<td colspan=2>三只松鼠td>
	tr>
table>
body>
html>
      布局标签
      标签 描述
      		定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页，块级标签，会自动换行；
      用于组合行内元素。不会换行（行内）
      表单标签
      • 表单：在网页中主要负责数据采集功能，使用标签定义表单
      • 表单项（元素）：不同类型的iput元素、下拉列表、文本域等
      标签 描述
      		定义表单
      定义表单项，通过type属性控制输入形式
      为表单项定义标注
      定义下拉列表
      定义下拉列表的列表项