【JavaWeb】web前段的引入和HTML语言

最新推荐文章于 2022-11-29 08:30:00 发布

Enjoy96

最新推荐文章于 2022-11-29 08:30:00 发布

阅读量848

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/78956818

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

WEB前端的引入

HTML、CSS、JS

1.软件结构的划分：

（1）C/S结构: Client –Server （客户端和服务器端）

特点:针对客户端的应用必须升级才能使用服务器端的高版本功能

应用:QQ，应用软件等等

（2）B/S结构：Browser-Server （浏览器和服务器端）

特点：只要保证计算机中有浏览器软件就可以去访问网站里面的一些内容,不需特定的升级!

应用：购物网站

JavaEE:13种技术:javamiao ,EJB 分布式处理,等等…

2.网站：

将基于“B/S”结构的这种软件统称为网站，网站是由很多页面组成，每一个页面由很多的html标签组成

3.http协议的执行流程：

HTML语言

1.HTML的入门

（1）全称：Hyper Text Markup Language超文本标记语言

可以针对字体、颜色、大小、图片、动画和音频进行操作的超文本

（2）html文档的结构组成：

①.<html></html>
<html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
②.<head>和</head>
<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
③.<body>和</body>
<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用

<html>
<head>
<title>页面的窗口标题栏</title>
</head>
<body>
页面的主体部分,这里面的内容会显示在浏览器中
</body>
</html>

（3）HTML标签的分类：

①闭合标签：有开始和结束的标签 <html></html>,<titlt></title>......

②空标签：<img src=”连接到的图片资源文件” />,<meta />支持的当前页面的编码格式以及当前文本类型

2.HTML结构的描述

html标准：结构化标准

css标准：样式化标准（美化页面）

JavaScript标准：行为化标准（BOM编程和DOM编程）

（1）DOCTYPE : 告诉浏览器当前页面的规范: 声明文档类型

（2）head标签:告诉浏览器当前html页面的编码格式以及文本类型

（3）<meta/>:head的子标签，通过该标签来声明文本的类型以及编码格式

①<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

content:当前文本类型:text/html

②<metaname="keywords" content="java-php-python-c" />

meta的name属性，keywords关键字（与网页排名有关）

③<metaname="description" content="这是一个家做Java开发的软件公司"/>

meta的name属性，description 描述当前页面中的主要内容

例：标题1 描述，标题2 描述，标题3，描述...

（4）body标签：在浏览器中会显示body中的内容

（5）title标签：是页面的窗口标题的标签

（6）html的注释:：

3.HTML中的一些标签

（1）<h1></h1>—<h6></h6>标题标签（从大依次到小）

（2）<hr/>水平线标签

（3）<br/>换行标签

（4）<p></p>段落标签

（5）<blockquote></blockquote>段落缩进标签（前面空出两个字的位置）

（6）<marquee></marquee>滚动标签

behavior:滚动的方式:交替滚动,默认交替滚动
direction:滚动的方式left rigth up down
scorllamount:滚动的速度,默认值6,一般情况指定1~3即可,值越大滚动的速度越快

例：<marquee behavior="slide" direction="right" scrollamount="6">国际米兰</marquee>

（7）<sup></sup> <sub></sub> 上下标的标签（多用于公式中）

例如：y=x<sup>2</sup> ——> y=x^2

（8）<pre></pre> 原样输出标签（将写入的代码原样输出）

（9）<ol></ol>有序列表<li></li>列表选项（ol的子标签）

ol中含有默认属性：type（默认类型：数字从1开始，可以自己指定）

例如：效果：

（10）<ul></ul>无序列表（也内含子标签<li>）type属性可以指定开头

例如：效果：

（11）<div></div>块标签（盒子模型）div+css用于网页布局

（12）架构标签（等级划分）：

<dl> </dl>内含子标签<dt></dt>和<dd></dd>注：dt 高于 dd

例：效果：

（13）<center></center>居中标签

（14）<em></em>斜体标签

（15）<strong></strong>字体加粗标签

（16） 空格

（17）>大于号>

（18）<小于号<

（19）©版权符号

（20）®注册商标

*练习：输出此诗

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清平乐·年年雪里</title>
</head>

<body>
	<h1>清平乐·年年雪里</h1>
  	朝代:<em>宋代</em>  作者:<strong>李清照</strong>
    <hr/>
    原文:
    <pre>
年年雪里,常插梅花醉,挼尽梅花无好意,
赢得满衣清泪!
今年海角天涯,萧萧两鬓生华.
看取晚来风势,故应难看梅花.
    </pre>
</body>
</html>

超链接标签

1.超链接的作用：

（1）可以连接大资源文件或者资源地址

（2）作为锚链接来使用

2.超链接标签：<a></a>

其中的属性：

（1）href：连接到资源文件（包含一些图片文件），也可以连接URL（统一资源定位符号）

注：URI 表示互联网协议（范围大）URL（里面使用http:// 协议多）

（2）target：打开资源文件的一种方式

参数：_blank 超连接新建一个窗口打开

_self超链接在当前窗口直接打开

3.锚链接的使用：

相当于打标记，点击可跳转到标记处位置

图解：

（1）在同一页面下进行跳转：

name属性：锚链接的名称——>相当于打了一个跳转标记

（a）创建一个跳转标签<a name="name"></a>

（b）跳转到标记<a href="#name属性">开始跳转</a>

（2）在不同页面下的跳转：

（a）创建一个跳转标签<a name="name"></a>

（b）创建跳转链接<a href="xxx.html#跳转标记的name属性值"></a>

4.常见的协议：

（1）file:// 链接到文件的话,如果前面没有写协议,默认就是file://就会在当前本地中找是否有这个文件,有就直接显示
（2）http:// http协议的执行流程,要求访问这个链接地址,首先要在c盘下有文件hosts中找是否有该域名对应的ip,如果有,本地打开,如果没有,就需要进行联网操作,来进行访问
（3）thunder:// 迅雷软件的协议
（4）mailto: 邮件协议

练习1：超链接练习

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接练习</title>
</head>

<body>
	<!--链接到本地文件-->
	<a href="test.txt" target="_blank">超链接</a><br/>
	<!--链接到图片文件-->
	<a href="file：C:\Users\thinkpad\Desktop\Reus.jpg" target="_self">链接到图片</a><br/>
	<!--链接到http协议-->
	<a href="http://www.baidu.com">链接百度</a> <br/>
	<!--链接到迅雷协议-->
	<a href="thunder://www.moive.com/fuchouzhelianmeng.avi">高速下载通道<<复仇者联盟>></a><br/>
	<!--链接到邮件协议-->
	<a href="mailto:eric@xxxx.com">发送邮件</a><br/>
</body>
</html>

效果：

练习2：超链接中锚链接的使用

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锚链接练习</title>
</head>

<body>
	<!--定义返回顶部的跳转标记-->
	<a name="top"></a>
	hdoasidhaiosdjaisojaisxas<br/>
	<a href="#ch01">跳转到第一章内容</a><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	
	<!--定义跳转第一章的标记-->
	<a name="ch01"></a>
	第一章内容<br/>
	hgdasudhasuidjaskmcasidjasicmasmxcsaopxksaoxcksaxcoasjxc<br/>
	<a href="#top">[返回顶部]</a>
	
	<br/>
	
	<!--使用锚链接跳转至不同页的某处，并且制定打开方式为新建标签页打开-->
	<!--在需要打开的文件的位置处打标记-->
	<a href="new_file.html#list" target="_blank">超链接_跳转至下一页</a><br/>
</body>
</html>

图像标签

1.标签格式：空标签 <img/>

2.常用的属性：

（1）src：链接到图片的资源文件
（2）title：鼠标悬浮到图片上时，会显示提示出的文字
（3）alt：当图片资源失效的时候，替代图片出现的文本
（4）width：图片的宽度
（5）height：图片的高度

3.Dreamweaver设置图片所选区域链接图解：

练习：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标签</title>
</head>

<body>
	<!--图像标签练习-->
    <img src="../images/Reus.jpg" alt="这是一张罗伊斯的图片" width="400px" height="600px" border="0" usemap="#Map" title="罗伊斯"/>
    
    <!--设计图片生成的，点击所选区域可进入链接<area/>-->
    <!--shape为所选区域类型，coords为所选区域坐标，href为链接地址，target为打开方式（新建标签打开还是在本标签）-->
    <map name="Map" id="Map">
      <area shape="rect" coords="159,156,256,282" href="https://weibo.com/u/5600126187" target="_blank" />
    </map>

</body>
</html>

转义字符

1.常用的转义字符：

练习：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转义字符</title>
</head>

<body>
	
    <h1>标题1</h1><br/>
    明天晚上看比赛     国际米兰<br/>
    意大利足球甲级联赛<sup>&reg;</sup><br/>
    意大利足协<sup>&copy;</sup><br/>
</body>
</html>

效果：

表格标签

1.标签格式：<table></table>

2.标签：

表格的标题：<caption></caption>

行标签：<tr></tr>

单元格：<td></td>

表头：<th></th>（加粗并且自动居中）

3.table标签中常用的几个属性：

（1）border：边框 1px
（2）align：在浏览器中显示的方式:常用的值:left center right
（3）width：表格的宽度
（4）height：表格的高度

注：
行合并：rowspan
列合并：colspan

练习：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>

<body>

<!--表格标签-->
<table border="1px" width="400px" height="300px" align="center" bgcolor="pink">
	<caption>XXX学校2017年学分成绩表</caption>
	<tr>
    	<th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    <tr align="center">
    	<!--设置行合并-->
    	<td rowspan="2">狗娃</td>
        <td>软工1班</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>会计1班</td>
        <td>85</td>
    </tr>
    <tr align="center">
    	<td>狗蛋</td>
        <td>软工2班</td>
        <td>90</td>
    </tr>
    <tr align="center">
    	<td>狗剩</td>
        <td>软工1班</td>
        <td>79</td>
    </tr>
    <tr align="center">
    	<!--设置列合并-->
        <td colspan="2">平均分</td>
        <td>80</td>
    </tr>
</table>
</body>
</html>

效果：

表格的拆分

1.标签格式： <thead></thread>

这三个标签可以将整个的table标签从上至下拆分为三个部分，分别进行加载，从而解决用户体验问题

2.浏览器加载表格标签table的方式：用户如若需要访问单元格中的某个内容，必须等待浏览器将整个table表格标签加载到结束标签的时候，才能将内容反馈给用户，而这样用户需要等待的时间则会非常久，用户体验差

3.表格标签拆分的应用：

在Css 中设置样式，和JavaScript中进行的一些操作

4.表格拆分图解：

练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
</head>

<body>
	<table border="1px" align="center" width="400px" bgcolor="pink">
    	<thead>
    	<tr>
        	<th>姓名</th>
            <th>年龄</th>
            <th>性别</th>            
        </tr>
        </thead>
        <tbody>
        <tr>
        	<td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
        	<td>李四</td>
            <td>22</td>
            <td>女</td>
        </tr>
        <tr>
        	<td>王五</td>
            <td>25</td>
            <td>男</td>
        </tr>
        </tbody>
        
    </table>
</body>
</html>

Enjoy96

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】web前段的引入和HTML语言

WEB前端的引入HTML、CSS、JS1.软件结构的划分：（1）C/S结构: Client –Server （客户端和服务器端）特点:针对客户端的应用必须升级才能使用服务器端的高版本功能应用:QQ，应用软件等等（2）B/S结构：Browser-Server （浏览器和服务器端）特点：只要保证计算机中有浏览器软件就可以去访问网站里面的一些内容,不需特定的升级!
复制链接

扫一扫