扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“java中的HTML知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“java中的HTML知识点有哪些”文章能帮助大家解决问题。
成都创新互联公司成都网站建设按需求定制开发,是成都网站维护公司,为房屋鉴定提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站营销推广热线:028-86922220
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
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
"">
[2]HTML标签
HTML标签是HTML文档的根节点。
[3]HEAD标签
表示HTML文档的头部,一般都是用来做一些文档的配置或者说明。
比如title标签:title标签是用来表示文档的标题的。
Meta
置页面的内容类型
配置网页简介
网页的关键字
对CSS和JS的引用:
[4]body
所有要展示的内容全部编写在body标签中。
4.2[插播]开发工具的选择
(几乎已经绝迹,不好用有bug)
HBuilder (好用,一个不错的选择)
subline (好用,神器) 我们的选择
webstorm(好用)
将我们的HTML文件拖拽到开发工具中。
4.3 常用的标签
[1]标题标签
表示在文档中添加一个标题。标题分为6级,分别是h2…h7。
案例:
特性: 默认黑体字。 默认自动换段落。独占一行。
[2]P标签 表示段落。
默认表现形式,就是换段。
默认特征:自动换行换段,独占一行。
[3]特殊的控制标签
换行标签 br 自闭和标签
HTML默认不认识换行符。
必须使用换行符号表示换行。
换行和换段的区别
空格标签
在HTML中依然不认识空格。
无论写多少空格,浏览器只认识一个空格。
解决办法就是使用
双引号的表示形式 "
因为双引号在网页中有特殊的意义,所以理论上不能直接编写, 要使用特殊的符号代替。
Tips:在不产生歧义的情况下,直接编写也是没有问题的。
尖角号的表示形式 > <
尖角号在网页有特殊的意义,表示标签的开始和结束,所以不能直接编写。
浏览器将
所以使用特殊符号代替尖角号:
在没有歧义的情况下,一般也能解释运行。例如:
版权符号 ?
[4]分割线 hr
其实就是一根线
4.4[插播]属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
例如前面说过的meta标签:
案例:
其中的3个属性:
Size : 表示线的厚度,使用数字表示像素。
Color: 表示线的颜色,可以使用多种表现形式。
Width: 表示线的长度,默认单位是像素。
4.5 [插播]color的值的编写形式
所有地方使用到color时都是一样的编写形式。
用英文字母。 上面的例子中用的就是英文字母。
使用16进制的数字表示。(推荐使用)
例如:#FF0000
其中有6个数字,每两个数字为一组,表示一种颜色,总共表示3中颜色,(RGB)。
每一种颜色的范围是 00——FF
所有颜色最大为白色,所有颜色最小为黑色。
使用函数,这种形式往往在CSS中使用
rgb(255,0,0) 3个参数表示rgb颜色的占比。 范围是0——255。
rgba(255,0,0,.2) 4个参数,前三个和上面的一样。第四个参数表示透明度,.2就是0.2
4.6 Font标签
注意:此标签已经属于被废弃的标签。主要是用来控制字体的。但是字体其实应该使用CSS控制,所以此标签被废弃了。我们学习纯粹为了今天的作业。
极客营
三个属性:
Size : 表示字体的大小。 范围是 1——7。 默认是3 ,可以写具体的数组,也可以写 +2。
Face: 字体,编写字体名称。
Color: 表示字体的颜色。
案例:
4.7常用标签中的超链接和图片
[1]图片标签
可以显示一张图片。
S1:Src:指向图片的位置(具体的物理位置,url地址。) 物理地址可以使用绝对路径,也可以使用相对路径。
案例:
通过url显示网络上的图片:
S2 : 调整图片大小的属性
Width: 设置图片的宽度。
Height:设置图片的高度。
案例:
让图片不变形:让尺寸按照比例变化。
S3 : 图片提示的属性
Alt:当图片显示失败的时候的提示内容。
Title:当鼠标悬浮在图片上的时候的提示内容。
案例:alt属性
案例:title属性
S4: 图片的对其方式的属性 align 默认是 bottom。
这里的对其方式其实是说图片相对于同一行的其他内容的对其方式。
案例: left
案例:right
案例:center
案例:top
案例:bottom
[2]超链接标签
其中的href指向连接资源。一个完整的超链接必须有HREF属性。不然只是一个a标签而已。
案例:
超链接同样可以指向本地资源
Target属性:主要是设置连接的内容显示在什么位置?
默认是_self 显示在当前页面的位置。
_blank :显示在一个空白的选项卡中。
锚标记
常见的案例:章节的跳转,回到顶部
5 结构控制标签
5.1列表
5.1.1有序列表
…….
Type属性:设置列表顺序的表示形式(1,A,a,i,I)
Start属性:设置列表的开始位置。
案例:
5.1.2无序列表
…….
无序列表和有序列表的唯一区别就是没有序号。
案例:
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 其他标签
标签规定粗体文本。
标签规定重点文本。同样会让文本粗体。
斜体文本。
下划线。
。。。
以上标签基本上都可以使用CSS实现。
7 案例(百度首页)
更多产品 | |
百度 | |
?2018 百度 京ICP证030173号 |
关于“java中的HTML知识点有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流