最全HTML5基础，1小时掌握HTML5

一、HTML简介

HTML的是超文本标记语言，用于描述网页的语言,不是编程语言。

二、HTML5标签

1、开发工具（VSCode）快捷键

• Ctrl+n     新建文件
• Ctrl+s     保存
• Ctrl+ +/-  放大或缩小
• !+ab       快速生成HTML页面结构
• Ctrl+/     注释
• Ctrl+0    复原浏览器大小
• Ctrl+鼠标滚轮    放大或缩小页面
• Shift+Alt+f    快速格式化  
• Shi+Alt+右键  多行选中修改

2、HTML语法规范

3、常用标签

• 标题标签<h1>~~<h6>
• 段落标签<p>
• 换行标签<br/>(单标签)
• 文本格式化标签

   <!-- 1.标题标签 -->
      你好
      <h1 id="one">你好ya!</h1>
      <h2>你好</h2>
      <h3>你好</h3>
      <h4>你好</h4>
      <h5>你好</h5>
      <h6>你好</h6>
      <!-- 2.段落标签 -->
      <p>niuhukghsgjdeytdwuykbhd是一定会</p>
      <p>niuhukghsgjdeytdwuykbhdcxbnxdnaikudey奴役和电视技术规范教育涉外的,你你你你你你的实际付款和渴望与非得让他,环节是富人的离开也很
          快随风如果还你H艰苦撒旦回复看,四对啊是一定会</p>
      <!-- 3.换行标签 -->
      gjghsdgxcnb<br />dasdsd<br />
      <!-- 4.文本格式化标签 -->
      <!-- 1）加粗 -->
      <strong>你好好的四五</strong><br />
      <!-- 2）斜体 -->
      <em>努斯更好的</em><br />
      <!-- 3）删除线 -->
      <del>hfgshjdg</del><br />
      <!-- 4）下划线 -->
      <ins>bhghg</ins><br />
      <!-- 5.盒子标签 div和span标签 -->
      <!-- <div>自己独占一行</div> -->
      <div><img src="../img.jpg" alt=""></div>123
      <!-- <span>一行放多个</span> -->
      <span><img src="../img.jpg" alt=""></span>123
      <!-- 6.图像标签(可以从网站上扒图片地址，可以是绝对地址即硬盘地址) -->
      <h4>图像标签</h4> <br />
      <img src="../images/img.jpg" alt="" title="刘德华" width="300" height="300" border="12" />
      <h4>替换文本 图像显示不出时用文字替换</h4>
      <img src="../images/img1.jpg" alt="刘德华">
      <!-- 7.超链接标签 -->
      <!-- <a href="跳转目标" target="目标窗口的打开方式（_self默认值，_blank在新窗口中打开）">文本或图像</a> -->
      <!-- 1)外部链接 -->
      <a href="http://www.qq.com" target="_blank">腾讯</a>
      <!-- 2）内部链接 -->
      <a href="index.html" target="_blank">首页</a>
      <!-- 3)锚点 -->
      biudsgweyudgzndgashd <a href="#one">锚点</a>
      <!-- 4）空链接 -->
      <a href="#"></a>
      <!-- 5)下载链接 只可以下载压缩包-->
      <a href="img.zip">下载</a>
      <!-- 8.特殊字符 -->
      建瓯的速&nbsp;&nbsp;度将&lt;&g

  
• <div>和<span>标签
• 图像标签<img src="url" />
• 表格标签

    <!-- cellspacing单元格之间的距离，align表格对齐方式，border表示有无边框 -->
      <table align="center" border="1" cellpading="5" cellspacing="0" width="200">
          <!-- 1.表头标签 -->
          <thead>
              <!-- 2.th表头标签，colspan合并行 -->
              <th colspan="3">
                  <td>刘德华</td>
              </th>
          </thead>
          <!-- 3.表格体标签 -->
          <tbody>
              <tr>
                  <!-- 4.tr行标签，td单元格标签，rowspan合并单元格 -->
                  <td rowspan="2">1</td>
                  <td>刘德华</td>
                  <td>56</td>
              </tr>
              <tr>
                  <td>刘德华</td>
                  <td>56</td>
              </tr>

• 列表标签

  <!-- ul 里边只能防li, li可以放任何 -->
      <!-- 1.无序列表 -->
      <ul>
          <li>萨那</li>
          <li>dsa</li>
      </ul>
      <!-- 2.有序列表 -->
      <ol>
          <li>hn</li>
          <li>jfiud</li>
      </ol>
      <!-- 3.自定义列表 -->
      <dl>
          <dt>名词</dt>
          <dd>解释1</dd>
      </dl>

• 表单标签<input type="" value="">

type属性值为button、checkbox、file、hidden、image、password、radio、reset、submit、text

(依次为按钮、复选框、文件、隐藏输入字段、图像形式按钮、密码、单选按钮、重置按钮、提交按钮、文本)

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上。（ for 属性应当与相关元素的 id 属性相同）

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

•   <!--1. <label for=""></label>标签 -->
      我是<input type="radio" id="sex"><label for="sex"><img src="../Day2/images/man.jpg" alt="">男</label>
      <input type="radio"><img src="../Day2/images/women.jpg" alt="">女
      <!-- 2.下拉菜单 -->
      <select name="E" id="">
          <option selected="selected">选项1</option>
          <option value="">选项2</option>
      </select>
      <!-- 3.文本域标签 -->
      <textarea name="F" id="" cols="30" rows="10">请输入</textarea>