HTML学习笔记(一)


HTML

Hyper Text Markup Language (超文本标记语言)

HTML的基本结构

使用规范:

<!DOCTYPE html>

头部:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

meta标签:

描述性标签,一般用来做SEO(搜索引擎优化)

<meta charset="UTF-8">

网页标题:

<title>Title</title>

主体部分:

<body>

</body>

注释:

<!--注释内容-->

网页的基本标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

显示效果

段落标签

快捷键:p+TAB

<p>
    第一行
    第一行
</p>
<p>第二行</p>
<p>第三行</p>

显示效果:

换行标签

第二行<br/>

水平线标签

<hr/>

粗体、斜体标签

<strong>123</strong>
<em>123</em>

显示效果:

特殊符号标签

空格:

&nbsp;
大于 &gt;
小于 &lt;
版权号 &copy;

图像标签

<img src="path" alt="text" title="text" width="x" height="y"/>

超链接标签

<a href="https://www.baidu.com">点击我跳转到页面</a>

href:表示跳转到那个页面

target:表示窗口在哪里打开

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

锚定标签

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

列表标签

有序列表

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>c</li>
    <li>c++</li>
</ol>

无序列表

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>c</li>
    <li>c++</li>
</ul>

自定义列表

<dl>
    <dt>subject</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>C++</dd>
</dl>

表格标签

<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</td>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
</table>

视频和音频

<video src="" controls autoplay></video>
<audio src=""></audio>
</body>

Author: Xi Chen
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Xi Chen !
评论
  TOC