• 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属性控制输入形式
        为表单项定义标注
        定义下拉列表
        定义下拉列表的列表项