HTML

什么是HTML?

HTML 是用来描述网页的一种语言。是用来编写静态网页的，搭建整个网页的。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

第一个HTML

<head>
        <!-- 设置整个网页的编码格式 -->
        <meta charset="UTF-8">
        <!-- 设置网页标题-->
        <title>百度一下,你就知道</title>
    </head>
    
    
    
    
    <body text="#00FF00" bgcolor="silver" background="">
        
        <h1>HTLLO WORLD --HTML</h1>
        <br>
        打开运行界面: windows+R 
        
    </body>

HTML基础

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

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

HTML 段落是通过标签 <p> 来定义的。

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

HTML 链接是通过标签 <a> 来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

HTML 图像是通过标签 <img> 来定义的。

<img loading="lazy" src="/images/logo.png" width="258" height="39" />

HTML元素

<p> 元素:

 <p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

 <body>
 <p>这是第一个段落。</p>
 </body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

 <body>
 <p>这是第一个段落。</p>
 </body>

 </html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

排版标签

<body>
        <!-- 
            换行  
            在HTML代码中,无论有多少个空格,浏览器解析后都认为只有一个空格
              ==>空格    
            
        -->
        我是第1行</br>  
        我是第2行<br>
        我是第3行<br>
        我是第4行<br>
        我是第5行<br>
        我是第6行<br>
        
        <p>
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
        </p>
        
        <hr width="50%" size="7" color="red" align="left">
        
        <p>
             心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
             心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
             心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
        </p>
        
    </body>

文字标签

<body>
        <font color="red" size="7" face="微软雅黑">我是文字1号</font>
        <font color="blue">我是文字2号</font>
        
        <h1>我是h1标签</h1><br>
        <h2>我是h2标签</h2><br>
        <h3>我是h3标签</h3><br>
        <h4>我是h4标签</h4><br>
        <h5>我是h5标签</h5><br>
        <h6>我是h6标签</h6><br>
        
        
        <b><font size="7" color="aquamarine">我是一个很强壮的字</font></b>
        <strong><font size="7" color="aquamarine">我是一个很强壮的字</font></strong>
        
        
    </body>

无序标签

<body>
        <h1>最火音乐榜</h1>
        <ul type="disc">
            <li>说好不哭</li>
            <li>枫</li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
        <h1>最火音乐榜</h1>
        <ul type="circle">
            <li>说好不哭</li>
            <li>枫</li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
        <h1>最火音乐榜</h1>
        <ul type="square">
            <li>说好不哭</li>
            <li>枫</li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
    </body>

有序标签

<body>
        
        <h1>中国票房排行榜</h1>
        <ol type="1" start="5">
            <li>战狼</li>
            <li>哪吒</li>
            <li>流浪地球</li>
            <li>诛仙</li>
        </ol>
        
        
    </body>

图形标签

<body>
<!--
绝对路径: 安徽省合肥市高新区xxxxxxx
相对路径: 对面的班级

-->
<img src="img/tp.jpg" width="300px" height="300px" border="10px" align="middle" alt="加载文件丢失" title="微软"/>
我是一张微软的图标,我很流弊的！！！！！！！！！


</body>

链接标签

<body>
        <a href="http://www.baidu.com">百度一下</a><br>
        <a href="http://www.nba.com">NBA一下</a><br>
        <a href="http://www.qq.com">腾讯一下</a><br>
        <a href="http://www.taobao.com">淘宝一下</a><br><br><br><br>
        
        
        <a href="Demo01文字标签.html" target="_blank">Demo01</a>
        
        
    </body>

表格标签

<body>
        <!-- 新建一个3行5列的表格 
            消除单元格和单元格之间的间距
            cellpadding="0px" 
            cellspacing="0px"
        -->
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题1</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>
        <br>
        <br>
        <br>
        <br>
        <br>
        
        
        
        
        
        
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题1</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td colspan="3">2-3</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>
        <br>
        <br>
        <br>
        <br>
        <br>
        
        
        
        
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题3</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td rowspan="2">2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>

自定义一个网站

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:red;height:200px;100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权  runoob.com</div>

</div>
 
</body>
</html>

完整的HTML教程：https://www.runoob.com/html/html-tutorial.html

小丑竟是我自己