文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

java中的HTML知识点有哪些

2024-04-02 19:55

关注

这篇文章主要介绍“java中的HTML知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“java中的HTML知识点有哪些”文章能帮助大家解决问题。

  1 概念

  1.1什么是HTML

  全称:HyperText Markup Language

  超文本标记语言,标准通用标记语言下的一个应用。

  “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

  超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

  通俗的说就是用来写网页的。

  为什么可以上网?

  浏览器将服务器上的内容下载到本地,然后渲染成网页,这样就看到了网页。

  2 HTML的基本架构

  2.1快速入门,编写第一个HTML网页

  [1]创建一个TXT文件

  [2]将txt文件的后缀修改为htm或者html

  关于HTM和HTML有区别吗?

  没有任何区别,早先(不知道有多早)的操作系统只认识3位后缀名。所以为了兼容早先的操作系统,才有了htm这样的后缀。实际的应用这两种没有任何区别。

  [3]打开文件

  ①双击打开,就是用默认的浏览器打开”浏览”。浏览就是查看网页的效果。

  ②以编辑的形式打开。

  右键 –》

  选择任何一个开发工具都可以,我们选择记事本(为了装X)。

  [4]编辑和测试

  测试的浏览器选择:

  当然还有更多的浏览器。

  我们选择使用谷歌浏览器。

  开始编辑HTML文件

  在其中写一句话“我的HTML”

  刷新网页:

  其实HTML有专门的结构。

  Tips:html是不区分大小写的。但是尽量小写。

  标签:参照XML的标签理解

  结构:

  结构展示:

  3 HTML标签的深度理解

  Tips:HTML是纯文本文件。所有的程序文件都是纯文本文件。

  以文本来修饰文本。

  关键词“语意”。

  标签实际上是表达一种语意。

  比如:

  添加CSS修改样式:

  HTML标签只是表示一种语意。并不是规定标签中的内容应该展示成什么样子?展示的样子基本上都是由CSS控制。

  4 常用标签

  4.1结构标签

  [1]文档申明:

  HTML5

  <!DOCTYPE html>

  HTML 4.01 Transitional

  该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "">

  [2]HTML标签

  HTML标签是HTML文档的根节点。

  [3]HEAD标签

  表示HTML文档的头部,一般都是用来做一些文档的配置或者说明。

  比如title标签:title标签是用来表示文档的的。

  Meta

  置页面的内容类型

  <meta http-equiv="content-type" content="text/html;charset=utf-8">

  配置网页简介

  <meta name="deion" content="这里是我们的网页的简介......."/>

  网页的关键字

  <meta name="keywords" content="极客营,极客教育,QQ靓号,。。。。。。。"/>

  对CSS和JS的引用:

  [4]body

  所有要展示的内容全部编写在body标签中。

  4.2[插播]开发工具的选择

  (几乎已经绝迹,不好用有bug)

  HBuilder (好用,一个不错的选择)

  subline (好用,神器) 我们的选择

  webstorm(好用)

  将我们的HTML文件拖拽到开发工具中。

  4.3 常用的标签

  [1]标签

  表示在文档中添加一个。分为6级,分别是h2&hellip;h7。

  案例:

  特性: 默认黑体字。 默认自动换段落。独占一行。

  [2]P标签 表示段落。

  默认表现形式,就是换段。

  默认特征:自动换行换段,独占一行。

  [3]特殊的控制标签

  换行标签 br 自闭和标签

  HTML默认不认识换行符。

  必须使用换行符号表示换行。

  换行和换段的区别

  空格标签

  在HTML中依然不认识空格。

  无论写多少空格,浏览器只认识一个空格。

  解决办法就是使用

  双引号的表示形式 "

  因为双引号在网页中有特殊的意义,所以理论上不能直接编写, 要使用特殊的符号代替。

  Tips:在不产生歧义的情况下,直接编写也是没有问题的。

  尖角号的表示形式 > <

  尖角号在网页有特殊的意义,表示标签的开始和结束,所以不能直接编写。

  浏览器将<igeek>解释成一个标签了。但是不认识此标签,所以不展示。

  所以使用特殊符号代替尖角号:

  在没有歧义的情况下,一般也能解释运行。例如:

  版权符号 ?

  [4]分割线 hr

  其实就是一根线

  4.4[插播]属性

  HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

  属性总是以名称/值对的形式出现,比如:name="value"。

  属性总是在 HTML 元素的开始标签中规定。

  例如前面说过的meta标签:

  案例:

  其中的3个属性:

  Size : 表示线的厚度,使用数字表示像素。

  Color: 表示线的颜色,可以使用多种表现形式。

  Width: 表示线的长度,默认单位是像素。

  4.5 [插播]color的值的编写形式

  所有地方使用到color时都是一样的编写形式。

  用英文字母。 上面的例子中用的就是英文字母。

  使用16进制的数字表示。(推荐使用)

  例如:#FF0000

  其中有6个数字,每两个数字为一组,表示一种颜色,总共表示3中颜色,(RGB)。

  每一种颜色的范围是 00&mdash;&mdash;FF

  所有颜色最大为白色,所有颜色最小为黑色。

  使用函数,这种形式往往在CSS中使用

  rgb(255,0,0) 3个参数表示rgb颜色的占比。 范围是0&mdash;&mdash;255。

  rgba(255,0,0,.2) 4个参数,前三个和上面的一样。第四个参数表示透明度,.2就是0.2

  4.6 Font标签

  注意:此标签已经属于被废弃的标签。主要是用来控制字体的。但是字体其实应该使用CSS控制,所以此标签被废弃了。我们学习纯粹为了今天的作业。

  <font size=”” face=”” color=””>极客营</font>

  三个属性:

  Size : 表示字体的大小。 范围是 1&mdash;&mdash;7。 默认是3 ,可以写具体的数组,也可以写 +2。

  Face: 字体,编写字体名称。

  Color: 表示字体的颜色。

  案例:

  4.7常用标签中的超链接和图片

  [1]图片标签

  <img src=> 可以显示一张图片。

  S1:Src:指向图片的位置(具体的物理位置,url地址。) 物理地址可以使用绝对路径,也可以使用相对路径。

  案例:

  通过url显示网络上的图片:

  S2 : 调整图片大小的属性

  Width: 设置图片的宽度。

  Height:设置图片的高度。

  案例:

  让图片不变形:让尺寸按照比例变化。

  S3 : 图片提示的属性

  Alt:当图片显示失败的时候的提示内容。

  Title:当鼠标悬浮在图片上的时候的提示内容。

  案例:alt属性

  案例:title属性

  S4: 图片的对其方式的属性 align 默认是 bottom。

  这里的对其方式其实是说图片相对于同一行的其他内容的对其方式。

  案例: left

  案例:right

  案例:center

  案例:top

  案例:bottom

  [2]超链接标签

  <a href=> 超链接内容 </a>

  其中的href指向连接资源。一个完整的超链接必须有HREF属性。不然只是一个a标签而已。

  案例:

  超链接同样可以指向本地资源

  Target属性:主要是设置连接的内容显示在什么位置?

  默认是_self 显示在当前页面的位置。

  _blank :显示在一个空白的选项卡中。

  锚标记

  常见的案例:章节的跳转,回到顶部

  5 结构控制标签

  5.1列表

  5.1.1有序列表

  <ol>

  <li>条目</li>

  <li>条目</li>

  <li>条目</li>

  &hellip;&hellip;.

  </ol>

  Type属性:设置列表顺序的表示形式(1,A,a,i,I)

  Start属性:设置列表的开始位置。

  案例:

  5.1.2无序列表

  <ul>

  <li>条目</li>

  <li>条目</li>

  <li>条目</li>

  &hellip;&hellip;.

  </ul>

  无序列表和有序列表的唯一区别就是没有序号。

  案例:

  Type属性:设置条目前面的图标形式(circle,disc,square)

  5.1.3 列表的嵌套使用

  案例:

  5.2表格

  Table:表示一个表格

  Tr:表示一行

  Th:表示一个表头的单元格

  Td:表示一个普通的单元格

  编写一个三行三列的表格:

  编写方法就是逐行编写。每行编写固定的单元格即可。

  Th标签表示表头,默认会自动居中加粗。

  Table标签的属性:

  Border: 设置表格的边框, 默认是0。一旦设置了之后,表格外围的边框就是指定的数字,单元格的遍就是1.

  Width和height:指定表格的宽度和高度的,默认情况下,各行各列都是按需分配。

  Align:表格的对其方式 (left,right,center)。

  Cellspacing属性:设置单元格之间的距离。一般情况下都是0.

  称之为:间距

  Cellpadding属性:设置单元内容和边框之间的距离

  称之为:填充距。

  不规则表格

  需求:(三行三列)

  第一行两个单元格, 其余的都是三个单元格,第一行的第二个单元格跨两列。

  跨行表格:

  每一个td的属性:

  Width:可以通过设置一个单元格的宽度而设置整列的宽度

  Tips:单元格的宽度同样可以使用百分比设置。

  Align:设置单元格的水平对其方式

  Valign:设置单元格元素的垂直对其方式

  6 其他标签

  <b> 标签规定粗体文本。

  <strong> 标签规定重点文本。同样会让文本粗体。

  <i> 斜体文本。

  <u> 下划线。

  。。。

  以上标签基本上都可以使用CSS实现。

  7 案例(百度首页)

  <!DOCTYPE html>

  <html>

  <head>

  <title>百度一下,你就知道</title>

  <meta charset="utf-8">

  </head>

  <body>

  <table width="100%" height="550" border="0">

  <tr height="20">

  <td align="right">

  <a href=""><font color="#333333" face="黑体" size="2"><b>新闻</b></font></a>

  <a href=""><font color="#333333" face="黑体" size="2"><b>hao123</b></font></a>

  <a href=""><font color="#333333" face="黑体" size="2"><b>地图</b></font></a>

  <a href=""><font color="#333333" face="黑体" size="2"><b>视频</b></font></a>

  <a href=""><font color="#333333" face="黑体" size="2"><b>贴吧</b></font></a>

  <a href=""><font color="#333333" face="黑体" size="2"><b>学术</b></font></a>

  <a href=""><font color="#333333" size="2">登录</font></a>

  <a href=""><font color="#333333" size="2">设置</font></a>

  </td>

  <td bgcolor="#3388FF" align="center" width="70">

  <font color="#ffffff" size="2" face="宋体">更多产品</font>

  </td>

  </tr>

  <tr><td colspan="2" align="center" height="130" valign="bottom">

  <img width="270" height="129" src=""/>

  </td></tr>

  <tr><td colspan="2" valign="top" align="center">

  <br/>

  <!-- <img src=""/> -->

  <div style="border-color:#999; padding: 0px; margin: 0px; height: 30px; width: 680px" >

  <input type="text" style="width: 550px; height: 30px; float: left" />

  <input type="button" value="百度一下" style=" border:1px solid #3385FF; background-color:#3385FF ; color:#ffffff; width: 100px; float: left; height: 35px;" />

  </div>

  </td></tr>

  <tr><td colspan="2" ></td></tr>

  <tr><td colspan="2" height="100" align="center">

  <img src=""/>

  <br/>

  <font color="#555555" size="2"><b>百度</b></font>

  </td></tr>

  <tr><td colspan="2" height="25" align="center">

  <a href=""><font color="#999999" size="2">把百度作为首页</font></a>

  <a href=""><font color="#999999" size="2">关于百度</font></a>

  <a href=""><font color="#999999" size="2">About Baidu</font></a>

  <a href=""><font color="#999999" size="2">百度推广</font></a>

  </td></tr>

  <tr><td colspan="2" align="center" height="25">

  <font color="#999999" size="2">?2018 百度</font>

  <a href=""><font color="#999999" size="2">使用百度前必读</font></a>

  <a href=""><font color="#999999" size="2">意见反馈</font></a>

  <font color="#999999" size="2">京ICP证030173号<img src=""></font>

  <a href=""><font color="#999999" size="2">京公网安备11000002000001号<img src=""/></font></a>

  </td></tr>

  </table>

  </body>

  </html>

关于“java中的HTML知识点有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯