HTML基础

*爱你&永不变心* 提交于 2020-03-27 19:31:53

HTML是什么?官方给出的答案:超文本标记语言。很多人看了这个解释后,还是懵了。其实也没有这么复杂,你直接把HTML理解成是浏览器能识别的语言就行了。

第一个例子

新建index.html,并输入以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

这个就是最简单的html结构

代码说明

1、 所有的HTML文档都应该有一个<html>标签
2、 <html>标签可以包含两个部分:<head>和<body>
3、 <head>标签包含整个文档的一般信息,比如:title、meta、link等
4、 页面上能看到的内容都是放在<body>标签里

标签介绍

1、 有些标签是成对形式出现,有些是自闭合形式出现。如:<div></div>、<meta charset="UTF-8" />等
2、 究竟哪些标签是成对出现,哪些是自闭合,这就需要平时我们死记了
3、 根据换行效果,可把标签元素划分为:行内元素和块级元素

块级元素

  • div - 常用块级容易,也是css layout的主要标签

  • p - 段落

  • ul - 非排序列表

  • table - 表格

  • h1 - 大标题

  • h2 - 副标题

  • h3 - 3级标题

  • h4 - 4级标题

  • h5 - 5级标题

  • h6 - 6级标题

  • form - 交互表单

  • hr - 水平分隔线

  • pre - 格式化文本

  • dl - 定义列表

  • ol - 排序表单

div元素

<!-- div元素 -->
<div class='header'>
  <div></div>
  <div></div>
</div>

段落元素

<!-- p元素 -->
<p>这是一个段落</p>

列表元素

<!-- 列表元素 -->
<ul>
 <li>Coffee</li>
 <li>Milk</li>
</ul>

浏览器效果:

  • Coffee

  • Milk


有序列表元素

<!-- 列表元素 -->
<ol>
 <li>Coffee</li>
 <li>Milk</li>
</ol>

浏览器效果:

  1. Coffee

  2. Milk


行内元素

  • a - 锚点

  • br - 换行

  • cite - 引用

  • code - 计算机代码(在引用源码的时候需要)

  • em - 强调

  • i - 斜体

  • img - 图片

  • input - 输入框

  • kbd - 定义键盘文本

  • label - 表格标签

  • select - 项目选择

  • small - 小字体文本

  • span - 常用内联容器,定义文本内区块

  • strong - 粗体强调

  • textarea - 多行文本输入框

HTML5新增标签

  • header - 定义一个页面或一个区域的头部

  • footer - 定义一个页面或一个区域的页脚

  • nav - 定义导航链接

  • section - 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

  • article - 定义独立的内容,如论坛帖子、报纸文章、博客条目、用户评论等内容

  • aside - 定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容

  • audio - 定义音频内容,如音乐或其他音频流

  • canvas - 定义图形,如图表和其他图像

  • aside - 定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容

  • command - 标记定义一个命令按钮,比如单选按钮、复选框或按钮

  • datalist - 定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,用来定义 input 可能的值

  • details - 用于描述文档或文档某个部分的细节。

  • embed - 定义外部的可交互的内容或插件。

  • figure - 定义一组媒体内容(图像、图表、照片、代码等)以及它们的标题

  • hgroup - 定义文件中一个区块的相关信息,使用 hgroup 标签对网页或区段(section)的标题进行组合

  • mark - 定义有标记的文本。请在需要突出显示文本时使用此标签。

元素的属性

元素的属性就是元素本身的东西。格式:属性名='值'。属性间用空格分开。

<div id='main' class='container' data-url='http://www.aa.com/p/589963/' data-name='主容器'></div>

说明

1、html属性分为:标准属性和用户自定义属性。
2、标准属性是由系统定义的, 比如:id、class、style、title。
(注意:base、head、html、meta、param、script、style 以及 title 元素等元素没有前面的属性。)
3、自定义属性是由用户自己定义,只要符合属性的格式就会生效。
在HTML5中添加了data-*的方式来自定义属性。比如:data-name='主容器'

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!