欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML入门必看

程序员文章站 2024-02-02 22:11:04
...

目录

HTML入门笔记1

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>

类似于如下效果：
HTML入门必看

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>

可以用来表示一本书或文章的层级。效果如下：
![avatar][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>

效果如下
![avatar][jiegou]

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

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>

效果如下
![avatar][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>

效果如下：
![avatar][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被隐藏后的效果，可以和上面对比一下：
![avatar][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>

效果如下：
![avatar][style]

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>

效果如下：
HTML入门必看

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>

效果如下：
HTML入门必看

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，即描述列表 -->

效果图如下

HTML入门必看

5.2 em和strong,强调

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

代码如下

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

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

效果图如下
HTML入门必看

5.3 hr和br

  • <hr>是水平分割线，类似于这样
  • <br>是换行，类似于<br>
    这样

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>
<!--           这样我就可以保留格式写代码了 -->

效果图如下

HTML入门必看

5.5 quote和blockquote

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

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

效果图如下
HTML入门必看

5.6 a标签

a标签是超链接

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

类似于这样 我的博客。

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

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


–continue

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

欢迎留下您宝贵的意见。

HTML入门必看

相关标签： HTML入门笔记 html+CSS html css

上一篇： 06 Android系统之添加java层系统服务

下一篇： jQuery扩展方法实现Form表单与Json互相转换的实例代码

推荐阅读