专栏首页Devops专栏html概述和基本结构 - html的helloworld

html概述和基本结构 - html的helloworld

仅供学习,转载请注明出处

html概述

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<html>”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响,它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。 此版本文档用sublime text创建方法: html:xt + tab 文档示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>

html5

pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的 此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab 文档示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文档类型 </title>
</head>
<body>

</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释:

html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释  -->

编写一个hello.html

<!DOCTYPE html>
<html>
<head>
    <title>hello world</title>
</head>
<body>
    <h1>hello word</h1>
</body>
</html>

在浏览器展示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django 2.1.7 模板 - HTML转义

    Django 2.1.7 创建应用模板 Django 2.1.7 配置公共静态文件、公共模板路径 Django 2.1.7 模板语言 - 变量、标签、过滤器...

    Devops海洋的渔夫
  • 4. Vue - 插值表达式、v-text、v-html的基本使用

    前面的篇章Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题,那么这里面也介绍了插值表达式的使用。

    Devops海洋的渔夫
  • JavaScript 函数传参、以及 返回值 return关键字

    Devops海洋的渔夫
  • Ajax请求SpringMVC Json数据报错Http 400(一)

        最近在完善博客的过程中,发现了一些细节问题。后台使用的是SpringMvc,前台使用的是jquery请求。之前后台采用的是

    幽鸿
  • react native使用WebView加载本地html部署方案

    十里桃花舞丶
  • 详解::root 4

    核心:html文档的所有标签颜色为red,必须和html结合使用,或者前面没写html也,默认也是html

    用户7873631
  • 为了不复制粘贴,我被逼着学会了JAVA爬虫

    受疫情影响一直在家远程办公,公司业务进展的缓慢,老实讲活并没有那么多,每天吃饭、睡觉、逛技术社区、写博客,摸鱼摸得爽的很。早上本来还想在来个回笼觉,突然部门经理...

    程序员内点事
  • 生信人的R语言视频教程-语法篇-第十一章:R中的网络爬虫

    用任何语言做爬虫必须要了解的就是网页语法,网页语言无非就是HTML,XML,JSON等,因为正是通过这些我们才能在网页中提取数据,过多的就不再描述,大家可以自行...

    DoubleHelix
  • 为了不复制粘贴,我被逼着学会了JAVA爬虫

    受疫情影响一直在家远程办公,公司业务进展的缓慢,老实讲活并没有那么多,每天吃饭、睡觉、逛技术社区、写博客,摸鱼摸得爽的很。早上本来还想在来个回笼觉,突然部门经理...

    程序员内点事
  • 爬取网站文章将图片保存到本地并将HTML的src属性更改到本地

    每次当你爬取一篇文章时,不管是从csdn或者其他网站,基本内容都是保存在一个富文本编辑器中,将内容提取出来还是一个html,保存之后图片还在别人...

    andrew_a

扫码关注云+社区

领取腾讯云代金券