HTML入门笔记1

最新推荐文章于 2023-07-18 21:35:28 发布

新猿人

最新推荐文章于 2023-07-18 21:35:28 发布

阅读量216

点赞数 2

分类专栏： HTML入门笔记 html+CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_46383761/article/details/111342434

版权

html+CSS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML入门笔记

2 篇文章 1 订阅

订阅专栏

前端学习之旅之HTML入门笔记

i. html的历史

1.1 首先我们就先来简单了解一下html的历史。

要学习html就不可避免的接触它的历史，了解其诞生发展，才能更好地满足需求，更好地学习html。一头扎进来就学html标签属性，和知根知底地开始学习html，眼界是不一样的。

html是由Tim Berners-Lee(蒂姆·伯纳斯-李爵士)在1990年左右发明的.
html（超文本标记语言——HyperText Markup Language），是www
(万维网)的一个重要组成部分，是李爵士发明www的同时，还发明了HTML,HTTP,URL。

关于李爵士本人，感兴趣的还请查看维基百科李爵士

1.2 HTML初衷。

发明html最初的想法就是让文字更好看，更方便。

1.3 HTML从开始到现在经历了什么

从1990年左右到现在html更新迭代了好多版本，从HTML到HTML4.01,经过XHML1.0到XHTML2.0，到现在最终版的HTML 5。
从最开始简陋的18个元素到现在最新版的110个。

狭义的HTML 5指110个标签元素，广义的HTML 5指html 5和它的朋友们(包括css等)

ii. HTML起手该写什么

2.1 快捷输入

打开你的开发工具创建index.html文件，英文输入感叹号再按tab键变成了下面的代码：

如果没有开发工具可以用网页打开比如http://js.jirengu.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.2 详细解释

最开头的这段代码

<!DOCTYPE html>

表示文档类型(DOC是document音译 ‘文档’ 的缩写，TYPE是 ‘类型’ 的意思)是html。

告诉浏览器我开始写html了。

html根标签

<html lang="en">
...
</html>

html是必须要写的根标签，属性lang(language英译 ‘语言’ )=“en”,中en表示英文，如果网页想要中文一半改写成"zh-CN" (意思是中国中文)

html的两个子元素之一head

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

head里的内容是看不见的，相关样式也可以写在这里。

<meta charset="UTF-8">是指文档的字符编码为"UTF-8"。

<meta name="viewport" content="width=device-width, initial-scale=1.0">是用于防止页面缩放。·

<title>Document</title>这个是网页标题。

“UTF-8"几乎支持所有语言，“GBK” 只支持亚洲中文。一般用"UTF-8”。

html的两个子元素之一body

<body>
	...
</body>

body是身体，主体的意思，相关结构基本就写在这里

iii. 常用的表章节的标签有哪些，分别是什么意思

3.1 h1~h6，标题。

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

类似于如下效果：
biaoti

3.2 section，章节

<body>
<body>

  <h1>文章题目</h1>
  
  <section>
    <h2>第一章</h2>
    <section>
      <h3>第 1 节</h3>
      <p>我是一段话</p>
    </section>
    <section>
      <h3>第 2 节</h3>
      <p>我是一段话</p>
    </section>
  </section>
</body>

可以用来表示一本书或文章的层级。效果如下：
zhangjie

3.3 header,main,aside,footer:顶部,主要,次要,底部。

这下整个body被分为了头部，主体(主要，次要)，底部声明。

<body>
  <header>我是广告</header>
  <div>
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
        <section>
          <h3>第 2 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
      <aside>
        引用文献1，2，3
      </aside>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

效果如下

学了这些章节标签，写代码是不是更容易看懂，写文章是不是更有层次感了呢。

iv. 全局属性有哪些

全局属性即所有标签都有的属性。

4.1 class,类

class是类的意思，class属性定义了元素的类名，常用于指向style样式表的类。

这是注释：class可以空格后加多个，但是style里[class=""]就必须加引号且把class里的多个写全才会生效。表示class为"middle bordered"的元素才会让相应样式生效果。一般 ~~[class=“middle bordered”]{}~~ 了。
如下：

<head>
  <meta charset="utf-8" />
  <title>全局属性</title>
  <style>
    [class="middle bordered"]{
      background: red;
    }   
  </style>
</head>
<body>
  <header>我是广告</header>
  <div class="middle bordered">
    <!-- 这是注释：class可以加多个，
    但是style里[class=""]就必须把class里写全才会生效 -->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

一般是用下面这种.middle{ background: red; } 方式，表示class里含有middle的元素都可以使用.middle{ background: red; } 里的样式。

<head>
  <meta charset="utf-8" />
  <title>章节标签，全局属性</title>
  <style>
    .middle{
      background: red;
    }   
  </style>
</head>

<body>
  <header>我是广告</header>
  <div class="middle bordered">
    <!-- 这是注释：class可以加多个，但是style里[class=""]就必须把class里写全才会生效 -->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

效果如下

class

4.2 contenteditable,内容可编辑

contenteditable可以使任何一个元素被编辑

  <style>
    .middle{
      background: red;
    }
    

  </style>
</head>

<body>
  <header>我是广告</header>
  <div class="middle bordered" contenteditable>
    <!-- 这是注释：我在div里加了contenteditable，
    这样div里显示的内容就可以编辑 -->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

效果如下：

bianji

4.3 hidden,隐藏

  <style>
    .middle{
      background: red;
      /* 
      display: block;
      注释：我注释了display: block;
      不然div的hidden就无效了。
      */
    }
    

  </style>
</head>

<body>
  <header>我是广告</header>
  <div class="middle bordered" hidden>
    <!-- 这是注释：我在div里加了hidden，这样div里的内容就被隐藏了，-->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

这是div被隐藏后的效果，可以和上面对比一下：

hidden

4.4 id,所用元素全局唯一。

还是推荐用class。用法和class类似，只不过样式用#{}来写。id不能写含windows里有的全局属性，受限，而且多个一样的id能用同一个样式，这就不是唯一了，也不报错…

id可以和css相关
也可以和js相关，js可以直接获取id。

4.5 style

注意：这里的style不是css的样式，而是html的属性。

<head>
  <meta charset="utf-8" />
  <title>章节标签，全局属性</title>
  <style>
    .middle{
      background: red;
    }
  </style>
</head>

<body>
  <header>我是广告</header>
  <div class="middle bordered" style="background: blue;">
    <!-- 这是注释：我在div里加了style属性，
    这里属性优先级比css里优先级高，所以背景显示蓝色-->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

效果如下：

blue

js可以通过操作把style属性覆盖，如果css，html属性和js同时存在的话，最终结果以js为最终效果。

4.6 tabindex,按tab有索引

按tab有标签索引，类似登录qq的时候，qq账号填完了这时候不想用鼠标点击登录密码，这时可以选择按下tab键，然后就自动跳到登录密码了，tabindex就是实现这种的。

这里tabindex=1是第一个，tabindex=2是第二个，tabindex=200是第三个，tabindex=0是最后一个，tabindex=-1是永远也到不了的。

<head>
  <meta charset="utf-8" />
  <title>章节标签，全局属性</title>
  <style>
    .middle{
      background: red;
    }
  </style>
</head>

<body>
  <header tabindex=1>我是广告</header>
<!--   我在这里加了tabindex=1 ,第一个tab-->
  
  <div class="middle bordered" tabindex=200>
<!--     我在这里加了tabindex=200，第三个tab -->
    <main>
      <h1>文章题目</h1>
      <section>
        <h2 tabindex=2>第一章</h2>
<!--     我在这里加了tabindex=2，第二个tab -->
        <section>
          <h3 tabindex=0>第 1 节</h3>
<!--     我在这里加了tabindex=0，最后一个tab,如果有相同值，按从上到下顺序 -->
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer tabindex=-1>&copy; 版权所有</footer>
<!--     我在这里加了tabindex=-1，tab永远到不了 -->
</body>

效果如下：

tablegif

4.7 title，显示内容

鼠标移到header的内容"我是广告"时，会显示title内容,一般可以用来显示完整内容，或者图片说明等等

<head>
  <meta charset="utf-8" />
  <title>章节标签，全局属性</title>
  <style>
    .middle{
      background: red;
    }
  </style>
</head>

<body>
  <header title="一般可以用来显示完整内容，或者图片说明等等">我是广告</header>
<!--   我在这里加了title ,鼠标移到header的内容"我是广告"时，会显示title内容-->
  
  <div class="middle bordered">
    <main>
      <h1>文章题目</h1>
      <section>
        <h2 tabindex=2>第一章</h2>
        <section>
          <h3>第 1 节</h3>
          <p>我是一段话</p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; 版权所有</footer>
</body>

效果如下：

title

v. 常用的内容标签有哪些，分别是什么意思

5.1 ol,ul和dl

ol是ordered list(有序列表),ol不能含有除li之外的元素li是list item列表中的一项.

dl是description list,描述列表

dt是description term,描述概念,dd是描述内容

代码如下

          <h3>第 1 节</h3>
          
          第一节内容
          <ol>
            <li>按天应穴</li>
            <li>挤按睛明穴</li>
             <li>按揉四白穴</li>
          </ol>
<!--           这是有序列表 -->
          
          <ul>
            <li>按太阳穴轮刮眼眶。</li>
            <li>完毕</li>
          </ul>
<!--           这是无序列表 -->
          
          眼保健操
          <dl>
            <dt>有四节</dt>
            <dd>第一节按天应穴，第二节挤按睛明穴，第三节按揉四白穴，第四节轮刮眼眶。</dd>
          </dl>
<!--           这是dl，即描述列表 -->

效果图如下

ybjc

5.2 em和strong,强调

em表示语气强调,默认样式斜体,strong表示内容本身很重要.

代码如下

          <h3>第 1 节</h3>
          
          这是<em>期末考试</em>重点

          <p><strong>我是重点内容，请眼熟我</strong></p>

效果图如下
qiangdiao

5.3 hr和br

<hr>是水平分割线，类似于这样

 是换行，类似于 
这样

5.4 pre和code

不管多少空格，回车，都只能算一个空格，而<pre>可以保留原文格式，<code>是内联元素，一般用code包裹.

代码如下

          <h3>第 1 节</h3>    
          <pre>
                        pre保留了我前面的空格
          </pre>
          
          <code>
            var a=1
            console.log(a)
          </code>
<!-- code是内联元素，只能以行显示-->
          
          <pre>
            <code>
            var a=1
            console.log(a)
            </code>   
          </pre>
<!--           这样我就可以保留格式写代码了 -->

效果图如下

pre

5.5 quote和blockquote

quote是引用的意思，blockquote是块级引用，一般用blockquote

          鲁X说过：<quote>你向往的林荫大道，其实每个清晨和夜晚都挂满了白露</quote>
          <hr>
          鲁X说过：<blockquote>你向往的林荫大道，其实每个清晨和夜晚都挂满了白露</blockquote>

效果图如下

5.6 a标签

a标签是超链接

<a href="https://blog.csdn.net/weixin_46383761">我的博客</a>

类似于这样我的博客。

Ⅵ.标签和元素有什么区别

标签是由<>扩起来的对象，如<head></head>,<body></body>,大部分标签都是成对的， ,<hr>等，这些是单独出现。
元素是由一个开始的标签和结束的标签组成，用来包含某些内容。
比如我是p段落这就是一个元素。特殊标签除外。

–continue

学习前端从入门到入土，我正在路上。您的每一次浏览点赞留言收藏，就是对我学习路上最大的鼓励，一起努力吧！

欢迎留下您宝贵的意见。

qiuzan

新猿人

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML入门笔记1

目录HTML入门笔记1i. html的历史1.1 首先我们就先来简单了解一下html的*历史*。1.2 HTML初衷。1.3 HTML从开始到现在经历了什么ii. HTML起手该写什么2.1 快捷输入2.2 详细解释iii. 常用的表章节的标签有哪些，分别是什么意思3.1 h1~h6，标题。3.2 section，章节3.3 header,main,aside,footer:顶部,主要,次要,底部。iv. 全局属性有哪些4.1 class,类4.2 contenteditable,内容可编辑4.3 hid.
复制链接

扫一扫