HTML入门总结

上一篇介绍了入坑的整个思想过程,从这篇开始就开始介绍一下我的学习过程了,主要是为了保证宝宝们对技术更好的理解,我会按照自己的理解来讲各种技术,前期就是三座大山的基础,可能比较简单,不要感觉枯燥无聊哦,后面会变得愈发有技术含量呢。各帖子主要是自己对技术的理解,如果有不对的地方,还请指出,共同进步~~

那么这一篇就从HTML开始,现在的网站一般都采用HTML5,所以这里也会介绍HTML5!

首先呢,先介绍一下到底啥是HTML,HTML翻译过来就是超文本标记语言,是一种创建网页的标准标记语言而非编程语言,说白了就是用来创建网站,通过浏览器解析运行的语言。一个html文档中,必须存在的是

(1)声明,通过声明说明是html文档,html5的声明变得更简单,只需要<!DOCTYPE html>即可;

(2)<html>标签,用来包裹整个页面;

(3)<head>标签,用来包裹文档的元数据信息(meta信息,后面会单独出一期总结meta标签)、title、引入的库等;(4)<body>用来包含整个页面的可见内容,这就是编写页面的时候的主要工作量所在,在浏览器中运行下面的代码即可得到一个html页面。是不是很简单呢~~

关于编辑器来说呢,门槛非常低,随便一个记事本都行,但是为了高效开发,比较推荐VScode,真的很强大而且不收费,很多语言都兼容的。

下面我们就可以开始编辑HTML,HTML页面由不同元素组合而成,在写法上,HTML元素可以分为两种,一种是通过开始标签起始、结束标签终止;一种是通过标签开始,通过/>终止。其实HTML对于元素的要求不是很严格,即使都是<div>一层层包裹在大多数情况下也可以达到效果,但是阅读性会很差。这里给大家列举一些常用的元素:

了解了元素之后,要了解的就是属性了,属性能够为元素提供附加信息,最常用的属性包括class, id, style, title, etc.属性一般通过key=value键值对的形式出现,写在起始标签中。最普遍的class、id,没有这两者,css很难定位到元素,js很难触发动作。对于元素以及属性我就不一一介绍了,使用方法已经介绍过,使用的时候大家可以自行翻阅书籍或查询文档。

下面要介绍的是元素类型,这也是面试中常常会被考到的点。HTML元素笼统分为两类,即块级元素及内联元素。

(1)块级元素:

  • 独霸一行
  • 高度,行高以及外边距和内边距都已通过width、height、margin、padding设置;
  • 没有设定一个宽度的时候,宽度缺省默认是它的容器的100%。
  • 它可以容纳内联元素和其他块元素

(2)内联元素:

  • 内联元素之所以叫内联是因为它和其他元素都在一行上;
  • 高,行高及外边距和内边距不可改变,因此设置width、height、上下margin、上下padding都是无效的,但是左右margin和padding是有效的哟;
  • 宽度就是它的文字或图片的宽度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

常见的块级元素有<h1>-<h6>, <p>, <ul>, <div>, <table>等,常见的内联元素有<b>, <td>, <span>, <a>, <img>等。这里有个特殊的元素是<img>虽然是块级元素但是确能够设置width、height等,因为它是行内块级元素。

HTML也可以用来布局,当没有css却想对页面进行简单排版的时候就可以采用HTML的布局,比如表格布局,通过绘制一个表格,将所有内容插入表格中,通过表格的行列进行布局;通过<div>的嵌套进行布局等方法,当然想要做出美美的页面还是离不开CSS的~~

相比于传统的HTML各种版本,HTML5有着自己的一些特性(不过其实有的时候也分的不是那么详细,除了html5删除的标签注意不要使用,其他我觉得也还好,再就是html5新增的一些标签用起来很顺手,虽然说不使用也能出来效果):

1)更加语义化:新增语义元素,比如对于一个页面的不同区域使用<div>标签可以实现布局,但是在html5中,头部使用<header>,尾部使用<footer>,页面侧边栏使用<aside>等,这大大的增强了代码的阅读性,常见的语义元素有:<article>, <aside>, <figure>, <footer>, <mark>, <nav>, <progress>, <section>, <time>等。

2)对于表单加入了新的输入类型、以及自动验证。

3)HTML5对CSS3有更好的支持,比如新的选择器、属性、动画、转换、圆角、阴影效果等。

4)对于做图形绘制方面,以前html一般使用flash,在html5中对canvas以及svg有了更好的支持,做数据可视化的最常规库如D3.js、ECharts等便是基于此进行开发。

5)HTML5对于多媒体的支持也有了改进,新添了<video>, <audio>标签。

6)最后就是HTML5的本地存储,支持本地数据存储、访问本地文件等。

7)哦对了,很重要的是<!DOCTYPE html>声明变了哟!

基本上,了解以上内容已经足够我们进行一个简单的页面开发了,要想页面变得美美哒,还请关注下期CSS入门总结~~~

原文发布于微信公众号 - 萌兔it(mengtu_it)

原文发表时间:2019-02-11

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券