HTML基本内容,表格表单,基本查询

一. 什么是HTML?

英文:Hyper Text Martup Language (超文本标记语言)

注:不是编程语言,是标记语言,用来标记的,标记语言是不做逻辑处理的(?)

作用:承载了整个互联网的文本标记内容,告诉浏览器如何构造网页。

# 这一整个便是HTML Element——超文本标记语言元素

# 中间的Content即为文本内容

# 这里前后各有一个标签(Tag),

这种形式即为Tag

同时在HTML语言里面也有非常多的Tag,如下:

 

那么HTML文件又是由什么组成,自身又是一个什么样的格式和内容呢?

 

 # 首先上下分别为起始标签和结束标签

# 中间head部分,通常放的是一些不被直接渲染到网页上的内容,同时是浏览器需要的信息,比如标题,说明,关键字,图标等

# body的内容则是要渲染给用户的内容,标题,图片等 

举例如下,我们新建一个HTML文件,逐步实现渲染展现:

HTML基本内容,表格表单,基本查询_第1张图片

# 首先在VS CODE中创建一个HTML文件,并写入title,将该文件放到浏览器中打开:

 

# 可以看到,相应网页的Title就是我们在文本中所写的title

HTML基本内容,表格表单,基本查询_第2张图片

一. Title

# 再在脚本中加入body部分,加入些标题如图(windows——>vscode快捷键复制粘贴——>shift+alt+方向键)

HTML基本内容,表格表单,基本查询_第3张图片

# 效果如上图所示

HTML基本内容,表格表单,基本查询_第4张图片 

# 加入图中绿色部分,为代码注释,中间为注释内容(ctrl+/,注释快捷键)

再在body中加入相应的文本内容:

HTML基本内容,表格表单,基本查询_第5张图片 

HTML基本内容,表格表单,基本查询_第6张图片

# 效果如图

但是我们可以注意到,无论是标题,还是文本,在网页上显示的时候,段与段之间都是有间隔的,而且是自然生成的间隔。

HTML基本内容,表格表单,基本查询_第7张图片

二. 块级元素和内联元素 

 # 打开网页检查器,将鼠标放到右侧HTML脚本中,在左侧web上会显示对应的内容,蓝色为显示内容,橘色为间隔框。也就是说以目前方式写出的脚本都是这样的展现形式,这样就提到了两种HTML Element Levels

 重点介绍

HTML基本内容,表格表单,基本查询_第8张图片 # 我们经常用看到使用,但是它很少单独出现,都是以上述的形式出现,其中标识的部分为attribute,即属性。

举例如下:

HTML基本内容,表格表单,基本查询_第9张图片 # 通过这样的形式,我们相当于给movie加了一个超链接,在网页上我们可以看到:

HTML基本内容,表格表单,基本查询_第10张图片

# movie!!!变成了蓝色可点击的对象,点击后就会跳转到Google搜索引擎的界面

# 同时我们也不希望用户点击后,进入新的网址却关闭掉我们原来自己的网页那么做如下修改:

HTML基本内容,表格表单,基本查询_第11张图片

# 这样的话就会自动开启新的窗口来访问超级链接

 三. Lists

上面分别说了标题title,段落paragraphs,接下来说lists。操作如下:

我们在

      之间加入相应的文字:

      HTML基本内容,表格表单,基本查询_第12张图片

      HTML基本内容,表格表单,基本查询_第13张图片 

      # 效果便如图所示,在网页呈现出无序列表形式

      如果使用

        便是有序的:

         

        HTML基本内容,表格表单,基本查询_第14张图片 

        四. TABLE 

        HTML基本内容,表格表单,基本查询_第15张图片

        中包裹字段部分以及内容部分,中间再分别使用
        进行填充内容

        效果如下图:

        五. FORMS(表单) 

         HTML基本内容,表格表单,基本查询_第16张图片

        中包裹

        你可能感兴趣的:(自学系列,HTML,html,servlet,前端,开发语言,学习)