HTML入门笔记1

作者: 郑馋师 | 来源:发表于2019-08-21 11:41 被阅读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>

我们将一个一个介绍。

<h1></h1>
首先是h1，这个是标题的意思，123456数字由小到大但是标题的重要性却是h1为主标题，h2次之，以此类推。
```
<p></p>
```

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

<section></section>
分章节，
<header></header>
在网页的顶部显示的东西
<footer></footer>
在网页的底部显示的内容。
<main></main>
主要内容。
<aside></aside>
不那么主要的内容。
<div></div>
这个比较简单粗暴，意思就是这里面是一个部分，就是没有段，章节的概念，就是一个部分。

全局属性

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

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

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

class
为这一个元素命名，一般不要求全场唯一。命名形式一般如此

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

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

[master piece]{改动内容}，这方法需要输入其完整的classname。
.master {改动内容}，这里则不需要输入完整的classname，但会将classname中含有master的class全部改掉。

id
与class类似，他也是用来命名元素的，但是他要求全场唯一，而且不唯一的时候不报错，一般不使用。
contenteditable
可以直接在网页中对于其中内容进行修改。
hidden
这个里面的元素全部在网页中隐藏。
tabindex
一般是

    <h1 tabindex="1"></h1>
    <section tabindex="2"></section>
    <header tabindex="3"></header>

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

title
鼠标浮动在那里则会显示相应title里的内容。

全局属性小技巧

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

直接修改页面的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>

ol+li
正向的列表，有序列表,注意ol中只能包含li作为唯一的内容子集。
ul+li
列表，无序列表,注意ul中只能包含li作为唯一的内容子集。
*dl+dt+dd
描述性的列表，dt做为被修饰的元素，dd用于修饰他。比如说

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

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

pre
一般来说，HTML中内容无论有多少个空格，回车，tab都会被缩进成一个空格，加入pre可以保证所有空格保留。
code
让里面的字体等宽。
hr
水平分割线
br
换行
a
附上链接，一般是当前页面打开新连接。
target
附上链接，一般是新开页面打开新连接。
em
强调，用于强调语气。
strong
强调内容。
block quoto
引用。

注意事项

在head中的style是css，在div里面的css是html，在js也可以直接引用style，优先级如下：

js
html
css
意思是若是js与css中style冲突，则会优先选择js中样式。

js中直接引用文件style时候元素的命名需要非常谨慎，很容易就会与网页本身的一些全局元素冲突，所以一般不建议新手使用
tabindex命令中，如果数字为0，则代表最后选择。若是负数则永远不选。

HTML入门笔记1

HTML概述

HTML历史

HTML的起手操作

HTML常用的标签

全局属性

全局属性小技巧

直接修改页面的style

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

主要内容

注意事项

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客