• HTML快速入门


    HTML快速入门

    一、基础标签

    标签描述

    -

    定义标题,h1最大,h6最小
    定义文本的字体、字体尺寸、字体颜色
    定义粗体文本
    定义斜体文本
    定义文本下划线
    定义文本居中

    定义段落

    定义折行

    定义水平线
    
    DOCTYPE html>
    <html lang="en">
    <head>
        
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    
      <h1>我是标题h1>
      <h2>我是标题h2>
      <h3>我是标题h3>
      <h4>我是标题h4>
      <h5>我是标题h5>
      <h6>我是标题h6>
    
      <hr>
      
      <font face="楷体" size="5" color="pink">你好font>
    
      <hr>
    
      <p>风急天高猿啸哀,渚清沙白鸟飞回。p>
      <p>无边落木萧萧下,不尽长江滚滚来。p>
      <p>万里悲秋常作客,百年多病独登台。p>
      <p>艰难苦恨繁霜鬓,潦倒新停浊酒杯。p>
    
      <hr>
    
      今天是周日<br>
      <b>今天是周日b><br>
      <i>今天是周日i><br>
      <u>今天是周日u><br>
    
      <hr>
    
      <center>今天是周日center>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    效果:

    在这里插入图片描述

    二、图片、音频、视频标签

    标签描述
    定义图片
    定义音频
    定义视频
    • img:定义图片
      • src:规定显示图像的URL(统一资源定位符)
      • height:定义图像的高度
      • width:定义图像的宽度
    • audio:定义音频。支持的音频格式:MP3、WAV、OGG
      • src:规定音频的URL
      • controls:显示播放控件
    • video:定义视频。支持的视频格式:MP4,WebM,OGG
      • src:规定视频的URL
      • controls:显示播放控件
    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
      
      <img src="" width="200px" height="200px">
    
      <audio src="" controls>audio>
    
      <video src="" controls>video>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    三、超链接标签

    标签描述
    定超链接,用于链接到另一个资源
    • href:指定访问资源的URL
    • target:指定打开资源的方式
      • _self:默认值,在当前页面打开
      • _blank:在空白页面打开
    
    
    
        
        Title
    
    
      CSDN
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    效果:

    在这里插入图片描述
    在这里插入图片描述

    四、列表标签

    标签描述
      定义有序列表
        定义无序列表
      • 定义列表项
        • type:设置项目符号
        DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Titletitle>
        head>
        <body>
        
          <ol>
            <li>勒布朗·詹姆斯li>
            <li>安东尼·戴维斯li>
            <li>拉塞尔·威斯布鲁克li>
          ol>
        
          <ul>
            <li>勒布朗·詹姆斯li>
            <li>安东尼·戴维斯li>
            <li>拉塞尔·威斯布鲁克li>
          ul>
        body>
        html>
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21

        效果:

        在这里插入图片描述

        五、表格标签

        标签描述
        定义表格
        定义行
        定义单元格
        定义表头单元格
        • table:定义表格
          • border:规定表格边框的宽度
          • width:规定表格的宽度
          • cellspacing:规定单元格之间的空白
        • tr:定义行
          • align:定义表格行的内容对齐方式
        • td:定义单元格
          • rowspan:规定单元格可横跨的行数
          • colspan:规定单元格可横跨的列数
        DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Titletitle>
        head>
        <body>
        
          <table border="1" cellspacing="0" width="500px">
            <tr align="center">
              <th>序号th>
              <th>logoth>
              <th>品牌名称th>
              <th>企业名称th>
            tr>
        
            <tr align="center">
              <td>001td>
              <td><img src="05-logo/lining.png" width="50px" height="50px">td>
              <td>李宁td>
              <td>李宁公司td>
            tr>
        
            <tr align="center">
              <td>002td>
              <td><img src="05-logo/anta.png" width="50px" height="50px">td>
              <td>安踏td>
              <td>安踏公司td>
            tr>
        
            <tr align="center">
              <td>003td>
              <td><img src="05-logo/361.png" width="50px" height="50px">td>
              <td>361°td>
              <td>361°公司td>
            tr>
          table>
        
          <hr>
        
          <table border="1" cellspacing="0" width="500px">
            <tr align="center">
              <th colspan="2">logoth>
              <th>品牌名称th>
              <th>企业名称th>
            tr>
        
            <tr align="center">
              <td colspan="2"><img src="05-logo/lining.png" width="50px" height="50px">td>
              <td>李宁td>
              <td>李宁公司td>
            tr>
        
            <tr align="center">
              <td  colspan="2" rowspan="2"><img src="05-logo/anta.png" width="50px" height="50px">td>
              <td>安踏td>
              <td>安踏公司td>
            tr>
        
            <tr align="center">
              <td>xxxtd>
              <td>xxx公司td>
            tr>
          table>
        body>
        html>
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
        • 40
        • 41
        • 42
        • 43
        • 44
        • 45
        • 46
        • 47
        • 48
        • 49
        • 50
        • 51
        • 52
        • 53
        • 54
        • 55
        • 56
        • 57
        • 58
        • 59
        • 60
        • 61
        • 62
        • 63
        • 64
        • 65
        • 66

        效果:

        在这里插入图片描述

        六、布局标签

        标签描述
        定义HTML文档中的一个区域部分,经常与CSS一起使用,用来布局网页
        用于组合行内元素
        DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Titletitle>
        head>
        <body>
        
          <div>我是divdiv>
          <div>我也是divdiv>
          <span>我是spanspan>
          <span>我也spanspan>
        body>
        html>
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14

        效果:

        在这里插入图片描述

        七、表单标签

        • 表单:在网页中主要负责数据采集功能,使用
          标签定义表单
        • 表单项(元素):不同类型的input元素、下拉列表、文本域等
        标签描述
        定义表单
        定义表单项,通过type属性控制输入形式
        为表单项定义标注
        定义下拉列表
        定义下拉列表的列表项