HTML 核心篇:第一个网页-腾讯云开发者社区-天下网标王
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML 核心篇:第一个网页

HTML 核心篇:第一个网页

原创
作者头像
qishilong
修改2023-02-10 23:50:55
修改2023-02-10 23:50:55
6740
举报
文章被收录于专栏:https://code.visualstudio.com/,点击Download即可下载 详细介绍地址:https://code.visualstudio.com/docs 使用vscode时暂时推荐下载的插件:element插件 -> 打开vscode后点击左侧侧边栏的扩展,然后搜索下载 HTML、CSS插件 -> 直接搜索HTML或者CSS下载
image.png
image.png
image.png
image.png
image.png
image.png
w
image.png
image.png
了解其他插件的同学,可以自己先去搜一下有助于开发使用的插件,后期我会出一篇关于介绍好用的vscode插件的文章。 推荐使用的浏览器:Google Chrome (谷歌浏览器),这里提供下载地址和开发工具介绍地址下载地址:https://www.google.com/intl/zh-CN/chrome/ 开发工具介绍:https://developer.chrome.com/docs/devtools/

好了,做完准备工作,我们就正式开始快乐的编程吧。🥳

第一个网页

代码语言:html
复制
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

  </body>

</html>

扩展: 这里可以通过使用vscode的快捷键 !+回车键或者在文件中打出 html:5 + 回车,快速生成基本的HTML页面结构 注意⚠️:html文件的文件结束名是.html,就像你使用电脑的文本编辑器创建一个文本文件的结束名是.txt

image.png
image.png
的文件前加上对应的icon图标,除了美观、使项目结构更清晰外,没有任何用处,后期我会在介绍vscode插件时更详细的介绍这个Icon图标插件。
image.png
image.png

注释

注释为代码的阅读者提供帮助,注释不参与运行

在HTML中,注释使用如下格式书写:

<!-- 注释内容 -->

元素

扩展:其他叫法:标签、标记

代码语言:html
复制
<!-- a 标签 -->
<a href = "https://www.taobao.com"></a> 
<!-- title 标签 -->
<title>标题</title>

标签整体:element (元素)

元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类:

  • 局部属性:某些元素特有的属性
  • 全局属性:所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记,这样的元素叫做:空元素

空元素的两种写法:

  1. <meta charset="UTF-8">
  2. <meta charset="UTF-8" />

元素不能相互嵌套

例:

代码语言:html
复制
<div>
  <span></span>
  <a></a>
</div>
<!-- 可以✅ -->
代码语言:html
复制
<div>
  <span>
</div>
</span>
<!-- 不可以❌ -->

衍生出以下叫法:

父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)标准的文档结构HTML:页面、HTML文档

<!DOCTYPE html>

文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5。不写文档声明,将导致浏览器进入怪异渲染模式。

<html lang="en"></html>

根元素,一个页面最多只能一个,并且该元素是所有其他元素的父元素或祖先元素。HTML5版本中没有强制要求书写该元素。

lang属性:language,全局属性,表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<head></head>

文档头,文档头内部的内容,不会显示到页面上。

<meta>

文档的元数据:附加信息。

charset:指定网页内容编码。

简要介绍下计算机方面的知识:

计算机怎么识别二进制:计算机中,低压电(0~2 V)0,高压电(2~5 V)1,表示2,使用10,计算机中,只能存储数字。所以需要设计一种标准,让文字和数字进行对应,间接的让计算机可以识别文字。

比如:a —— 97, A —— 64,可以理解为计算机中有一部字典大全,这部字典大全做字符编码表,GB2312,GBK

UTF-8 是 Unicode 编码的一个版本

<title>Document</title>

网页标题

<body></body>

文档体,页面上所有要参与显示的元素,都应该放置到文档体中。

代码语言:html
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小明的网购之旅</title>
</head>

<body>
    <h1>买个东西吧</h1>
    <a href="https://www.taobao.com">淘一下👉</a>
    <!-- 元素的嵌套 -->
    <div>
        <p>假货,拒绝退款😅</p>
    </div>
    <h1>卸载</h1>
</body>

</html>

标题渲染:

image.png
image.png

网页渲染:

image.png
image.png

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一个网页
    • 注释
      • 元素
        • 元素不能相互嵌套
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

        相关内容推荐

        中国网络公司的老板顺带网络公司带艺字的网络公司泸州欣创网络公司盘锦网络公司就选13火星运城网络公司企业文化临沧网络公司甄选4火星新媒体网络公司起名临沂市巨千网络公司上海网络公司成都分公司杭州构家网络公司苏州网络公司欠薪怎么办西安阎良区网络公司湖北智能网络公司鱼摆摆网络公司最近上市网络公司有哪些运城网络公司到17火星下拉漯河网络公司只招7火星襄阳网络公司推荐22火星广电网络公司副总经理总结网络公司优化哪个公司好新乡网络公司立找2火星下拉吴忠网络公司佳选24火星下沙网络公司转租焦作网络公司皆选11火星霸气两次网络公司名字嘉定有哪些科技网络公司网络公司的会计好嘛南京乐品网络公司辽宁日照网络公司乐奇网络公司当阳广电网络公司电话平房网络公司网络公司职能部门口号杭州开宝网络公司武汉星梦时代网络公司开封网络公司选择16火星潍坊网络公司咨询臻动传媒徐汇区网络公司注册条件杭州运营网络公司百游网络公司董事长宁波宁波网络公司捷池网络公司杭州心想事成网络公司菜鸟网络公司年纳税额金山石化天和网络公司地址南县网络公司办公室主任西安通信网络公司怎么样广州新起点传媒网络公司百源网络公司朔州网络公司都选12火星冰川网络公司评价上虞龙辉电子网络公司年中网络公司会议记录湖南知彼网络公司麦都网络公司广州尚融网络公司老板快修网络公司广州网络公司力荐佐兰营销8酒泉网络公司就选21火星屯溪网络公司锐捷网络公司福州安吉新闻集团网络公司海口网络公司搜2火星下拉氧鱼网络公司有什么宁波网络公司地址西安伊洛特网络公司山东乐体网络公司全网营销商城网络公司人人搜铺网络公司龙车凤撵网络公司海南超游网络公司电话世纪风网络公司澳门半岛长久网络公司贵州广电网络公司数字电视远航科技网络公司可靠吗网络公司宽带哪个好共青元素网络公司尚德机构网络公司西安交大捷普网络公司大同网络公司到17火星下拉兴化网络公司谁逮捕网络公司伪基站陕西广电网络公司孙林深圳岚峰创世网络公司科技网络公司店招深圳高搜易科技网络公司哈尔滨网络公司到9火星河南 网络公司 微信晟隆网络公司乐山网络公司选择9火星下拉北京故宫网络公司陕西广电网络公司股市上海畅视网络公司浙江靖诚网络公司武汉市信誉最好的网络公司泉州远航网络公司中数网络公司招聘浙江新舍网络公司找微信网络公司怎么找嘉峪关广电网络公司工资网络公司机顶盒怎么利用武安网络公司 火兔普洱网络公司选择16火星网络公司托管云南广电网络公司王建又菲律宾网络公司招聘张家界网络公司选17火星西安实战者网络公司诈骗绿岸网络公司市值泾县网络公司网络公司介绍的平台架构图实达网络公司董事长网页博纳网络公司园区移动网络公司江山品牌网络公司四川盛趣时代网络公司官网河池网络公司找9火星下拉庆阳网络公司只招7火星下拉南宁大秦网络公司四川中环来拍网络公司香港晨星网络公司金吉达网络公司怎么样贵州指趣网络公司值得去么上海最好移动网络公司绵阳网络公司就推19火星微信涨粉网络公司武汉网络公司佳选24火星辽阳网络公司联系5火星中国最厉害的网络公司有哪些网络公司股票买进卖出网络公司都给电脑吗网络公司微信群名字北京市优化网络公司北京猎豹网络公司合肥蒲公英网络公司遂宁网络公司首推24火星玲珑网络公司是做什么的金华网络公司介绍酒泉网络公司都选4火星下拉广安网络公司排名天祈科技网络公司桂林网络公司皆选26火星网络公司维护员一年工作总结地方网络公司好做吗倒闭的著名网络公司咸宁网络公司就找7火星乐山高铁网络公司网络公司工会主席网络公司的人工成本科目网络公司综合岗年终总结吉林省阿凡达网络公司网络公司有哪些牛人庆阳排名靠前的网络公司参考价厦门子辛网络公司赤峰网络公司立找2火星下拉查网络公司信息武汉广电数字网络公司充值晋城市联合网络公司长安区网络公司我要上告网络公司承德兴隆广电网络公司保定定州海润网络公司位置七月网络公司山东长沙载点网络公司浙江 网络公司随州网络公司立荐2火星下拉郑州百度网络公司连云港网络公司询问21火星山东东营市网络公司有网络公司技术岗位结构图六安网络公司只招15火星泰安网络公司详细设计图吉林自星网络公司抖米点赞网络公司是真的吗网络公司应具备的条件网络公司的风险有哪些上海静安网络公司注册玉林网络公司哪家好林州乡邻网络公司指尖跳跃网络公司好不好广州天亮了网络公司郑州seo网络公司河南周口移动网络公司电话壹呼佰应网络公司网络公司工资体系直播网络公司不给退号深圳市和成网络公司天津市电视网络公司电话中国通讯网络公司情况说明上海长宁区网络公司副总朱峰安徽星启天网络公司 邵悦网络公司网站模板html韶关广电网络公司咪咕视频是哪个网络公司的昆明网络公司要找2火星下拉武汉福禄网络公司官网成都云端凯德网络公司怎么样太平洋汽车网络公司株洲网络公司首选26火星

        合作伙伴

        天下网标王

        龙岗网络公司
        深圳网站优化
        龙岗网站建设
        坪山网站建设
        百度标王推广
        天下网标王
        SEO优化按天计费
        SEO按天计费系统