Html入门


Html入门

超文本语言(html)是一种标记型语言,主要用于创建网页,由浏览器解析并呈现出来。除了HTML外,css用于描述一个网页的表现与展示效果,JavaScript则用于实现功能与行为。

HTML基本框架

<!DOCTYPE html>
<html lang="en">
        <head>
        <meta charset="utf-8">
        <title>一起看看</title>
        </head>
    <body>
        <div class="test">    
            <img src = "images/test.png" alt="test图片">
        </div>
    </body>
</html>
  • 上面第一行表示文档类型
  • 是页面的根元素,包含整个页面内容。
  • 头标签,头标签里面放值得东西不是给用户看的, (当然title是可以看见的) 它指定了页面的编码方式,标题和css样式以及JavaScript的引用,当然也可以把他们写到html页面内部,但是那样不好管理也显得html十分臃肿。
  • 这个元素里面包含的是希望让用户看见的东西,可以是文本、图像、视频、甚至游戏音乐等其他内容。
  • 可以定义页面的分区或者节,它把页面分块管理可以设置class或者id来辨别,在css中对它们管理。如
<div class="newclass">......</div>

图像

上面我们看到<img src = "images/test.png" alt="test图片">可以在页面插入图片,src表示内容(图片路径(相对路径)),alt是对该图像的描述性文字,当出于一些原因看不到图片时可以看到这段文字描述。例如当你用w3m浏览有图片的页面时。

文本

标题(heading)

标题共有六级从<h1><h6>

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
<h5>...</h5>
<h6>...</h6>
段落(paragraph)
<p>这是一个段落<br></p>
列表(list)

无序列表<ul> <li>...</li> </ul>
有序列表<ol> <li>...</li> </ol>

链接

例如下面这个链接:

 <a href="https://www.bilibili.com">BiliBili</a>

就是一个网站链接

表格
<table border="1">
    <tr>
        <td>&nbsp;</td>
        <td>姓名</td>
        <td>性别</td>
        <td>职业</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张三</td>
        <td></td>
        <td>交警</td>
    </tr>
    <tr>
        <td>02</td>
        <td>李四</td>
        <td></td>
        <td>学生</td>
    </tr>
</table>

应该呈现出这样的表格:

name sex profession
01 张三 交警
02 李四 学生

上面的这些都是最基础的东西,如果想深入了解可以来这里学习学习,或者去Bilibili也可以。


Author: Haoleng
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Haoleng !
 Previous
Regular Regular
正则表达式基础基础正则表达式符号 RE字符 意义 备注 ^word 待查词word在行首 word$ 待查词word在行尾 . 一定有一个任意字符 * 重复零到无穷个*前面的字符 [ABC] ABC中的一个
2020-06-18
Next 
oh-my-zsh oh-my-zsh
ZSH 🏌 oh-my-zsh Shell是linux的外壳,负责外界和linux内核之间的交互,Arch的最新镜像中已经设置了zsh为默认Shell(其实是livecd中默认是用zsh,由于自己的疏忽,特来纠正这个错误),通常我们所
2020-05-16
  TOC