HTML快速全解—HTML入门笔记1

·  阅读 455

      很荣幸,笔者小剑将在今天开始写博客,以记录学习过程中的一些知识和问题,欢迎一起讨论!

(声明:本文图片 部分来自网络 以下不再一 一声明)

第一节 HTML 这玩意是谁发明的?

我们都知道HTML是一种超文本标记语言,这玩意其实在网站的后台对应着成对的元素标签,每个标签对应着不同的表示。按一下你键盘的F12,就可以清晰的看见 这些代码究竟是什么玩意

问题1:这玩意谁发明的?

没错就是图片上的这位仁兄,其名曰:

Tim Berners-Lee

(本来因为他已经挂了,没想到还是这么年轻。。)

他做了什么?

WWW就是万维网World Wide Web 中文直译就是:像世界那么大的网

WWW=URL+HTTP+HTML

其实,他就是想让本地开发的HTML文本显示让全世界的人都能看到,他做了一件事 WWW,其实 就是让每个人输入地址就能看到网页,就是这么简单。

  1. 当世界上没有网址,这家伙发明了URL
  2. 当世界上没有网页,这家伙发明了HTML
  3. 为了让这一套系统更加完善 ,他发明了HTTP

第二节 HTML起手式与代码的快速编写

了解了这个创始人,下面我们快速进入编码阶段 先都来看看 这个网站的代码架构大概是什么样子的?

将从以下几个方面快速展开。

  1. 常用的表章节的标签有哪些,分别是什么意思(h1~h6、section、article、main、aside 等等)
  2. 全局属性有哪些
  3. 常用的内容标签有哪些,分别是什么意思(a、strong、em、code、pre 等等)

常用的表章节的标签有哪些,分别是什么意思?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小剑的前端笔记</title>
</head>
<body>
    <main>
    <header>放在头部的标签 比如 可以放 导航栏 欢迎语</header>
    <h1>调节文章的标题大小 h1-h6 逐级递减</h1> 
    <section> 第x章</section>
    <article>
        文章部分
        <p>段落标签</p>
    </article>
    <div> div就是一块区域的划分 你可以把他想象成地皮,上面的section article footer 和headr 其实都说是div本质上来说,但是写成那样方便阅读代码</article></div>
    <aside>旁边内容 可能是网站左边或者右边的某一块区域 通过属性可以设置哦</aside>
    <footer>尾部 一般写  XXX版权归XX所有</footer>
     </main>
    
    
</body>
</html>
复制代码

显示的效果就跟上面一样 div就是一块地皮 一块区域的划分。

全局属性有哪些?

所有的标签都可以加上这些个 所谓的属性 然后产生一些动态或者静态的效果

class 表示一个类 比如

那这一块区域的地皮都是XX这个人的 以后我们对XX进行配置一些样式就可以操作这个class

id 唯一的标签类 实际上 存在多个也是可以的,上面的是大类 id就是专属的比如个人 某家公司

hidden 添加这个属性后 某块元素区域将会消失

style

在标签中就可以设置这个里面字体的颜色 比如红色 但是后面的css统一设置更方便

tabindex 按住tab键就可以在浏览器中跳过这些个块 其中他的值为0的时候是最后一个跳过去 -1的时候代表的是flase永远也选不中 1的时候是第一个选择按tab

title 设置了这个之后 触碰某段文字或图片下面会有一个吐丝 解释内容用

常用的内容标签有哪些,分别是什么意思?

ol+li 有序列表 包在这里面的段落带 1 2 3

ul+li 无序列表 包在这里面的段落不带 1 2 3 可能是点

dl+dt+dd dl相当于是一个段落列表 里面的标题就是dt dd 就是内容

hr 这个标签是下划线

br 这个标签是换行

a 超链接用的 放一个网址 人家点击就可以进去

em 加强字体 斜体

strong 加粗

code 这里面的代码会被识别 并且等宽

q+blockquote 块元素 q是块内的内联显示 好比段落p在div

今天的学习就到这里下课,有疑问或对前端感兴趣的可以加我qq782877160 注明备注

分类:
前端
标签: