菜鸟教程:零基础HTML入门

HTML入门

文章目录

  • 一、HTML是什么?
  • 二、入门实例
    • 1.新建html文档
    • 2.html常用标签
    • 三、属性
  • 总结


一、HTML是什么?

HTML全称:Hyper Text Markup Language
中文名:超文本标记语言
HTML是由W3C组织定义的语言标准,是用于描述页面机构的语言。

二、入门实例

1.新建html文档

如图:
菜鸟教程:零基础HTML入门_第1张图片

每一个html文件开头必须是这个标签,作用是告诉浏览器此文档为html文档。 :根元素在所有的html文件中这个元素级别最高 网页编码格式,一般为UTF-8 中间内容就是这个html文件的标题 html的内容

保存后在浏览器打开:
菜鸟教程:零基础HTML入门_第2张图片
这就是html在浏览器打开后的画面
标题部分:
在这里插入图片描述
显示结果:在这里插入图片描述
内容:
在这里插入图片描述
显示结果:
菜鸟教程:零基础HTML入门_第3张图片

html注释
注释写在代码中,主要是用于编程人员观看,能够方便检查代码以及标出重要内容.
注释内容在浏览器显示界面中不会出现
格式是小于号(<),感叹号(!)小于号和感叹号间无空格,接下来是两条短线(–),然后就是注释内容,最后又是两条短线(–)和大于号(>)。

如:

2.html常用标签

1.标题
菜鸟教程:零基础HTML入门_第4张图片
html文档中的内容标题使用h1~h6来书写,

...

标题字(最大)
...
标题字(最小) 一般按顺序从大到小依次使用

2.段落
在这里插入图片描述

中间是文本内容

3.超链接
在这里插入图片描述
标签定义超链接,用于从一张页面链接到另一张页面。
href是它最重要的属性,它表示链接的目标。
a标签中间所夹的内容就是链接在浏览器上所显示的样子

4.图像
在这里插入图片描述
标签定义图像,src属性指示图像地址

5.表格
代码示例:
菜鸟教程:零基础HTML入门_第5张图片
浏览器显示:
在这里插入图片描述
在html中

标签定义表格,标签定义行,
定义每一行被分割的单元格

6.列表
无序列表代码:
菜鸟教程:零基础HTML入门_第6张图片
浏览器显示:
菜鸟教程:零基础HTML入门_第7张图片
有序列表代码:
菜鸟教程:零基础HTML入门_第8张图片
浏览器显示:
菜鸟教程:零基础HTML入门_第9张图片

  • 标签定义无序列表
    1. 标签定义有序列表
    2. 标签定义列表项目

三、属性

html的属性:用来赋予标签意义和语境,主要作用是为了让浏览器理解网页,也是为了搜索引擎的优化。

全局属性:
id:元素的唯一名称,具有唯一性
title:元素的额外信息
class:元素的类名
style:元素的行类css样式

总结

HTML在前端工作中属于基础中的基础,想要掌握好html只有通过多多练习,代码只有多敲才能够记得住。

你可能感兴趣的:(html)