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

简介: 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
目录
相关文章
|
2月前
|
移动开发 前端开发 安全
|
4月前
|
数据采集 存储 调度
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
在Python网页抓取领域,BeautifulSoup和Scrapy是两款备受推崇的工具。BeautifulSoup易于上手、灵活性高,适合初学者和简单任务;Scrapy则是一个高效的爬虫框架,内置请求调度、数据存储等功能,适合大规模数据抓取和复杂逻辑处理。两者结合使用可以发挥各自优势,例如用Scrapy进行请求调度,用BeautifulSoup解析HTML。示例代码展示了如何在Scrapy中设置代理IP、User-Agent和Cookies,并使用BeautifulSoup解析响应内容。选择工具应根据项目需求,简单任务选BeautifulSoup,复杂任务选Scrapy。
BeautifulSoup VS Scrapy:如何选择适合的HTML解析工具?
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
115 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
前端开发 JavaScript
|
5月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
216 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
117 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
108 34
|
5月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
172 33
|
4月前
|
数据采集 前端开发 API
SurfGen爬虫:解析HTML与提取关键数据
SurfGen爬虫:解析HTML与提取关键数据

推荐镜像

更多
  • DNS