30天打造品牌特色电商网站 Day.7 HTML基础

HTML 是一份可以给浏览器读取的文件,副档名为.html,我们在网页上所看见的元件,基本上都是由 HTML 标签所生成,後续再由CSS 、JS去做美化编辑。今天要学习的内容,就是如何利用HTML的标签规则,写出一份浏览器能看得懂的文件,那我们就开始吧!

HTML的基本结构是由标签和内容所组成,标签使用的格式为下:
<标签名称> 文字内容或内层标签 </标签名称>

在HTML文件中,通常包含几个主要的标签:

<!DOCTYPE html>
<html>
<head>
  <title> 网站标题 </title>
</head>
<body>
  <h1> 网页内容 </h1>
</body>
</html>
  • 宣告
    <!DOCTYPE html> ,每份HTML都要先宣告其版本,注意宣告要写文件的第一行,让浏览器知道怎麽正确的读取展示你的文件。

  • < html >
    <html> 称为「根元素」,包住了所有网页上的内容,里面固定会有 <head>、<body> 标签。

  • < head >
    <head> 标签里面涵盖了网页重要资讯,称为「标头」,不要显示在页面上,但会关联到搜寻引擎及其他网路服务,像是网页标题、搜寻关键字、外部连结、css等。
    <head> 标签内的 <title></title> 就是控制网页标题的地方,这里可以修改你想被搜寻到的网页标题喔!

  • < body >
    <body> 涵盖的是使用者能直接在页面上看到的内容,也是网页的核心,包含文字、图片、影片、互动都会在这个区块里面。


除了主要的标签外,还有一些经常会使用到的基本标签,也跟大家简单的做介绍:

  • 标题
<h1>Title</h1> 

<h1> ~ <h6> 共分为六个标题等级,浏览器会依据你的标题等级来判断内容轻重, <h1> 为主标题,後面等级依次下降。

  • 段落
<p>文字</p>

<p> 标签包含文字段落,在呈现文字时我们最常用的标签形式。

  • 区域
<div class="box">
  <p>文字1</p>
  <p>文字2</p>
  <p>文字3</p>
</div>

<div> 标签常用作为容器来包裹其他标签,把文件整理出几个区块(block),方便後续做CSS、JS的排版和操作,<div> 本身不带任何标签语意。

  • 清单
    <ul> 为无顺序的清单,选项的顺序变动不会有影响
<ul>
<li>A选项</li>
<li>B选项</li>
<li>C选项</li>
</ul>

<ol> 为有顺序的清单,须按照先後做排列

<ol>
<li>第一步骤</li>
<li>第二步骤</li>
<li>第三步骤</li>
</ol>

清单的标签写法常用於网页的导览列部分,後续加上CSS可以学习如何做编排,要注意使用上 <li> 标签必须放在 <ul><ol> 标签的下层。

  • 图片
<img src=" 输入连结 " alt=" 说明文字" >

<img> 标签是透过 src 属性直接把图档嵌入HTML文件中,另外可以在 <img> 标签中加入 alt 属性,在图片无法正确显示时,就会显示出说明名字。

  • 超连结
<a href=" 输入网址 "> 输入文字 </a>

<a> 标签用於网页的连结,要把我们输入的文字变成可点击的连结,需要在标签内加入 herf 属性,并置入网址。

以上就是基础的HTML介绍,更进阶的标签类型,在之後的文章中如果有使用到会再另外做讲解。在开发人员工具中,可以检视网页的程序码,试着去找到以上的标签练习看看吧,大家如果对其他标签有疑惑,也可以到 W3School 了解更多详细的资料!


<<:  Re: 新手让网页 act 起来: Day06 - PropTypes

>>:  [DAY 8] _用标准库开发,以STM32F030为例

Promise

前言 不知道大家学习英语的时候有没有过明明语法规则都记清楚了,却还是不清楚实际如何运用的经验,或是只...

JavaScript Day28 - HTTP 网路请求

网路请求 之前在 AJAX 时提到了不少用法,其实请求的方法有不少,传递的资料也有不同,如果前後端分...

Day30:今天来聊一下CEH中讲的Mail Cryptography

电子邮件加密通过将电子邮件内容加密为不可读的形式来隐藏窃听者电子邮件内容。 电子邮件可以通过使用公钥...

Day24 javascript计时-2

今天我们接着昨天的笔记继续下去,咱们换来谈谈setTimeout() 方法,setTimeout()...

3. 解释 Hoisting

在我们之前提到的Execution Context,都会执行一个被称为"Hoisting的...