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基础

  1. HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。 
    <h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
  2. HTML 段落是通过标签 <p> 来定义的。 
    <p>这是一个段落。</p>
<p>这是另外一个段落。</p>
  3. HTML 链接是通过标签 <a> 来定义的。 
    <a href="https://www.runoob.com">这是一个链接</a>
  4. 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="width:500px">

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

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

<div id="content" style="background-color:#EEEEEE;height:200px;width: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










 







            

            
posted @ 
2021-01-15 20:02 
奔跑的snail 
阅读(149) 
评论(0) 
 
收藏 
举报