HTML 入门

HTML 简介

1. 什么是 HTML?

全称:HyperText Markup Language(超文本标记语言)。

超文本:暂且简单理解为 “超级的文本”,和普通文本比,内容更丰富。

标 记:文本要变成超文本,就需要用到各种标记符号。

语 言:每一个标记的写法、读音、使用规则,组成了一个标记语言。

2. 相关国际组织(了解)

1. IETF

全称:Internet Engineering Task Force(国际互联网工程任务组),成立于1985年底,是一个权威 的互联网技术标准化组织,主要负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网技术标准均出自IETF。官网:IETF | Internet Engineering Task Force

2. W3C

全称:World Wide Web Consortium(万维网联盟),创建于1994年,是目前Web技术领域,最具影响力的技术标准机构。共计发布了200多项技术标准和实施指南,对互联网技术的发展和应用起到了基础性和根本性的支撑作用,官网:W3C

3. WHATWF

全称:Web Hypertext Application Technology Working Group(网页超文本应用技术工作小组)成立于2004年,是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果, 等这些浏览器厂商组成。官网:Web Hypertext Application Technology Working Group (WHATWG)

HTML 入门

1. HTML 初体验

  1. 第一步:鼠标右键 => 新建 => 文本文档 => 输入内容,并保存。

  2. 第二步:修改后缀为 .html ,然后双击打开即可。

  3. <!--这里的后缀名,使用 .htm 也可以,但推荐使用更标准的 .html 。-->

  4. 程序员写的叫 源代码,要交给浏览器进行渲染。

  5. 借助浏览器看网页的 源代码,具体操作: 在网页空白处:鼠标右键 ==> 查看网页源代码

2. HTML 标签

  1. 标签 又称 元素,是HTML的基本组成单位。

  2. 标签分为:双标签单标签 (绝大多数都是双标签)。

  3. 标签名不区分大小写,但推荐小写,因为小写更规范。

  4. 双标签:

  1. 单标签:

  1. 标签之间的关系:并列关系、嵌套关系,可以使用 tab 键进行缩进:

3. HTML 标签属性

  1. 用于给标签提供 附加信息。可以写在:起始标签单标签中,形式如下:

  1. 有些特殊的属性,没有属性名,只有属性值,例如:

<input disabled>
  1. 注意点:

  1. 不同的标签,有不同的属性;也有一些通用属性。

  2. 属性名、属性值不能乱写,都是W3C规定好的。

  3. 属性名、属性值,都不区分大小写,但推荐小写。

  4. 双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号。

  5. 标签中不要出现同名属性,否则后写的会失效,例如:

4. HTML 基本结构

  1. 在网页中,如何查看某段结构的具体代码?—— 点击鼠标右键,选择“检查”。

  2. 【检查】 和 【查看网页源代码】的区别:

    1. 【查看网页源代码】看到的是:程序员编写的源代码。

    2. 【检查】看到的是:经过浏览器 “处理” 后的源代码。

      备注:日常开发中,【检查】用的最多。

  3. 网页的 基本结构 如下:

    1. 想要呈现在网页中的内容写在 body 标签中。

    2. head 标签中的内容不会出现在网页中。

    3. head 标签中的 title 标签可以指定网页的标题。

    4. 图示:

    5. 代码:

      <html><head><title>网页标题</title></head><body>......</body>
      </html>

5. HTML 注释

  1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见。

  2. 作用:对代码进行解释和说明。

  3. 写法

        <!-- 这是注释 -->
  1. 注释不可以嵌套,以下这么写是错的(反例)。
        <!--我是一段注释<!-- 我是一段注释 -->-->

6. HTML 文档声明

  1. 作用:告诉浏览器当前网页的版本。

  1. 写法:

    • 旧写法:要依网页所用的HTML版本而定,写法有很多。

      具体有哪些写法请参考 :W3C官网-文档声明(了解即可)

    • 新写法:一切都变得简单了!W3C 推荐使用 HTML 5 的写法。

            <!DOCTYPE html>或<!DOCTYPE HTML>或<!doctype html>
  1. 注意:文档声明,必须在网页的第一行,且在 html 标签的外侧。

7. HTML 字符编码

  1. 计算机对数据的操作:

    • 存储时,对数据进行:编码

    • 读取时,对数据进行:解码

  1. 编码、解码,会遵循一定的规范 —— 字符集

  2. 字符集有很多中,常见的有(了解):

    1. ASCII :大写字母、小写字母、数字、一些符号,共计128个。

    2. ISO 8859-1 :在 ASCII 基础上,扩充了一些希腊字符等,共计是256个。

    3. GB2312 :继续扩充,收录了 6763 个常用汉字、682个字符。

    4. GBK :收录了的汉字和符号达到 20000+ ,支持繁体中文。

    5. UTF-8 :包含世界上所有语言的:所有文字与符号。—— 很常用

  1. 使用原则是怎样的?

    原则1:存储时,务必采用合适的字符编码 。

    否则:无法存储,数据会丢失!

    原则2:存储时采用哪种方式编码 ,读取时就采用哪种方式解码。

    否则:数据错乱(乱码)!

  1. 总结:

  • 平时编写代码时,统一采用 UTF-8 编码(最稳妥)。

  • 为了让浏览器在渲染 html 文件时,不犯错误,可以通过 meta 标签配合 charset 属性指定字符编码。

        <head><meta charset="UTF-8"/></head>

8. HTML 设置语言

  1. 主要作用:

    让浏览器显示对应的翻译提示。

    有利于搜索引擎优化。

  1. 具体写法:

        <html lang="zh-CN">
  1. 扩展知识: lang 属性的编写规则(了解即可)。

    1. 第一种写法( 语言-国家/地区 ),例如:

      zh-CN :中文-中国大陆(简体中文)

      zh-TW :中文-中国台湾(繁体中文)

      zh :中文

      en-US :英语-美国

      en-GB :英语-英国

    2. 第二种写法( 语言—具体种类)已不推荐使用,例如:

      zh-Hans :中文—简体

      zh-Hant :中文—繁体

9. HTML标准结构

  • HTML标准结构如下:

        <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我是一个标题</title></head><body></body></html>
  • 在VScode中输入 ! ,随后回车即可快速生成标准结构。

  • 配置 VScode 的内置插件 emmet ,可以对生成结构的属性进行定制。

  • 在存放代码的文件夹中,存放一个 favicon.ico 图片,可配置网站图标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/624439.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字化社交的引擎:解析Facebook的影响力

Facebook&#xff0c;作为全球最大的社交媒体平台&#xff0c;已经深深地融入了我们的日常生活和文化中。它不仅仅是一个简单的社交工具&#xff0c;更是一个复杂的数字生态系统&#xff0c;影响着我们的社交模式、文化认同以及信息获取方式。在这篇文章中&#xff0c;我们将深…

企业用户管理passwd/sudo工作原理/chage/用户组/切换用户及提权管理/chown知识详谈-6000字

passwd 用户自己给自己设置密码&#xff1a;直接passwd root用户给普通用户设置密码&#xff1a;passwd用户名 stdin 从标准输入获取信息 批量创建用户&#xff1a; bash脚本&#xff1a; for n in {01…10} do useradd wulin$n done n先取01然后循环&#xff0c;再取再执行…

c++入门 命名空间

文章目录 C入门命名空间域作用限定符域作用限定符操作C的域编译器的搜索原则命名空间域的展开命名空间的嵌套 C入门 命名空间 命名空间的存在&#xff1a;为了解决同域中起名字冲突的问题 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、…

Trl SFT: llama2-7b-hf使用QLora 4bit量化后ds zero3加上flash atten v2单机多卡训练(笔记)

目录 一、环境 1.1、环境安装 1.2、安装flash atten 二、代码 2.1、bash脚本 2.2、utils.py 注释与优化 2.3、train.py 注释与优化 2.4、模型/参数相关 2.4.1、量化后的模型 2.4.1.1 量化后模型结构 2.4.1.2 量化后模型layers 2.4.2、参数 2.4.2.1 training args 2.4.2.2 pe…

Qt | 事件第二节

Qt | 事件第一节书接上回 四、事件的接受和忽略 1、事件可以被接受或忽略,被接受的事件不会再传递给其他对象,被忽略的事件会被传递给其他对象处理,或者该事件被丢弃(即没有对象处理该事件) 2、使用 QEvent::accept()函数表示接受一个事件,使用 QEvent::ignore()函数表示…

记一次Mysql数据库宕机This could be because you hit a bug.

Hi I’m Shendi 今天收到消息说所有软件不能用了&#xff0c;网页都打不开&#xff0c;遇到了问题&#xff0c;于是在这里记录一下 记一次Mysql数据库宕机This could be because you hit a bug. 起因 为了节省成本&#xff0c;对于小公司而言服务器数量通常不会太多&#xff…

2024年面试工具篇Postman面试题及答案

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

WIN7用上最新版Chrome

1.下载WIN10最新版Chrome的离线安装包 谷歌浏览器 Chrome 最新版离线安装包下载地址 v123.0.6312.123 - 每日自动更新 | 异次元软件 文件名称&#xff1a;123.0.6312.123_chrome_installer.exe。 123.0.6312.123_chrome_installer.exe 文件右键解压缩得到 chrome.7z&#x…

App Inventor 2 构建多屏幕App的最佳实践

导读 本文源自AppInventor2中文网&#xff08;https://www.fun123.cn&#xff09;文档&#xff0c;系英文原版翻译&#xff0c;主要倡导开发拥有多个屏幕的App时&#xff0c;建议在一个屏幕上拖动多个布局组件&#xff08;水平or垂直布局&#xff09;&#xff0c;用代码块通过“…

500以内的不入耳运动耳机推荐,首推五大业内顶级优品

不入耳式运动耳机因其独特的佩戴方式和设计&#xff0c;能够在运动过程中保持对周围环境的警觉&#xff0c;避免因音乐沉浸而忽视潜在的安全隐患&#xff0c;同时它们还能有效减少对耳道的压迫&#xff0c;让运动更加舒适自在&#xff0c;接下来&#xff0c;就让我为大家推荐一…

JavaEE:HTTP协议

基本内容 网站 后端&#xff08;HTTP服务器&#xff09; 前端&#xff08;浏览器&#xff09;&#xff0c;而后端和前端都需要遵循HTTP协议 HTTP属于超文本传输协议&#xff0c;存在于应用层 文本&#xff1a;一般能在utf8或者gbk上找到的合法字符串 超文本&#xff1a;不仅…

CC工具箱使用指南:【获取相邻四至信息(L丶s丶M)】

一、简介 群友定制工具。 这个功能适用面相对比较广。说起来也很简单&#xff0c;就是把一个宗地或地块的四至信息抄录到给定的字段中。 要处理的要素可以是宗地图&#xff0c;也可以是用地图。这里以宗地图为例&#xff1a; 需要做的是&#xff0c;将每地块宗地的东西南北4…