饥人谷技术博客

HTML入门笔记1

2019-08-21  本文已影响20人  郑馋师

今天笔者看完了饥人谷的HTML网课，对于其又有了全新的理解。
今天笔者就来与大家分享一下。包括HTML的概述，历史以及一些常用的标签。

HTML概述

首先我们来看看维基百科上对于html的简述。

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.[2]
——————Wikipeia

简而言之就是html是一个用于开发网页的工具，世界闻名的WWW，也就是万维网，包括了URL（用于访问网站），HTML（用于开发网页）以及HTTP（用于开发网站系统），其中UTP和HTTP笔者后面的笔记将会介绍，今天先进行HTML的介绍。

HTML历史

这一段在维基百科上也有大家可以去看看，笔者就将一部分上面内容分享至此。

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[3] Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes[4] from 1990 he listed[5] "some of the many areas in which hypertext is used" and put an encyclopedia first.
The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991.[6][7] It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house [Standard Generalized Markup Language]
(https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language "Standard Generalized Markup Language") (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.[8]
—————— Wikipedia

这个李爵士竟然在兼职的时候以一己之力创造了URL，HTML，HTTP实在是吾辈之楷模。


李爵士其人

HTML的起手操作

使用vscode，只要输入一个

!

后按tab，即可完成HTML的起手工作。

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

作者将不分别对其中元素进行介绍，而是介绍新手一般需要改动的，也就是

<html lang="en">

这里一般会将en改成zh-CN,意思语言改成是中国的中文。然后body一般是页面中可视化的，head则是看不见的。知道这个细微差别就好了。

HTML常用的标签

包括但不仅限于

  <h1></h1>
    <p></p>
    <section></section>
    <header></header>
    <footer></footer>
    <main></main>
    <aside></aside>
    <div></div>

我们将一个一个介绍。

这个就是paragraph，段落的意思，你用p标签包裹着你的内容就可以实现分段。

全局属性

由于这些是一些属性而非内容，所以一般不会显示在网页上。

<div class="master piece"></div>

一般来说全局属性的写法与上面那个基本一样，都是写在<>里面的。主要的属性包括但不限于以下的。

<div class="master piece"></div>

那要如何修饰这个class呢？在css中或者是html1的style中有两个方法：

  1. [master piece]{改动内容}，这方法需要输入其完整的classname。
  2. .master {改动内容}，这里则不需要输入完整的classname，但会将classname中含有master的class全部改掉。
    <h1 tabindex="1"></h1>
    <section tabindex="2"></section>
    <header tabindex="3"></header>

按tab，则网页则会照123的顺序选定内容。可以不连续，仅按照数字的绝对大小进行排序选择。

全局属性小技巧

接下来介绍两个用于全局属性的小技巧。

直接修改页面的style

首先要知道，style一般都放在head里面，这样就没法看见，其次就是style在页面中一般是隐藏的。首先我们要做的就是在body里面创建一个style，他就成了HTML的属性而不是css，然后由于style一般都是hiden，所以我们直接在style里面编辑，让style可视化。display:block;为了方便找到它的位置，一般我会加上边框
border:black 1px solid;。然后再改变style的全局属性让它可以被编辑。

 <style contenteditable>
    style{
      display:block;border:black 1px solid;
    }
     
  .demo{
    background:gray
  }</style>
  <div class="demo">
    <ol>
      <li></li>
      <li></li>
    </ol>

    <dl>
      <dt>小张</dt>
      <dd>
        长得丑
      </dd>
    </dl>
  </div>

文字很多只显示一行，鼠标放在上面浮现全部内容。

首先先创建一个div里面有很多的话。

  <div class="demo">
拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦
  </div>

页面效果


3行都放不下

那怎么才能让他只有一行而且不超格呢？

    white-space: nowrap;
    overflow:hidden;
    text-overfolw: ellipsis;

这样就OK了。然后再加一个title把它主要内容输入即可。

主要内容

包括但不限于以下标签。

    <ol>
      <li></li>
    </ol>
    <ul>
      <li></li>
    </ul>
    <dl>
      <dt></dt>
      <dd></dd>
    </dl>
    <pre></pre>
    <code></code>
    <hr>
    <br>
    <a href=""></a>
    <em></em>
    <strong></strong>
    <blockquote></blockquote>

  <dl>
    <dt>小张</dt>
    <dd>
      长得丑
    </dd>
  </dl>

长得丑就是用来描述小张的。

注意事项

  1. js
  2. html
  3. css
    意思是若是js与css中style冲突，则会优先选择js中样式。
上一篇 下一篇

猜你喜欢

热点阅读