HTML基础篇—制作网页，好比画家作画

zaoyu
318 阅读9分钟

简介

  • HTML 指的是超文本标记语言:HyperTextMarkupLanguage

  • HTML 运行在浏览器上，由浏览器来解析。

  • HTML 不是一种编程语言，而是一种标记语言

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

  • HTML 文档包含了HTML标签及文本内容

  • HTML文档也叫做web 页面

  • HTML文档的后缀为.html或者.htm

前端工程师是一名画家

通常画家作画，需要画板，笔，颜料，利用这些工具，加上画家的构思，感悟，就可以画出令人欣赏的佳作。

制作网页，好比画家作画。浏览器就是我们的画板，HTML元素就是我们的笔，HTML颜色就是我们的颜料，通过布局，构思，美感，制作出我们想要的网页。

文档结构

画家作画需要布局，HTML也有自己的结构，规范，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页制作</title>
    <link rel="stylesheet" type="text/css" href="theme.css">
    <style type="text/css">
      h1 {color:red;}
      p {color:blue;}
    </style>
</head>
<body>
  文档内容
</body>
</html>
  • <!DOCTYPE html>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的；浏览器发展至今，有很多版本，需要生命使用什么版本的HTML，浏览器才能能正确的解析，上面是HTMl5文档类型
  • html、head、body都是html元素，html根元素，head是头部元素，body元素是内容主体，它们就组成的html的基本结构
  • 元素是可以嵌套的，有了嵌套，才能组成丰富的内容
  • head元素是所有头部元素的容器;
  1. meta元素描述了一些基本的元数据，元数据也不显示在页面上，但会被浏览器解析；比如中文网页需要使用声明编码，否则会出现乱码
  2. title元素定义文档的标题，在所有 HTML 文档中是必需的
  3. link 元素定义了文档与外部资源之间的关系。通常用于链接到样式表
  4. style 元素可以直接添加样式来渲染 HTML 文档
  • body元素是内容主体，包含了所有的可见的网页内容，网页设计主要在body元素里

元素

元素构成

HTML元素有三部分构成，起始标签、元素内容、结束标签
比如<h1>标题</h1>,<h1>是起始标签，</h1>是结束标签，标题是元素内容；
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如<img/>, <br/>

元素属性

  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：id="test" class、id、style是大多数元素都有的属性，有一些元素有自己特殊的属性； 比如 百度，这个一个超文本链接，用来跳转到其他的文档，href就是它的元素。

下面介绍一些常用元素

标题

通过 <h1> - <h6> 标签进行定义的；<h1> 定义最大的标题，<h6> 定义最小的标题。

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

段落

是通过<p> 标签定义的。

<p>这是一个段落</p>
<p>这是另一个段落</p>

这是一个段落

这是另一个段落

超链接

标签 <a>来设置超文本链接，href是元素的属性，href的值就是你想访问的地址

<a href="https://www.baidu.com">访问百度</a>

访问百度

图像

由<img> 标签定义，<img>是空元素，意思是说，它只包含属性，并且没有闭合标签。src属性是图像的 URL 地址，width,height,是图片的宽高，alt是当浏览器无法显示图片时，给出的警告信息

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/5/16f73d76160449f5~tplv-t2oaga2asx-image.image" alt="Pulpitrock" width="40" height="40">
Pulpitrock

列表

标签<ul>、<li>标签组合成无序列表，标签<ol>、<li>标签组合成有序列表

// 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
// 有序列表
<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>
  • Coffee
  • Milk
  1. Coffee
  2. Milk

表格

由<table> 标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<table border="1">
    <tr>
        <td>名称</td>
        <td>数量</td>
    </tr>
    <tr>
        <td>白菜</td>
        <td>30</td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>20</td>
    </tr>
    <tr>
        <td>西瓜</td>
        <td>10</td>
    </tr>
</table>
名称 数量
白菜 30
苹果 20
西瓜 10

表单

表单是一个包含表单元素的区域，表单使用表单标签 <form> 来设置, 还有很多表单元素

<form>
    <label>姓名</label> //输入框标题
    <input name="name"/> //输入框
    <br/> //换行
    <label>密码</label>
    <input type="password" name="pw"/>
    <br/> //换行
    <label>爱好</label>
    <input type="checkbox" name="like" value="read">读书
    <input type="chexkbox" name="like" value="write">写字
    <br/>
    <label>性别</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
    <br/>
    <button>登录</button> //按钮
</form>
姓名
密码
爱好 读书 写字
性别 男 女
登录

区块

  • 大多数 HTML 元素被定义为块级元素或内联元素
  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
  • 块级元素 <h1>、<p>、<div>、<ul>、<table>
  • 内联元素在一行内显示
  • 内敛元素 <span>、<input>、<label>、<button>、<a>、<img>

<div>元素，它可用于组合其他 HTML 元素的容器，<span>元素，文本的容器

颜色

我们作画的颜料来了，HTML 颜色由红色、绿色、蓝色混合而成。

定义

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FFF) 三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256) 我们有非常丰富的颜色来作画

#FF0000 红色 rgb(255，0，0)
#00FF00 绿色 rgb(0，255，0)
#0000FF 蓝色 rgb(0，0，255)
#000000 黑色 rgb(0，0，0)
#FFFF00 黄色 rgb(255，255，0)

使用

上面元素我们讲过，元素有属性，用来添加元素的额外信息；style属性，代表元素的内联样式；通过设置style, 可以设置元素的颜色；

<span style="color:#FF0000">#FF0000 红色 rgb(255，0，0)</span><br/>
<span style="color:#00FF00">#00FF00 绿色 rgb(0，255，0)</span><br/>
<span style="color:#0000FF">#0000FF 蓝色 rgb(0，0，255)</span><br/>
<span style="color:#000000">#000000 黑色 rgb(0，0，0)</span><br/>
<span style="color:#FFFF00">#FFFF00 黄色 rgb(255，255，0)</span><br/>

设置style的color属性不同的颜色值，页面上就会显示不同的颜色

文档流

我们有了多种不同的元素，标题，段落，超链接，表格，表格等等这些，我们怎么去组织这些元素，如同画家一样去作画呢?

  • HTML文档运行在浏览器窗体中。
  • 窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素
  • 块级元素都独占一行，，内联元素在一行内从左到右顺序排放，一行放不下，另起新行排放
  • 几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素，也就是元素之间可以嵌套。

这就是文档流。
能否脱离文档流呢? 答案是可以的，以后再css篇中介绍

盒子模型

如何调整元素的大小、元素之间的间距、元素与子元素之间的间距呢？ 把所有的HTML元素都看作一个盒子，这个盒子有宽、高、外边距、内边距、边框

  • Margin(外边距) - 清除边框外的区域，外边距是透明的
  • Border(边框) - 围绕在内边距和内容外的边框
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的
  • Content(内容) - 盒子的内容，显示文本、嵌套子元素
  • width(元素宽度)- 等于内容宽度+左右内边距宽度+左右边框宽度
  • height(元素高度) - 等于内容高度+上下内边距宽度+上下边框宽度

通过上面我们讲元素的style属性，设置这些属性；

内容区
<div style="width:200px;height:100px;margin:10px;padding:10px;border:2px solid blue;">
    <div style="height:100%;background:red;text-align:center;color:#fff">内容区</div>
</div>

红色区域为元素内容区，宽200px，高100px(px是宽度单位,把他理解成生活中的厘米)，蓝色为元素边框，宽度2px,颜色为绿色；蓝色与红色之间的间距为内边距10px, 外边距也是10px; 上面也是两个div元素的嵌套，只有嵌套才能组成丰富的页面。

总结

  • HTML是一种超文本标记语言, 在浏览器中运行，用来制作网页，因此HTML文档也叫web网页。
  • HTMl通过元素组织网页，比如标题、段落、超链接、表格、表单等。
  • HTML元素通过属性，给自己添加额外的信息，比如style、id、class。
  • HTML 颜色由红色、绿色、蓝色混合而成，有十六进制表示；
  • 文档流，了解浏览器窗体安装怎样的规则排放元素；块级元素占一行，内联元素在一行内从左到右排放，元素之间可以嵌套
  • 盒子模型，可以设置元素的大小，内边距，外边距，边框
avatar
文章
阅读
粉丝