HTML基础入门(一)

目录

一、web网页

web网页的基础知识

web标准

二、HTML的基本结构

HTML的常用标签

1、文本标签

2、 文本样式标签

3、文本格式标签

4、语义标签

 5、换行标签 

6、特殊字符

 三、图像标签

1、常见的图片形式

2、图片标签形式

四、路径问题

1、绝对路径

2、相对路径


一、web网页

web网页的基础知识

1、网页是构成网站的基本元素,是一个可以用来承载可视化内容的容器。

2、网页的组成要素,包括文字、图像、超链接、视频、音频、动画片、程序、表格、交互式表单等。

3、网页有静态网页和动态网页两种形式。

静态网页是内容和风格保持不变,是不可交互的网页,其特点是访问速度快,但更新较为麻烦,多用于展示型网站。

动态网页是以数据库技术为基础,可以交互的网页,其内容会随着用户的点击内容而发生变化,例如用户登录、输入密码等。

web标准

是一系列标准的集合。

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

                   结构标准:html就是用来制作网页的。

                   表现标准: css就是对网页进行美化的。

                   行为标准: JS就是让网页动起来,具有生命力的。

以及web标准的优点:代码的效率高,易于维护,可访问性强,设备兼容性强。

二、HTML的基本结构

软件展示:Visual Studio Code

标签定义说明
<head></head>头部标签是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title></title>文档的标题元素可定义文档的标题。
<body></body>文档的主要内容

定义文档的主体、包含文档的所有内容(比如文本、超链接、图像、表格和列表等。)

HTML的常用标签

1、文本标签

标题标签:h1-h6,字体从大到小,并且会自动加粗,可以自动换行

<h1>zhou</h1>
<h2>zhou</h2>
<h3>zhou</h3>
<h4>zhou</h4>
<h5>zhou</h5>
<h6>zhou</h6>

 段落标签:<p></p>会自动换行

<p>zhou</p>

 <span></span>不可自动换行

<span>zhou</span>

 水平线标签,可更改颜色、宽度以及大小

<hr color="green" width="500" size="20">

 居中标签

<center>zhou</center>

2、 文本样式标签

可改变文字的字体和颜色以及文字的大小

 <font face='隶书' color='green' size='20'>zhou</font>

3、文本格式标签

字体加粗、斜体、删除线、下划线

    <b>zhou字体加粗标签</b>
    <strong>zhou</strong>

    <i>zhou斜体</i>
    <em>zhou</em>

    <s>zhou删除线</s>
    <del>zhou</del>

    <u>zhou下划线</u>
    <ins>zhou</ins>

4、语义标签

 高亮显示,标识出重要部分

zh<mark>ou</mark>高亮

引用标签

zhou 
 <cite>---zhou</cite>

 5、换行标签 

zhouzhou<br />zhouzhou

6、特殊字符

上标与下标

CO<sub>2</sub>
X<sup>2</sup>

 版权符号、注册商标、摄氏度、正负号、除号

<p>
&copy;&reg;&deg;&plusmn;&divide;
</p>

 三、图像标签

1、常见的图片形式

GIF:可以支持动画形式,采用无损压缩技术,对图片的质量没有较大的耗损,支持透明处理。通常用来做Logo、色彩相较单一的图像。

PNG:特点是体积小,支持透明且色彩过渡较为平滑,但不支持动画形式。

JPG(JPEG):支持的颜色较多(超过256种),但图片的体积较大,采用的是有损压缩技术。

2、图片标签形式

src”后需要写出图片的地址,“vspace”和“hspace”体现的是图片与页面边框的垂直或水平边距。

四、路径问题

1、绝对路径

         从盘符开始,相较于完整的网络路径

2、相对路径

         以当前文件夹为基础开始的路径,通过与当前文件夹层级的关系来描述文件的位置。

         当图像与html的文件所处一个文件夹,则直接输入图像的名字。

         若文件位于html的上一级,则需输入“. /”。

         若图片位于html文件的商量个层级,则需要输入“../”。

         若图片位于html文件的下一层级,则需要用“/”来隔开各个文件夹的名字。

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单易懂的HTML基础入门教程: 1. HTML是什么? HTML全称为“Hypertext Markup Language”,即“超文本标记语言”。它是一种用于创建网页的标准标记语言,通过HTML标签来描述网页的各种元素。 2. HTML的基本结构 一个HTML文档通常由三部分组成: - DOCTYPE声明,用于告诉浏览器这是一个HTML文档。 - HTML标签,用于表示整个HTML文档的开始和结束。 - Head和Body标签,分别用于表示文档的头部和主体内容。 以下是一个基本的HTML文档结构: ``` <!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> 页面内容 </body> </html> ``` 3. HTML标签 HTML标签用于描述网页中的各种元素,如文本、图片、链接、表格等等。标签通常由一个开始标签和一个结束标签组成,中间包含元素内容。例如,段落标签p用于表示一个段落: ``` <p>这是一个段落。</p> ``` 4. HTML属性 HTML标签可以包含属性,属性用于控制元素的行为和样式。属性通常由名称和值组成,中间用“=”连接。例如,图片标签img可以包含src属性指定图片的路径: ``` <img src="image.jpg"> ``` 5. HTML链接 HTML链接用于在不同页面之间创建链接。链接通常由a标签表示,href属性用于指定链接的目标地址。例如,创建一个跳转到百度的链接: ``` <a href="http://www.baidu.com">百度</a> ``` 6. HTML列表 HTML列表用于表示一组有序或无序的项。有序列表使用ol标签,无序列表使用ul标签,列表项使用li标签表示。例如,创建一个无序列表: ``` <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> ``` 以上就是HTML基础入门教程的基本内容,希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值