HTML再出发

这篇具有很好参考价值的文章主要介绍了HTML再出发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意事项

VScode相关

  1. vscode必须打开一个文件夹才能使用liveServer,只打开一个文件无法使用liveServer功能。
  2. 网页编写不标准,缺少head,body等基本结构,liveServer失去自动刷新功能,只能手动刷新。
  3. 配置VScode的内置插件emmet,可以对生成结构的属性进行定制。比如lang="en"改为lang=“zh-CN”。
    HTML再出发,html,前端
  4. 在存放代码的文件夹中,存放一个favicon.icon图片,可配置网站图标(要放在VScode打开的文件夹第一级目录下才能识别到图标)。
  5. VScode快捷键
    ① 注释不能嵌套,注释快捷键为ctrl+/;
    ② 删除单行或多行使用快捷键ctrl+shift+k;
    ③ 很长一行回车到下一行ctrl+enter;
    ④ 复制一行到下一行 shift+alt+向下箭头(向上箭头)

排版标签

排版标签 h1-h6(标题),p(段落),div(没有任何含义,用于整体布局),p标签内不能嵌套h1-h6,div以及它本身。

语义化

语义化:标签默认的效果不重要,语义(含义)最重要。
语义化标签概念:用特定的标签去表达特定的含义。
语义化的作用和优点:① 代码可读性强;② 有利于SEO(搜索引擎优化);③ 方便设备解析(屏幕阅读器)

块级元素和行内元素

块级元素(独占一行)和行内元素(不独占一行)
块级元素:h1-h6,div,marquee,p
行内元素:input,span,img
普通规则:块级元素内能写行内元素和块级元素(几乎什么都能写);行内元素中能写行内元素,但不能写块级元素
特殊规则:h1-h6不能相互嵌套,p标签中不能写块级元素

文本标签

  1. 常用文本标签:用于包裹词汇、短语等,通常写在排版标签里面,排版标签更宏观(大段文字),文本标签更微观(词汇、短语),文本标签通常是行内标签。
标签名 标签语义
em 要着重阅读的内容(双标签)
strong 十分重要的内容,语气比em要强(双标签)
span 没有语义,用于包裹短语的通用容器(双标签)
  1. 不常用的文本标签
    HTML再出发,html,前端
    HTML再出发,html,前端
    blockquote和address是块级元素,其他都是行内元素

img标签

img标签(行内元素)
尽量不同时修改图片的宽和高,可能会导致比例失调。
alt属性的作用:① 搜索引擎是通过alt属性,得知图片的内容(最主要);② 当图片无法展示时,有些浏览器会展示alt的值; ③ 盲人阅读器会朗读alt的值。

图片格式

① jpg格式
HTML再出发,html,前端
② png格式
HTML再出发,html,前端
③ bmp格式
HTML再出发,html,前端
④ gif格式
HTML再出发,html,前端
⑤ webp格式
HTML再出发,html,前端
⑥ base64格式
HTML再出发,html,前端文章来源地址https://www.toymoban.com/news/detail-614462.html

超链接

到了这里,关于HTML再出发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【前端|HTML系列第1篇】HTML的基础介绍与初次尝试

    【前端|HTML系列第1篇】HTML的基础介绍与初次尝试

    大家好,欢迎来到前端入门系列的第一篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)的基础概念和标签,帮助你快速入门。 本期学期目标是: 了解什么是HTML 学习了解一个完整

    2024年02月11日
    浏览(13)
  • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

    【前端|HTML系列第2篇】HTML零基础入门之标签元素

    大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

    2024年02月11日
    浏览(11)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(21)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(28)
  • 前端学习6:HTML链接

    前端学习6:HTML链接

    目录 一、HTML超链接(链接) 二、HTML链接语法  三、target属性  target属性值展示 四、name属性  五、补充  关于创建电子邮件链接时如何发送邮件内容 在进行抄送时,需要使用:cc 在进行密送时,需要使用:bcc 在 HTML 中,我们使用  a 标签 来表示超链接。. 超链

    2024年02月04日
    浏览(13)
  • 前端HTML入门基础

    阶段目标:掌握HTML、CSS常用布局技巧,能够独立制作网页。 目标:掌握标签基本语法,能够独立布局文章页。 今日目标:掌握标签基本语法,能够独立布局文章页。 核心技术点 网页组成 排版标签 多媒体标签及属性 综合案例一 - 个人简介 [外链图片转存失败,源站可能有防

    2024年02月13日
    浏览(32)
  • 前端学习HTML

    H yper T ext M ark-up L anguage 超文本标记 语言 。 HTML是一种编程语言。是一种 解释型 的编程语言。 超文本,表示不只是文本。还可以有图片,音频,声频,视频等。 . txt 是文本文件,只有文本。     超文本可以有图片,音频。 标记又叫标签。 HTML就是由大量的标签组成的一种

    2024年02月15日
    浏览(12)
  • 初识前端标记语言HTML

    目录 1.HTML介绍 2.走进HTML5 2.1 HTML编写工具VS Code安装过程 2.2 HTML5基本结构 2.2.1 字号标签 2.2.2 换行标签 2.2.3 网页标题设置 2.2.4 文本加粗标签 2.2.5 文本倾斜 2.2.6 添加注释 2.2.7 水平线标签 2.3 插件 2.4 特殊符号显示(字符实体) 2.5 图像标签 2.6 超链接标签 2.6.1 超链接使用:

    2024年03月14日
    浏览(16)
  • html设置前端加载动画

    html设置前端加载动画

    主体思路参考: 前端实现页面加载动画_边城仔的博客-CSDN博客 JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客 (1)需要在按钮和图片元素设置两个id   (2) 绑定id进行事件绑定 注意:图片一开始是 不显示的 当点击按钮后才显示。 (3)编写js脚本 完成。

    2024年02月07日
    浏览(11)
  • 前端面试题 ===> 【HTML】

    去掉或者丢失样式的时候能够让页面呈现出清晰的结构; 代码结构清晰,方便团队的管理和维护,并且语义化更具有可读性,减少差异化; 提升用户体验; 例如: title、alt 用于解释名词或者图片信息、 label 标签的活用 有利于SEO优化,提升搜索引擎排名; 和搜索引擎建立良

    2024年03月14日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包