HTML介绍

目录

HTML代码特点

注释标签

标题标签

段落标签

换行标签:br

格式化标签

图片标签:img

超链接标签:a

表格标签

列表标签

input标签

 无语义标签


HTML代码特点

HTML介绍_第1张图片

通过这段代码来研究一下HTML代码的特点:

1.html代码是通过标签来组织的.

形如 用尖括号组织,成对出现的这个东西叫做:标签"(tag),也可以叫做"元素" (element).

2.一个标签通常是成对出现的.

开始标签 结束标签,这两个标签之间是标签的内容.

3.标签是可以嵌套的.

一个标签的内容可以是其他一个或者多个标签,此时这些标签就构成了一个"树形结构"

4.可以在开始标签中,给标签赋予属性(Attribute).

属性相当于是键值对,可以有一个或者多个.


html 是一个html文件最顶层的标签,树根节点.

head 存放了这个页面的一些属性.

body 存放了这个页面包含哪些内容.

快速生成一个基本页面:输入!,按下tab.

HTML介绍_第2张图片

此时我们只需要编辑body的内容即可. 


注释标签

HTML介绍_第3张图片

注释的内容不会在页面中显示.

HTML介绍_第4张图片

但是如果右键查看网页源代码,是可以看到注释的.

HTML介绍_第5张图片

vscode里,使用ctrl+/ 可以快速注释代码. 


标题标签

h1-h6

HTML介绍_第6张图片

HTML介绍_第7张图片

每个标签内容都是独占一行的,这个独占一行是和代码的编写无关的!

在html里标签是否换行,和代码的编写无关,而是和标签自身有关(有点标签独占一行,有的标签不独占),在html源代码中写的换行会被省略,写的空格,多个空格也会被视为一个.


段落标签

P标签

lorem的作用是自动生成一段随机的文本.帮助我们调试显示效果.

HTML介绍_第8张图片

HTML介绍_第9张图片

 每个段落之间,不光是要换行,还有一个明显的段落间距.


换行标签:br

HTML介绍_第10张图片

HTML介绍_第11张图片


 格式化标签

变粗,倾斜,删除线,下划线

HTML介绍_第12张图片

这些标签都是不独占一行的.


图片标签:img

img有一个核心属性:src(必填项)

src描述了该图片的路径(路径可以是一个本地的绝对路径,,也可以是一个相对路径,还可以是网络路径 ).

绝对路径

相对路径

一定要明确当前的工作目录是哪个,html的工作目录就是该html文件所在目录.

HTML介绍_第13张图片

./可以省略. 

网络路径:直接写个网址.

 img别的属性:在图片挂了的时候,就会显示alt对应的文本.

title属性:鼠标悬停在图片上,会给出一个提示.

width/height:描述图的尺寸,宽度和高度可以同时设置,也可以只设置一个,如果只设置一个, 另一个会等比例缩放.

HTML介绍_第14张图片


超链接标签:a

"链接" link(快捷方式)

"超" 链接跳转的页面,可以是在当前网站之外的.

还有一个属性target,一般是写作 target="_blank" 这样就可以打开一个新标签页而不会替换原有页面.

HTML介绍_第15张图片

其中的URL也可以替换成IP地址.


表格标签

 table 表示整个表格

tr 表示一行

td 表示一个单元格

th 表示表头中的一个单元格

HTML介绍_第16张图片

HTML介绍_第17张图片

th标签会自动加粗.


列表标签

有序列表 ol (ordered list)

无序列表 ul (unordered list)

列表项 li (list item)

HTML介绍_第18张图片

HTML介绍_第19张图片


input标签

input有很多标签,能够表现成各种用户用来输入的组件.

1.单行文本行

 

2.专门输入密码的单行文本框 

 

3. 单选框

HTML介绍_第20张图片

 对于单选框,需要加个name属性,name属性相同的单选框,值之间是互斥的.

checked则是默认选择哪一个.

4.复选框

HTML介绍_第21张图片

 

 也可以使用checked属性来选择默认.

5.按钮

 

点击按钮之后要干什么,需要通过js来配合.

6.提交按钮(搭配form标签使用)

 

外表和button差不多,会触发form标签和服务器交互.

7.文件选择框

 

 


select下拉菜单

 HTML介绍_第22张图片

 HTML介绍_第23张图片

 texttarea多行编辑框

HTML介绍_第24张图片 


 无语义标签

没有特定含义,可以使用在任何场景.

div  默认是独占一行  块级元素

span  默认是不独占一行  行内元素

 

你可能感兴趣的:(Java,html,javascript,servlet)