Java Web 开发 从入门到入?

Java Web 开发 学习记录一

Web 前端基础



前言

从零开始的Web开发生活。


提示:以下是本篇文章正文内容,下面案例可供参考

HTML标签

常用标签:

  1. 列表:1)无序列表标记<ul>:属性type(disc/ circle/ square)改变列表的项目符号。
    语法格式:
<ul>
   <li>列表项</li>
   <li>列表项</li>
   <li>列表项</li>
   ...
   </ul>

2)有序列表标记<ol>:属性type设置项目序号(默认为数字序号),属性start改变项目序号的起始值。
语法格式:

<ol>
   <li>列表项</li>
   <li>列表项</li>
   ...
   </ol>

一个实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body bgcolor="yellow">
	<h2>无序列表-车类</h2>
	<ul type="circle">
	<li>单车</li>
	<li>火车</li>
	<li>卡车</li>
	</ul>
	<h2>有序列表-职业</h2>
	<ol type="A" start="5">
	<li>替身使者</li>
	<li>卡面来打</li>
	<li>奥特曼</li>
	<li>剑仙</li>
	<li>下饭厨师</li>
	</ol>
</body>
</html>

在这里插入图片描述
2.图像与多媒体
标记<img>插入图像,属性src(必需)指定要插入图像文件的位置与名称。
语法格式:

<img src="文件路径及名称">

标记<bgsound>给网页添加背景音乐。(不太好用的样子)
语法格式:

<bgsound src="文件路径及名称" loop="播放次数" >

属性loop可以取值true和false:是否循环播放。
标记<embed>将多媒体文件(例如Flash动画、MP3音乐、ASF视频等)添加到网页中。
语法格式:

 <embed src="文件路径及名称" height="播放器高度" width="播放器宽度" >
	</embed>

一个实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body bgcolor="yellow">
	<bgsound src="王力宏 - 花田错.mp3" loop="100" >
	<img src="tp.jpg" border="2" height="100" width="100" align="top">
	<img src="小白二胡.png" border="2" height="100" width="100" align="top">
	<embed src="mGlitter_Bokeh_02.mp4" align="middle" autosize="true" >
	</embed>
	<embed src="王力宏 - 花田错.mp3">
	</embed>
	<h2>无序列表-车类</h2>
	<ul type="circle">
	<li>单车</li>
	<li>火车</li>
	<li>卡车</li>
	</ul>
	<h2>有序列表-职业</h2>
	<ol type="A" start="5">
	<li>替身使者</li>
	<li>卡面来打</li>
	<li>奥特曼</li>
	<li>剑仙</li>
	<li>下饭厨师</li>
	</ol>
</body>
</html>

在这里插入图片描述
3.超链接<a>:超链接的作用是建立一个位置到另一个位置的链接,实现网页之间的互相访问,或者使网页链接到其他相关的多媒体文件上。
标记<a></a>可以成对出现在文档的任何位置。
语法格式:

<a href="链接路径" target="目标窗口的打开方式">链接内容</a>

href中填写链接地址,可以是内部或外部链接。链接内容可以是文字内容或图片。
还有个常用的title属性,它的值就是鼠标悬停在超链接地址时出现的字段。
属性target的值有:_self:默认值,当前窗口打开目标页面。
_blank:目标页面在新窗口打开。
_top:页面在顶层框架中打开。
_parent:页面在当前框架的上一层打开。

一个实例:

   <ol type="A" start="5">
	<li><a href="https://www.bilibili.com/" title="bilibili">替身使者</a></li>
	<li><a href="https://www.bilibili.com/" target="_blank">卡面来打</a></li>
	<li><a href="e1_1.html" target="_top">奥特曼</a></li>
	<li><a href="https://www.bilibili.com/" target="_parent">剑仙</a></li>
	<li><a href="https://www.bilibili.com/" title="用户信息"><img src="小白二胡.png" border="2"></a></li>
	<li>下饭厨师</li>
	</ol>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页