HTML5 基础总结

---

一、HTML的基本结构

• DOCTYPE：告诉模拟器，我们要使用什么规范
• head标签：网页头部
  • meta：描述性标签，用来描述网站的一些信息
  • title：网页标题，就是网页在标签栏上显示的标题
• body：网页主体，存放网页的主要内容

---

二、网页的基本标签

• 标题标签：

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
  

• 段落标签：

    <p>这是一个段落</p>
    <p>这是另一个段落</p>
  

• 字体样式标签：

    <strong>这是一段粗体</strong>
    <em>这是一段斜体</em>
  

• 注释： <!-- -->
• 水平线标签：<hr>
• 换行标签： <br>
• 空格：  

---

三、图像标签

  <img src="path" alt="text" title="text" width="x" height="y" />

• src： 图片地址(必填)
  • 相对地址(推荐使用) 或 绝对地址
  • . . /      --上一级目录
• alt：图片加载不出来的代替文字(必填)
• title：悬停文字
• width和height：图片的长和宽

---

四、超链接

  <a href="path" target="目标窗口位置">链接的文本或图像</a>

• href：要跳转的页面(必填)
• target：新窗口在哪里打开
  • _self：默认值，在原标签页打开
  • _blank：在新的标签页中打开
• 锚链接：
  1. 需要一个锚标记：<a name = "top">顶部</a>
  2. 用"#"加标记名跳转到标记：<a href = "#top">回到顶部</a>

---

五、列表标签

• 大标签+小标签
  • 有序列表：试卷、问答…

    <ol>
       <li>Java</li>
       <li>Python</li>
       <li>C++</li>
    </ol>
  

  • 无序列表：导航、侧边栏…

      <ul>
         <li>html</li>
         <li>css</li>
         <li>JavaScript</li>
      </ul>
    

  • 自定义列表：公司网站底部…
    • dl：标签
    • dt：列表名称
    • dd：列表内容

    <dl>
       <dt>学科</dt>
       <dd>Java</dd>
       <dd>Python</dd>
    
       <dt>城市</dt>
       <dd>广州</dd>
       <dd>深圳</dd>
    </dl>
    

  ---

  六、表格标签

  • table：标签
    • tr：行
    • td：列
    • rowspan：跨行
    • colspan：跨列

    <table border = "1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
    </table>
  

完成效果如图：

---

七、页面结构分析

• header：标题头部区域的内容
• footer：标记脚部区域的内容
• section：Web页面中的一块独立区域
• article：独立的文章内容
• aside：相关内容或引用（常用于侧边栏）
• nav：导航类辅助内容

---

八、表单

1.表单语法

  <form action="result.html" method="post"></form>

• action：向何处发送表单数据
• method：如何发送表单数据
  • get：可以在 url 中看到提交的信息，高效但不安全
  • post：比较安全，且能传输大文件

2.表单元素

  <input type="类型" name="名称" value="初始值" />

• type：指定元素的类型，默认为text
  • text：文本框
  • password：密码框
  • radio：单选框
    • 要实现单选，应该将属于同一个组不同 value 的元素设置同一个 name。
  • checkbox：多选框
  • file：文件域
  • submit：上传按钮
  • reset：重置按钮
• name：指定元素的名称
• value：元素的初始值。type 为 radio 时必须指定一个值
• size：指定表单元素的初始宽度
• maxlength：type为 text 或 password时，输入的最大字符数
• checked：type 为 radio 或 checkbox 时，指定按钮是否是被选中
  
  

  <!--下拉框-->
  <select name="国家">
    <option value="China" selected>中国</option>
    <!--selected表示下拉框默认的选中-->
    <option value="USA">美国</option>
    <option value="France">法国</option>
  </select>

  <!--文本域-->
  <textarea name="textarea" cols="列数" rows="行数"></textarea>

3. 表单应用——在表单元素中直接添加即可
   • readonly：只读
   • disabled：禁用
   • hidden：隐藏域