栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Java系列技术之HTML基础(从入门开始)

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Java系列技术之HTML基础(从入门开始)

Java系列技术之HTML基础(从入门开始)

从这里开始,我便开始记录每天重新学习巩固HTML语言的过程,这不仅仅是为了提高自己的熟练度,更是为了让自己的博客一步一步的见证我走向前端全栈工程师这条路,感谢大家支持!


文章目录
  • Java系列技术之HTML基础(从入门开始)
    • 一、前言
    • 二、HTML基础语法及格式
    • 三、HTML常用标签
      • 1. 标题标签
      • 2. 段落标签
      • 3. 换行标签
      • 4. 字体加粗标签(了解即可,后续需结合CSS实现)
      • 5. 字体斜体标签(了解即可,后续需结合CSS实现)
      • 6. 上标/下标标签
      • 7. 线标签
    • 四、HTML中常用特殊字符
    • 五、HTML中标签类型
  • 总结


一、前言
什么是HTML语言?为什么要使用到HTML语言?该如何使用HTML语言呢?

其实在人类不断发展的社会历程中,Web技术的发展也逐渐从1.0迭代到了4.0,但是目前来看Web4.0的发展还没有达到真正炉火纯青的地步,这或许是由于技术瓶颈,也或许是因为人类目前还没有真正清楚Web4.0可以带来什么!!!(期待2030年的实现)

web历史版本表现方式
Web_1.0纯静态页面(类似海报,不可交互)
Web_2.0动态页面(实现可交互网页的时代)
Web_3.0与其他网站交互,实现第三方信息平台对多家网站信息整合
Web_4.0无所不在的网

那正处于Web3.0时代的我们,为了在web前端开发方面有所理解,那就少不了要去了解**【HTML】**

1. 那什么是HTML语言呢?
HTML:称为超文本标记语言,是一种标记语言;它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

2. 为什么要使用到HTML语言?
Web前端技术开发是少不了HTML文本编写的,而HTML文本就是由HTML命令组成的描述性文本,它是构成Web页面的骨架,通俗点说:HTML就是Web的骨架,只有它的存在,才能足以支撑整个Web项目的开发 ---------------------------

3. 该如何使用HTML语言呢?
使用HTML语言就要先学会与编写HTML文本相关的标签元素,学会编辑HTML文本才能达到使用HTML语言的效果,这里用到的软件是国产的Hbuilder,可点击下载安装

安装完成之后,准备工作就已就绪了,就接下来就开始正式介绍HTML基础知识


二、HTML基础语法及格式

下列代码就是HTML的基本语法结构和编写格式,同时还总结的相对应的注释说明(注释部分的内容是不会被呈现在网页中的)
网页区域:
头部区域:
内容区域:

     

    
          网页的标题
               
               
               
    

    
          web网页主体内容      
    	


三、HTML常用标签

首先了解【块级标签/元素】和【行内标签/元素】的区别:

①【块级标签/元素】:标签/元素会自动换行,简单理解就是,不管在一行之中写多少字符,其标签/元素都要占据一行的区域;

②【行内标签/元素】:标签/元素不会自动换行,简单理解就是,在一行之中写多少字符,其标签/元素就要占据多少字符的区域;**

1. 标题标签

六个等级:h1——h6(从一级标签到六级标签),如代码所示:

    
    
	

一碗邹❤️一级标签

一碗邹❤️二级标签

一碗邹❤️三级标签

一碗邹❤️四级标签

一碗邹❤️五级标签
一碗邹❤️六级标签
2. 段落标签

p为段落标签,会自动换行,但是段落内不进行换行,换行后行与行之间的间隙较大,如代码所示:

    
    
	

《梦华录》主演:刘亦菲、陈晓、柳岩、林允儿、管云鹏等

"东京,真是富贵迷人眼,深情不可许"

3. 换行标签

br为换行标签,属于单标签,换行后行与行之间的间隙较小,如代码所示:

    
    
	《梦华录》主演:刘亦菲、陈晓、柳岩、林允儿、管云鹏等
	
"东京,真是富贵迷人眼,深情不可许"

段落标签和换行标签的效果对比图:

4. 字体加粗标签(了解即可,后续需结合CSS实现)

字体加粗标签有两个:b标签和strong标签,均属于行内标签,其加粗效果是一致的,如代码所示:

	

	

落霞与孤鹜齐飞,秋水共长天一色

落霞与孤鹜齐飞,秋水共长天一色

落霞与孤鹜齐飞,秋水共长天一色

效果对比图:

5. 字体斜体标签(了解即可,后续需结合CSS实现)

字体加粗标签有三个:i标签、em标签和cite标签,均属于行内标签,其斜体效果是一致的,如代码所示:

	
	
	

落霞与孤鹜齐飞,秋水共长天一色

落霞与孤鹜齐飞,秋水共长天一色

落霞与孤鹜齐飞,秋水共长天一色

落霞与孤鹜齐飞,秋水共长天一色

效果对比图:

6. 上标/下标标签

字符的呈现,有时候是需要表达出上标和下标的,所以在标签的定义中,分别利用了sub标签和sup标签,来分别表示下标标签和上标标签,它们均属于行内标签,如代码所示:

	
	
	

氢离子

H+

二氧化碳

co2

效果对比图:

7. 线标签

所谓的“线标签”,是以我个人的理解方式总结的一个标签名称,主要的为了方便统计和排版,其主要包括:中划线、下划线和分割线。其中中划线和下划线它们均属于行内标签,但是分割线属于块级标签,如代码所示:

	
	
	

YIWANZOU

YIWANZOU

YIWANZOU

YIWANZOU

YIWANZOU


效果对比图:


四、HTML中常用特殊字符
描述实体名称
空格( ) 
小于号( < )<
大于号( > )>
和号( & )&
引号( " )"
撇号( ’ )'
分( ¢ )¢
镑( £ )£
日圆( ¥ )¥
欧元( € )€
小节( € )§
版权( € )©
注册商标( € )®
商标( € )™
乘号( € )×
除号( € )÷

其具体详细的特殊字符大全 请点击此处查看;
特殊字符在HTML文本中的编写方式如代码所示:

	

特殊符号:( 属于行内元素 )

空格(&nbsp;):----------------(   )
小于号(&lt;):----------------------( < )
大于号(&gt;):-----------------( ">> )
和号(&amp;):-----------------( & )
引号(&quot;):-----------------( " )
撇号(&apos;):-----------------( ' )
分(&cent;):--------------------( ¢ )
镑(&pound;):-----------------( £ )
日圆(&yen;):------------------( ¥ )
欧元(&euro;):-----------------( € )
小节(&sect;):------------------( § )
版权(&copy;):-----------------( © )
注册商标(&reg;):--------------( ® )
商标(&trade;):-----------------( ™ )
乘号(&times;):-----------------( × )
除号(&divide;):----------------( ÷ )

五、HTML中标签类型

标签类型主要分为:一般标签和自闭合标签,一般标签主要指的是双标签,自闭合标签主要指的是单标签。

以下所列举的一般标签仅供参考:

	
	

一般标签:

<head">></head">>,<div">></div">>,<h1">></h1">>,<b">></b">>等

以下所列举的自闭合标签仅供参考:

	

自闭合标签:

<meta/">>:定义页面的说明信息,供搜索引擎查看
<link/">>:用于链接外部CSS文件或者脚本文件
<base/">>:定义页面所有链接的基础定位
<br/">>:用于换行
<hr/">>:为水平线
<input/">>:用于定义表单元素
<img/">>:为图像标签

总结

这是我今天学习到的一些内容,在此分享一下,HTML文本的编写。一定要遵从它自己的格式和规则,我现在所学习的HTML内容只是其中一部分,后续会持续完善和更新。感谢关注和支持,我们一起成长!

暑期编程PK赛 得CSDN机械键盘等精美礼品!
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1016354.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号