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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 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
目录
相关文章
|
8天前
|
算法 Python
算法不再难!Python分治法、贪心、动态规划实战解析,轻松应对各种算法挑战!
【7月更文挑战第8天】掌握Python算法三剑客:分治、贪心、动态规划。分治如归并排序,将大问题拆解递归解决;贪心策略在每步选最优解,如高效找零;动态规划利用子问题解,避免重复计算,解决最长公共子序列问题。实例展示,助你轻松驾驭算法!**
19 3
|
8天前
|
数据挖掘 Shell 测试技术
怎么用Python解析HTML轻松搞定网页数据
**Python解析HTML摘要** 本文介绍了使用Python处理HTML的常见需求,如数据提取、网络爬虫和分析,并讨论了三种解析方法。正则表达式适用于简单匹配,但对复杂HTML不理想;BeautifulSoup提供简单API,适合多数情况;lxml结合XPath,适合处理大型复杂文档。示例展示了如何用这些方法提取链接。
|
12天前
|
存储 数据管理 数据库
CRUD操作实战:从理论到代码实现的全面解析
【7月更文挑战第4天】在软件开发领域,CRUD代表了数据管理的四个基本操作:创建(Create)、读取(Read)、更新(Update)和删除(Delete)。这四个操作构成了大多数应用程序数据交互的核心。本文将深入讲解CRUD概念,并通过一个简单的代码示例,展示如何在实际项目中实现这些操作。我们将使用Python语言结合SQLite数据库来演示,因为它们的轻量级特性和易用性非常适合教学目的。
|
11天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
16 0
CSS 【实战】 “四合院”布局
|
18天前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
23 2
|
18天前
|
Java 开发者 Spring
深入解析 @Transactional:Spring 事务管理的艺术及实战应对策略
深入解析 @Transactional:Spring 事务管理的艺术及实战应对策略
18 2
|
18天前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
18 1
|
20天前
|
存储 缓存 监控
深入JVM:解析OOM的三大场景,原因及实战解决方案
深入JVM:解析OOM的三大场景,原因及实战解决方案
|
20天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
3天前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
5 0