HTML丨一股脑塞给你的HTML攻略

简介: 前面讲的`JavaScript`学习基本暂时告一段落,我尽量用最简单的方式来介绍`HTML`!然后我会用一个《今天吃个啥?》为例,后期再加上`CSS`和`JavaScript`,使之成为一个完整的项目

前面讲的JavaScript学习基本暂时告一段落,我尽量用最简单的方式来介绍HTML!然后我会用一个《今天吃个啥?》为例,后期再加上CSSJavaScript,使之成为一个完整的项目。

什么是HTML?

一个正常的网页,是由JavaScriptHTMLCSS三个重要的部分组成。而HTML是用户能够在网页上直接看到的部分。它定义了网页内容的含义和结构。一个网页从头到尾,有很多个标签,一个个标签组成了整个网页,从上到下重要的几个部分就是htmlheadtitlestylebodyscript

  • html,整个网页都是由html包裹起来的,所有的其他标签都是在这里。
  • head,从翻译可以看出,这个是头部,定义了很多东西
  • title,这个就是在head当中,定义了当前网页的名称,比如我的个人博客的名称

  • style,这个就是样式标签,下一期讲CSS的时候会用到。
  • body,这个是整个网页显示的内容区域,后面讲的标签,基本上都是在里面的。
  • script,当页面需要使用JavaScript交互的时候,就需要使用这个标签。

我们将构成整个页面的标签分为两类,即行标签块标签行内块标签

行内标签

顾名思义,就是在一行内部的标签,能和其他的行内标签放在一行的,没有办法设置宽高的。

常用的标签大概有以下几个aspan,strong,u,i

  • a,这个是设置网页链接的
  • span,常用的行内标签
  • strong/b,这两个标签都是加粗文本的
  • u,给文本添加下划线的
  • i,斜体文本

块级标签

块级标签,就是每一个标签,都会占据一行,不能和其他标签在一行呆着,可以设置宽高。

常用的标签大概有div, p, li, h1, h2, h3, h4, h5, h6, form, header, hr, ol, address, article,aside, audio, canvas, dd, dl, fieldset, section, ul, video等。

  • div,常用的块级标签
  • p,显示一行文本
  • li,为ol和ul列表中的列
  • h1-h6,对应了不同大小的标题
  • form,表单,比我们常用的登录注册,都需要这个表单
  • header,页面头部
  • article,文本区域
  • aside,侧边区域
  • audio,音频,网上页面听歌都是有这个标签的
  • video,网上看的视频也是用这个标签播放
  • canvas,这个是一个比较高阶的标签,很多页面功能是必须使用这个标签才能实现

行内块标签

这个就是结合了行内标签和块级标签结合的标签,可以在一行内呆一起,同时可以设置宽高。

常用的比如,input,img,table

  • input,在网页中,能够输入的地方,都是用到了这个便签的
  • img,我们能够看到的图片,都是用这个显示或者使用image显示
  • table,表格

区别

行内标签 块级标签 行内块标签
能和其他元素待在同一行 独占一行,不和其他元素待在同一行 能和其他元素待在一行
能设置宽高 不能设置宽高 能设置宽高

今天吃个啥网页显示的例子

这一期先使用html搭建一个今天吃个啥的网页展示栗子,后面几期加上样式和交互。这个其实超级简单!!!

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>今天吃个啥?</title>
  </head>
  <body>
    <h2>今天吃个啥?</h2>
    <p>麻辣香锅</p>
    <button>开始</button>
    <img src="./bg.jpg" />
  </body>
</html>
相关文章
|
移动开发 前端开发 搜索推荐
HTML+CSS+JS 学习笔记(一)———HTML(上)
HTML+CSS+JS 学习笔记(一)———HTML(上)
124 0
HTML学习笔记(二)
HTML学习笔记(二)
52 0
|
存储 移动开发 数据可视化
HTML+CSS+JS 学习笔记(一)———HTML(中)
HTML+CSS+JS 学习笔记(一)———HTML(中)
105 0
|
移动开发 HTML5
|
移动开发 索引 HTML5
HTML5 学习笔记(下)
HTML5 学习笔记(下)
121 0
HTML5 学习笔记(下)
|
移动开发 开发者 数据格式
零基础HTML入门教程(1)——了解HTML
HTML已经经历了五次重大修改,HTML5赋予网页更好的意义和结构,HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。除了这两个部分,还有文档的类型声明,文档类型声明的作用就是告诉浏览器你用的是哪个html版本来编写的,浏览器才能成功的渲染。第二部分是“主体”,主体部分提供的是网页的主题内容,即浏览器中显示的内容。本节小结带领大家了解学习一下HTML,这一小节我们主要任务就是去了解HTML,什么是HTML,他是干什么的。
|
移动开发 IDE Java
HTML5 学习笔记(上)
HTML5 学习笔记(上)
173 0
HTML5 学习笔记(上)
|
移动开发 运维 前端开发
|
开发者
HTML初识|学习笔记
快速学习HTML初识
HTML初识|学习笔记
|
移动开发 数据安全/隐私保护 HTML5
HTML笔记5
HTML笔记5
154 0
HTML笔记5

相关实验场景

更多