HTML入门博客1

龚祥辉
159 阅读3分钟

前言

记录一下HTML的查阅教程：网道HTML教程（本教程完整介绍 HTML 语言的所有内容，既可以当作初学者的入门教程，也可以用作参考手册查阅语法。）

以及以及推荐自动格式化的插件推荐叫：Prettier-Code formatter（vscode搜索，可以让代码更加美观）

练习的Bin网站：js.jirengu.com

HTML是谁发明的？

HTML是由Web的发明者 Tim Berners-Lee（李爵士）和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

HTML起手式应该写什么

"#"后面是注释

<!DOCTYPE html>      #DOCTYPE表示文档类型
<html lang="en">     #html标签，lang是language的简称，表示语言，可以把en（英文）改成zh-CN（中文）
<head>
  <meta charset="UTF-8">    #表示文档的字符编码，一般不需要更改，照抄就行
  <meta http-equiv="X-UA-Compatible" content="IE=edge">   #width=device-width表示禁用缩放，兼容手机
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   # 这句话告诉IE使用最新内核
  <title>Document</title>   #标题，这个页面的主要标题
</head>
<body>
  
</body>
</html>

<head>里的内容是隐藏的，看不见的。

常用的章节标签有哪些，分别是什么意思以及如何使用

image.png

  1. h1~h6表示标题，自动加黑加粗，h1最大，h6最小，一般来说只有1个h1
  2. section表示开始了新的章节，章节划分，可以重复套用，写上结构更加清晰
  3. article表示文章内容
  4. p表示段落
  5. header表示顶部的东西
  6. footer表示底部，一般都是版权声明，版权符号是&copy；
  7. main表示主要内容
  8. aside旁支内容，不是主要内容
  9. div表示划分，这里面是一个整体

全局属性有哪些

所以标签都有的属性称之为全局属性，全局属性有class, contenteditable, hidden, id, style, tabindex, title

  1. class的意思就是给这个标签分一个类，给它一个标记，有了这个标记才能去定义<style>，如下面的<div class="middle bordered">意思是给div标记了一个middle和bordered，然后我在再去<style>里面定义middle和bordered，分别给它们加上样式，就是.middle和.bordered，如果class只定义一个：<div class="middle">的话，还有种写法就是[class=middle]{background: black;color: white},所以我自己对class的理解就是给某个标签写一个小名，再用这个小名去加样式。class一般加在<head>部分里去写

image.png

  1. 第二个全局属性contenteditable：

385edf46b803527a909d6f8626dd642.png

注意看两边的文字不一样

contenteditable可以让用户自己编辑div里面的内容，只需要在div里面加入contenteditable<div class="middle bordered" contenteditable>。也可以自己在网页上改样式，但是需要把style放在body里面，因为在head里面是隐藏的，则body才能显示，如下：

image.png

  1. hidden的作用就是让这部分的内容消失不见，写法如下： <header hidden>顶部广告</header> 这样顶部广告就消失了

  2. id不到万不得已千万不要用，因为ID这个东西它不报错。用class就够了。而且id的命名很可能和一些windows.里面的一些全局属性单词冲突，最好别用，除非你是老司机。

  3. 如果js里面有style的定义，HTML属性里面也有，CSS里面也有，那么优先级是JS > HTML > CSS

  4. tabindex的作用是用tab来代替鼠标，使网页按顺序选中目标，代码写法如下： <header tabindex=1>顶部广告</header>

<div tabindex=2 class="middle bordered">

<footer tabindex=3>&copy; 饥人谷版权所有</footer>

如果tabinde=0，那么就是最后才被选中。如果是-1，意思就是不会到这里，其他都是按顺序1-99999

  1. title的用法：文字超长，想省略并且不换行，还能描述出来，如何表示呢？如下图：

image.png

2b8b2c62537fe9e6535cb93900ddb2f.jpg

先是在header里面加一个class类，再通过style加入三行代码，再通过title="鼠标移到文本上显示的提示"下面是三行代码：

white-space: nowrap;   #不要换行的意思
text-overflow: ellipsis;   #溢出就出现省略号...
overflow: hidden;   #溢出就省略

常用的内容标签有哪些分别是什么意思（a、strong、em、code、pre 等等）

在讲这些之前，可以先把浏览器的默认样式给修改掉，因为方老师说好丑，修改的方法是：鼠标右键选检查，找到element，style里面的默认样式修改，或者你可以自己写再style里面的一串代码来修改，代码如下：

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    *::after, *::before{box-sizing: border-box;}
    h1,h2,h3,h4,h5,h6{font-weight: normal;}
    a{color: inherit; text-decoration: none;}
    ul, ol{list-style: none;}
  </style>
#以上部分叫做清除原样式
  <style>
    h1{font-size: 48px;}
    h2{font-size: 36px;}
  </style>
#以上部分叫做业务样式
</head>

常用的标签如下：

<body>

  <div>
    <main>
      更新：我真是个大帅哥
      <hr>                                #这是分割线的意思
      <h1>前端是什么</h1>

      <section>
        <h2>
          <pre>                           #pre是可以显示所有的空格和回车
          第一章：<br>                    #br是回车
         工作内容
          </pre>
        </h2>
        <p>前端每天要做的事情有</p>
        <ol>                              #ol是ordered list（有顺序的列表）ol不能含有li之外的任何元素
          <li>发邮件</li>                 #li是list item（列表中的一项）
          <li>跟产品经理撕逼</li>
          <li>写页面</li>
          <li>吃饭</li>
          <li>打lol</li>
        </ol>
        <ul>                              #ul是unordered list（没有顺序的列表）
          <li>发邮件</li>
          <li>跟产品经理撕逼</li>
          <li>写页面</li>
          <li>吃饭</li>
          <li>打lol</li>
        </ul>
        我的同事们有
        <dl>                                      #dl是description list(描述列表，用来描述一个东西)dl+
          <dt>哈哈</dt>                           #dt是description term（被描述的对象）
          <dd>大帅哥</dd>                         #dd猜测是description detailed（用什么数据来描述，用什么内容来描述）
        </dl>
        我会写 JavaScript，不信我给你写一段
        <pre>
        <p>
        访问网站<a href="http://qq.com" target="_blank">QQ</a>          #a是超链接  加上target="_blank"的意思就再开一个网页，不加就会在当前页面打开
        </p>
        <p>
         我们<strong>期末考试的重点是</strong> <em>JavaScript</em>       #em是语气强调，strong是会加粗的
        </p>
        
        欧阳修说过<quote>三上：马上 枕上 厕上</quote>                     #quote表示引用的意思
        
        
欧阳修说过<blockquote>三上：马上 枕上 厕上</blockquote>                   #blockquote表示换行的引用
        <code>                                                          #code是代码块    
var a = 1
console.log(a)
        </code>
        </pre>
        <section>
          <h3>1.1 节</h3>
          <p>一段话</p>
        </section>
        <section>
          <h3>1.2 节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy; 饥人谷版权所有</footer>
</body>

由于效果图不好截图，也没啥好看的，丑不拉几的，所以就不放了，搞完了，886

avatar
文章
阅读
粉丝