(Java高级教程)第四章必备前端基础知识-第一节:HTML -ITADN 社区
(Java高级教程)第四章必备前端基础知识-第一节:HTML 文章目录
一:HTML概述
二:常用标签介绍
(1)备注
(2)标题标记
(3)段落标记
(4)换行分隔
(5)设置格式
(6)插入图片
(7)超链接地址
(8)表格结构
(9)列表形式
(10)表单提交字段
①:表单提交字段(form提交)
②:输入字段(input类型)
③:字段名称(label名称)
④:下拉选择项(select类型)
⑤:文本输入区域(textarea区域)
(11)div和span
三:简单案例
一:HTML概述
(1)概述
HTML(即Hyper Text Markup Language)被称为超文本标记语言,在Web开发中被广泛应用于创建和管理网页内容。它支持对文本的格式化处理,并插入图片的能力使其成为网页设计的重要工具之一。通过生成链接地址和提供表单元素的输入接口等特性,在构建动态网页时表现出色。此外,在网页布局结构以及表格形式的内容管理方面也提供了强大的功能支持,并可将其保存为纯文本文件以便浏览器读取并展示
例如,下面的HTML代码用浏览器解析后显示如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
<h1 id="test">这是一个测试页面</h1>
</body>
</html>
(2)标签
如上代码所示,在HTML中代码是由标签构成的,例如
则为终止标记。
在某些情况下仅有起始标记而无终止标记的标记被称作单标记。
起始标记与终止标记之间的部分被称为内容。
起始标记中可以包含属性例如下面所示的\texttt{ID} 属性可用于唯一标识该元素。
<title>测试页面</title> <!--显示浏览器页面名称-->
<title id="test">测试页面</title> <!--这一个一级标题-->
HTML中的标签可以分为如下三类
行内标签:能够与其他元素同行排布的有:如a, span, strong, i, sub等。
块级标签:无法与其他组件同行排布:如div, p, li等。
行内块级标签:能够与其他组件同行排布的同时还支持设定高度:如textarea, input等。
(3)HTML基本结构
HTML核心架构:创建一个新的html文件,在IDEA中打开终端窗口并输入命令!然后按下Tab键即可启动项目框架的基础构建功能!其中
<!doctype html> : 此标记用于明确标识文档类型为HTML5格式。
<html lang="en">···</html> : 此标记定义了HTML页面的根元标签结构……其中lang属性指定语言代码。
<head>···</head> : 此部分包含关于文档的各种元数据信息……如charset属性指定字符编码……title元标签定义了页面标题。
<meta charset="UTF-8">: 描述了页面的字符编码方式。
<title>···</title>: 描述了文档的标题。
<body>···</body> :包含了可见的页面内容 ,也是编写HTML代码的主要地方
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
接着,在<title></title>标签内部设置标题为"这是标题";然后,在<body></body>标记区添加如下两个标记元素,并完成保存操作后,在浏览器页面进行刷新并查看最终呈现效果。
<h1></h1>:定义一个一级标题
<p></p>:定义一个段落
效果如下
二:常用标签介绍
(1)注释
注释 :HTML中注释标签如下,注意
在IDEA中使用ctrl+/或ctrl+shift+/可快速添加注释
<!-- 这里面写注释 -->
如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这是标题</title>
</head>
<body>
<!--一级标题-->
<h1>这是一级标题</h1>
<!--第一个段落-->
<p>这是第一个段落</p>
<!--第二个段落-->
<p>这是第二个段落</p>
</body>
</html>
(2)标题
共有六个层次的标题标记在HTML中。这些标记通常表示为H1到H6。值得注意的是,数值较小的编号代表较高的层级。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
(3)段落
被段落标签<p>···</p>包围的文字被称为一个段落一样的结构,在Word中也是一样的情况:每个段落之间会有一个适当的间隙需要注意。
<p>HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Ber ners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用</p>
<p>用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML, 将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可 以识别的信息,即我们所见到的网页</p>
<p>自1990年以来,HTML就一直被用作万维网的信息表示语言,使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来</p>
(4)换行
在上述示例中可以看到,在p标签内部对文本内容进行手动换行时,并不会影响到页面的实际显示效果变化。因此,在HTML语言环境中实现文字间的换行功能,则必须使用<br>标签这一单标签形式。
<p>HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言<br>。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,<br>它是标准通用化标记语言SGML的应用</p>
<p>用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。<br>使用HTML, 将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,<br>并将这些HTML文件“翻译”成可 以识别的信息,即我们所见到的网页</p>
<p>自1990年以来,HTML就一直被用作万维网的信息表示语言,<br>使用HTML描述的文件需要通过web浏览器显示出效 果。HTML是一种建立网页文件的语言,<br>通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来</p>
(5)格式化
在执行格式化的操作时,在Markdown语言中存在多种特定的命令和标签用于实现文本样式的变化。这些命令主要用于对文本内容进行样式调整,并通过不同的标记组合来实现字体大小、字体斜度等多种效果的变化。常见的操作包括加粗处理、字体倾斜等基本样式切换功能。
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<del>删除线</del>
<ins>下划线</ins>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)
(6)图片
这是一个单标签图片标签img用于显示由属性src所指定的文件或位置信息(包括本地文件和网络资源)
在指定HTML文件的同一个目录中添加一张图片dog.png,并通过img标签来呈现这张图片。
<img src="./dog.png">
img标签还有其他属性也比较常用
alt:无法正常显示图像时的替代文字。
title:悬停鼠标时的提示信息。
width/height:尺寸设置(通常仅调整宽度或高度中的一个)。
border:边框样式。
<img src="./dog.png", title="这是很多狗", width="200">
<br>
<!-- cat.png图片并不存在 -->
<img src="./cat.png" alt="图片未正常显示">
(7)超链接
在HTML中,超链接使用标签a来实现指向外部资源(如网站)的功能;其中路径属性由href字段指定。
<p>链接到本人博客首页</p>
<a href="">快乐江湖博客首页</a>
<p>点击图片跳转至百度首页</p>
<a href="http://www.baidu.com"><img src="./dog.png" alt="狗"></a>
<a href="#one">跳转至one</a>
<a href="#two">跳转至two</a>
<a href="#three">跳转至three</a>
<p id="one">
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
</p>
<p id="two"></p>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
<p id="three"></p>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
测试测试<br>
此外,在网页中使用带有标签的元素时
(8)表格
表格 :表格并不是一个标签而是一组标签,如下
table :整个表格内容
tr :每一行
th :表头单元格(默认居中并加粗显示)
thead :涵盖范围比th 区域更大的主要标题部分
tbody :主要数据填充区域
如下,快速搭建一个简单的表格
<table>
<tr>
<th>姓名</th>
<th>编号</th>
</tr>
<tr>
<th>李四</th>
<th>0001</th>
</tr>
<tr>
<th>王五</th>
<th>00002</th>
</tr>
<tr>
<th>赵六</th>
<th>00003</th>
</tr>
</table>
关于表格的属性设置都要放在table标签中,其中
align :表单元格相对于周围元素的排列布局(特别说明此属性不涉及单元格内部的间距设置),例如通过使用如align=center等值进行配置。
border :该属性指定表单元格边框宽度(空字符串表明无边框设置)。
`cellpadding :此属性定义表单元格内内容与周边边框之间的间距(默认值为1像素)。
`cellspacing :相邻单元格之间的垂直间距设置(默认值为2像素)。
width/height :此属性允许指定宽度或高度值以控制表显示的具体范围(单位均为像素)。
(9)列表
列表 :列表标签有如下三种
ul和li :无序列表
ol和li :有序列表
dl/dt/dt :自定义列表
注意
各元素间为平等关系
在HTML层次结构中,仅允许将< li >标签嵌入于< ul >和< ol >内部
在多语言文档格式中,默认仅支持< dt >和< dd >两种类型
嵌套于列表项中的元素可包含其他任何形式的标记内容
<h4>无序列表</h4>
<ul>
<li>苹果</li>
<li>荔枝</li>
<li>香蕉</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关闭</li>
</ol>
<h4>自定义列表</h4>
<dl>
<dt>这是自定义列表</dt>
<dd>中国</dd>
<dd>美国</dd>
<dd>俄罗斯</dd>
</dl>
(10)表单
表单 :表单标签form用来接受用户的输入信息,分为以下两个部分
表单域 :主要关注的是form标签所定义的区域及其相关功能
表单控件 :涵盖常见的输入字段及其相关组件(如选择框、文本框等),重点在于input标签的应用场景
form标签 表明了该程序如何将数据传递至指定页面的具体方式。详细信息需要在掌握相关技术之后才能呈现出来。
<form action="test.html">
...[form的内容]
</form>
此标签:此标签用于标识多种多样的输入控件。具体来说,通过指定其 type 属性来实现.
代码块标记:主操作按钮
复选框标记:复选框控制
文本块标记:编辑文本区域
文件选择器标记:文件选择对话框
图像块标记:插入图片位置
密码字段标记:密码输入框
单选块标记:单选选项控制
提交按钮标记:提交操作入口
另外input标签还有其他属性
指定input标签的名称;若要实现单选按钮各项互斥,则需确保各选项拥有相同的name属性。
... 表示该元素所具有的预设值。
表示该元素初始状态为已选中。
指定输入字段的最大字符数量。
示例如下
<!--文本框-->
文本框:<input type="text">
<!--密码框-->
<br>
<br>
密码框:<input type="password">
<!--单选框-->
<br>
<br>
单选框:<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<!--复选框-->
<br>
<br>
复选框:<input type="checkbox">苹果 <input type="checkbox">香蕉 <input type="checkbox">荔枝
<!--按钮-->
<br>
<br>
按钮:<input type="button" value="这是按钮" onclick="alert('通过js显示消息')">
<!--提交-->
<br>
<br>
提交:<input type="submit" value="提交按钮需要搭配form使用">
<!--文件选择-->
<br>
<br>
选择文件:<input type="file">
③:label标签
label标签 :在单选或多选场景下,某些选择框设计过于紧凑可能导致用户难以精准点击选项。因此,通过将label标签与input标签结合使用,在用户点击选项文字时实现对选项的选择功能。
<input id="male" type="radio" name="sex" checked="checked"> <label for="male">男</label>
<br>
<input id="female" type="radio" name="sex"> <label for="female">女</label>
④:select标签
select标签 :表示下拉菜单,每一个选项都是一个optional标签
<select>
<option>北京</option>
<option>深圳</option>
<option selected="selected">上海</option> <!--selected表示默认选中-->
<option>南京</option>
<option>广州</option>
</select>
⑤:textarea标签
该textarea标签用于支持多行文本输入的功能,在常见的网站留言板系统中普遍采用了这种方法。其中rows和cols属性分别指定文本框所拥有的行数和列数
<textarea cols="30" rows="10"></textarea>
div和span:div 和 span 是没有语义的,是我们网页布局主要的量两个盒子
div 是一个基本类型的流输出元素 容器,在不依赖于CSS技术的情况下不会影响其显示的内容或布局安排
**span元素作为短语内容的主要容器,在设计时没有额外的功能
使用场景如下
div 元素在语义上象征性地不对应于任何特定内容类型。
div 标签可被用于对内容进行组织。
div 标签可被用于标识区分不同语言的内容段落,并利用 lang 属性来实现这一点。
div 标签应在不存在其他适用语义标记的情况下被采用。
span 标签可被用于归集具有相同属性或目标样式效果的所有元素。
span 标签应在不存在其他适用的语义标记的情况下被采用。
总之
div标签是用来布局的;然而现在仅限于一段落内仅能放置一个div元素。
div类型的元素必须完整书写其起始与结束标记。
span元素同样用于布局排版;在一个段落内可放置多个这样的元素。
span类型的标记也必须完整无误地进行书写。
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
<span>兔总裁</span>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
<span>阿叶君</span>
<span>阿叶君</span>
</div>
三:简单案例
(1)个人简历展示
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历展示</title>
</head>
<body>
<h1>姓名:王多鱼</h1>
<img src="./dog.png" width="280">
<!--基本信息-->
<div>
<h2>基本信息</h2>
<p><span>求职意向:</span>Java开发工程师</p>
<p><span>联系电话:</span>×××-××××-××××</p>
<p><span>邮箱地址:</span>wangduoyu@163.com</p>
<p><a href="https://www.github.com">我的github</a></p>
<p><a href="">我的博客</a></p>
</div>
<!--教育背景-->
<div>
<h2>教育背景</h2>
<ul>
<li>1990-1996:清华大学附属幼儿园</li>
<li>1996-2002:清华大学附属小学</li>
<li>2002-2008:清华大学附属中学</li>
<li>2008-2012:清华大学计算机科学与技术(本科)</li>
<li>2012-2015:清华大学计算机科学与技术(硕士)</li>
</ul>
</div>
<!--专业技能-->
<div>
<h2>专业技能</h2>
<ul>
<li>熟练掌握Java基础, Java WEB基础,具备面向对象思想;</li>
<li>熟练掌握HTML/XHTML、 CSS、JavaScript、 AJAX、JSON
等Web页面技术</li>
<li>熟练使用MYSQL数据库,熟练使用SQL</li>
<li>熟悉Tomcat服务器,熟悉Linux操作系统</li>
<li>做事认真细心,责任心和服务意识强,积极诚恳</li>
<li>具有团队精神 ,可以很好的与团队沟通 ,有学习热情 。</li>
</ul>
</div>
<!--本人项目-->
<div>
<h2>本人项目</h2>
<ol>
<li>
<h3>大型购物商城系统</h3>
<p><b>开发时间:</b>2016年9月-2017年5月</p>
<p><b>特色功能:</b>
<ul>
<li>非常牛逼</li>
<li>非常牛逼</li>
<li>非常牛逼</li>
</ul>
</p>
<p><b>关键技术:</b>
<ul>
<li>保密保密</li>
<li>保密保密</li>
<li>保密保密</li>
</ul>
</li>
<li>
<h3>在线学习助手</h3>
<p><b>开发时间:</b>2017年9月-2018年3月</p>
<p><b>特色功能:</b>
<ul>
<li>非常牛逼</li>
<li>非常牛逼</li>
<li>非常牛逼</li>
</ul>
</p>
<p><b>关键技术:</b>
<ul>
<li>保密保密</li>
<li>保密保密</li>
<li>保密保密</li>
</ul>
</li>
</ol>
</div>
<!--个人评价-->
<div>
<h2>个人评价</h2>
<p>本人性格开朗、稳重、有活力,待人热情、真诚。工作认真负责,积极主动,能吃苦耐劳。自信心强。思想活跃。<br>
有较强的组织能力、实践动手能力和团队协作精神,能迅速的适应各种环境,并融于其中。</p>
</div>
</body>
</html>
(2)信息收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息收集</title>
</head>
<body>
<h2>请填写你的信息</h2>
<table>
<tr>
<td><b>姓名:</b></td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td><b>性别:</b></td>
<td>
<input type="radio" id="male" name="sex"> <label for="male"><img src="男.png">男</label>
<input type="radio" id="female" name="sex"> <label for="female"><img src="女.png">女</label>
</td>
</tr>
<tr>
<td><b>出生日期:</b></td>
<td>
<select>
<option>---请选择年份---</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<select>
<option>---请选择月份---</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
<tr>
<td><b>毕业院校:</b></td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td><b>应聘岗位</b></td>
<td>
<input type="checkbox" id="frontend"><label for="frontend">前端开发</label>
<input type="checkbox" id="backend"><label for="backend">后端开发</label>
<input type="checkbox" id="test"><label for="test">测试开发</label>
<input type="checkbox" id="develeop"><label for="develeop">运维开发</label>
</td>
</tr>
<tr>
<td><b>掌握技能</b></td>
<td>
<textarea cols="50" rows="15"></textarea>
</td>
</tr>
<tr>
<td><b>项目经历</b></td>
<td>
<textarea cols="50" rows="15"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="notice"><label for="notice">我已经详细阅读招聘细则</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">查看我的状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请您确认</h3>
<ul>
<li>以上信息真实有效</li>
<li>可以尽早到公司实习</li>
<li>服从公司一切安排</li>
<li>自愿加班</li>
</ul>
</td>
</tr>
<tr>
<td><b>点击提交信息</b></td>
<td>
<input type="submit" value="确认提交" width="200" height="200">
</td>
</tr>
</table>
</body>
</html>
全部评论 (0 )
© 2024 技术社区 .All Rights Reserved.