1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 零基础学网页设计之HTML基础教程

零基础学网页设计之HTML基础教程

时间:2022-10-19 13:02:59

相关推荐

零基础学网页设计之HTML基础教程

什么是 HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <html>

HTML 标签通常是成对出现的,比如 <b> 和 </b>

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html><head><title> 这是我的第一个页面</title></head><body><a href="">点我进入百度</a></body></html>

<html> 与 </html>之间的文本描述网页

<head>与</head>之间是描述网页头部文件,不可见,浏览器读取

<body> 与 </body> 之间的文本是可见的页面内容

<a>与</a>超链接标签,实现页面之间的跳转。

代码写好之后保存文件扩展名为html,如:index.html

使用浏览器打开,效果如图

HTML 标题

HTML 标题(Heading)是通过 <h1> 到 <h6> 等标签进行定义的。其中h后面的数字越大,字体就越小。

<html><head><title> 这是我的第一个页面</title></head><body><h1>这是我的标题</h1><h2>这是我的标题</h2><h3>这是我的标题</h3><h4>这是我的标题</h4><h5>这是我的标题</h5><h6>这是我的标题</h6></body></html>

效果如图

HTML 段落

HTML 段落是通过 <p> 标签进行定义的

<html><head><title> 这是我的第一个页面</title></head><body><p>我是第一段,会自动换行</p><p>我是第二段,会自动换行</p><p>我是第三段,会自动换行</p></body></html>

效果图

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<html><head><title> 这是我的第一个页面</title></head><body><a href='/'>淘宝</a></body></html>

其中<a>标签中href属性是指定要跳转到的网页链接

效果如下

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<html><head><title> 这是我的第一个页面</title></head><body><img src="/it/u=2168645659,3174029352&fm=193&f=GIF" width="104" height="142" /></body></html>

<img>是单标签,不能写成<img></img>这种格式,正确的格式是<img />

src属性是图片的路径或者链接,图片可以来自本地图片,也可以来自网络图片。

width 设置图片的宽。height设置图片的高

效果图如下

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。