HTML是一门语言, 所有网页都是用HTML这门语言编写出来的.
Web开发的核心技术之一,与HTML和JavaScript一起用于创建现代网站

根据W3C标准网页主要由三部分组成:
结构: HTML
表现: CSS
行为: JavaScript

HTML文本常用标签

文本常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML快速入门</title>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
<hr>

<font color="#ffc0cb" face="楷体" size="10">传智教育-黑马程序员</font>

<hr>


9月2日,一堂别开生面的“开学第一课”正在位于云南省金平县的中国-赤道几内亚友谊小学校园内举行,上课的孩子们感受到来自非洲的炽热情谊。<br>
“欢迎来赤几!中赤几友谊万岁!”“希望你们长大后,为赤道几内亚和中国的友好关系作出贡献!”赤道几内亚国立大学孔子学院的非洲学生在视频中以中文送上热情的寄语。教室里随即响起孩子们热烈的掌声。<br>
<hr>

<p>
    9月2日,一堂别开生面的“开学第一课”正在位于云南省金平县的中国-赤道几内亚友谊小学校园内举行,上课的孩子们感受到来自非洲的炽热情谊。
</p>

<p>
    “欢迎来赤几!中赤几友谊万岁!”“希望你们长大后,为赤道几内亚和中国的友好关系作出贡献!”赤道几内亚国立大学孔子学院的非洲学生在视频中以中文送上热情的寄语。教室里随即响起孩子们
</p>

<hr>

我草泥马<br>
<b>我草泥马</b><br>
<i>我草泥马</i><br>
<u>我草泥马</u><br>

</body>
</html>

超链接标签

<a href="https://bblog.mxy520.online" target="_blank">点我有惊喜</a>

href :访问指定资源的URL
target :指定打开资源的方式
_self:(默认值)在当前页面打开
_blank:在新标签打开

表格标签

  1. table:定义表格

    <table border="1" cellspacing="0" width="800">
    </table>
  2. tr:定义行

     <tr align="center">
         <td>第5节</td>
         <td>语文</td>
         <td>语文</td>
         <td>语文</td>
         <td>语文</td>
         <td>语文</td>
     </tr>
  3. td:定义单元格

     <tr  align="center">
         <td colspan="7">午休</td>
     </tr>
    
     <tr align="center">
         <td rowspan="3">下午</td>
         <td>第4节</td>
         <td>生物</td>
         <td>生物</td>
         <td>生物</td>
         <td>生物</td>
         <td>生物</td>
     </tr>

    列表标签

    1. <!--ol是orderedlist(排序)的缩写-->
      <ol>
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
      </ol>
      • <!--ul是unorderedlist的缩写-->
        <ul>
          <li>咖啡</li>
          <li>茶</li>
          <li>牛奶</li>
        </ul>

      布局标签

      布局标签
      标签 描述
      <div> 定义HTML文档中的一个区域部分, 经常与CSS一起使用, 用来布局网页
      <span> 用于组合行内元素

      表单标签

      表单标签

      <form action="#" method="post">
      </form>

      更多表单项标签

      1.隐藏

          <input type="hidden" name="id" value="666">

      2.文字和输入框绑定

          <label for="username">用户名:</label>
        <input type="text" name="username" id="username"><br>

      3.n选一radio

      <!--多个选项的name要设置成同一个 不然radio会变成多选-->
          <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
          <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label><br>

      4.checkbox

          <input type="checkbox" name="hobby" value="1">旅游
          <input type="checkbox" name="hobby" value="2">电影
          <input type="checkbox" name="hobby" value="3">游戏

      5.文件上传

          <input type="file">

      6.下拉选单

          <select name="city">
              <option value="1">上海</option>
              <option value="2">北京</option>
              <option value="3">深圳</option>
          </select>

      7.文本域

          <textarea name="descriptino" rows="5" cols="20"></textarea>

      8.三个作用不同的按钮

          <input type="submit" value="免费注册">
          <input type="reset" value="重置">
          <input type="button" value="我是一个按钮">

      引入CSS

      内联样式

      <div style="color: aqua"><h1>hello, css</h1></div>

      内部样式

      <!--定义在head标签里-->
        <style type="text/css">
          div{
            color: red;
          }
        </style>
      <div>
        hello, css
      </div>
      

      引入外部css

      /*这段代码放在css文件夹里*/
      p{
          color: aqua;
      }
      <!--然后在HTML代码中引入-->
      <link rel="stylesheet" href="css/test.css">
      <p>我是你爹</p>
      <!DOCTYPE html>
      <html>
      <head>
        <style>
          .highlight {
            background-color: yellow;
            font-weight: bold;
          }
        </style>
      </head>
      <body>
        <p class="highlight">This is a highlighted paragraph.</p>
        <p>This is a normal paragraph.</p>
      </body>
      </html>