当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

CSS 全解析实战(二)-HTML基础强化

教程管理员 发布于2023-09-30 10:01 HTML教程 148

简介: 1 HTML常见元素和理解(1) HTML 常见元素 viewport 标签适配移动端 HTML 重要属性 2 HTML常见元素和理解(2) 标签的 HTML5新属性 href 规定链接的目标地址 target 规定在何处打开链接文档 表格 label 为 input 元素定义标注(标记)。

1 HTML常见元素和理解(1)

img_582371735006dfb78ca98abc3fb1dc0f.png
img_b8656ed17b8cd82f1fba97aa3269f7cb.png
  • HTML 常见元素


    img_1ef98bff1172a5c154e064da204b02c8.png
    img_f39f7a94f3caf164982a5f5d1516f1c1.png
    img_e139caff7aa28840e3a9e3924ec8def7.png viewport 标签适配移动端
  • HTML 重要属性


    img_af848fa6d080ef4b4bb8761ab6059b67.png

2 HTML常见元素和理解(2)

img_4ec4d0dfee86597c99db26226b48da6d.png
  • <a> 标签的 HTML5新属性
    • href
      规定链接的目标地址


      img_0ca5072254390da6832ef80ea3d0a086.png
    • target
      规定在何处打开链接文档


      img_c26a680cd5ad72d9afabd223d9827c98.png
  • 表格


    img_467969d907b1514aa5bcd7b71a668ec0.png
  • label
    为 input 元素定义标注(标记)。
    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。


    img_97ad9772efda8baca26f11885536e7f2.png
    img_39658e984273e9a1350686ce8df13cd3.png
  • button
    定义一个按钮。
    在 <button> 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
    请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
    如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
    img_3aab958d330b624ad216d07cc9e63307.png
    img_f71d3378ee8ab2b2d723a03c825561f5.png

3 HTML常见元素和理解(3)

  • 如何理解 HTML


    img_6bbd746f54eeb9ac2b0be8fe6f8006d6.png
    img_23de3dc24333933e4e04715a0f5624cf.png
    img_174e4862e5b5f74c7b747ded56de45f2.png 提取出来就是标题
    img_f3fa60bd1c013216b8e1e76754740a79.png
    img_688a99c1cb23242bcfbce1e0fe35a973.png
    img_a4342eebe8ab46d57d7643be93a8a8c2.png

4 HTML版本

img_f5c02f310711f4c7f7bf2b77b376bb90.png
img_d75af6c5b4d14dafb8de1794dd36f9b6.png
img_481e46719c937793ee416b08afe0f030.png
img_098fd1b99b2099b7fcea3ebed3845da7.png

5 元素分类

img_19c6dc6a3f564d029b8b380f46830bde.png
  • 块-内联


    img_d96f4752425ff49faa74ddd828a1633d.png

HTML5中的分法


img_267e9633846c3106c3dbc2d5aea2cc68.png

6 嵌套关系

img_04c8801930db1a09cf385ee744b2bbe8.png

7 默认样式和reset

img_1837854a738c455781ab8f946536d60b.png

面试真题

img_5e1eb101ca48a6331b1b0902a134d991.png
img_7c4caea09c04d69ac506b817d2284445.png
img_97b129c79943b2cb579bf2b5e8111e53.png
img_0b637e91f78b269592466d301f67e000.png
img_f4df6a319eaf8cf9112d15563f86ba39.png
img_9aa854d018469e96edac115ac2947e57.png
img_791f5e520292832dd06f0d226906a44f.png
img_e7b29ecbc17d8a2bd2a0f34cd08dfd18.png
img_39d64cdb8e5781416ac0f3f2db7f2a63.png

琼ICP备09004296号-12