HTML入门笔记1

HTML的发明者是谁？

HTML 诞生与李爵士的一篇文章 HTML Tags

HTML的起手式

HTML 起手之前，首先创建一个最好是全英文的目录，在里面新建一个index.html。用VScode打开后可以在VScode界面输入 “！”之后按tab。之后会跳出几行代码

<!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>

<head>包含的一般是看不见的元素，例如文本编码 meta charset等。

HTML的表章节的标签

表示标题的：h1~h6 ,用法

<h1>这是标题 1</h1>

；

表示章节的：section,用法

 <section>
 <h1>标题1</h1>
 <p>段落文字</p>
</section>

；

表示文章的：article，用法

<article>
  <h1>0000000</h1>
  <p>000000000</p>
</article>

；

表示段落的：p,用法：

<p>000000000</p>

；

表示顶部的：header,用法

这段内容会显示在顶部
</header>

；

表示底部的：footer,用法

<footer>
这段内容会显示在底部
</footer>

；

表示主要内容的：main,用法

<main> 
<h1>标题1</h1>
<p>段落文字</p>
</main>

；

表示旁支内容的：aside,用法

<aside>
在侧面显示
</aside>

；

以及表示划分的：div，用法：

<div>
这部分不要与其它部分关联
</div>

。

HTML的全局属性

HTML的全局属性指的是所有标签都有的属性：

class 语法是<element class="value">用来加样式；
contenteditable 被该标签包含起来的内容是可被编辑的，举个例子：这是一个可编辑的段落。；
hidden 被该标签包含起来的内容是用户看不见的，举个例子：这个段落应该被隐藏。；
id 语法是<element id="value">，定义上是全局唯一的标签，但是不到万不得已最好别用，因为该标签不报错；
style 用来规定文字在行内的样式，举个例子：这段的字体是红色.；
tabindex 可以用tab键交互的元素，语法是<element tabindex="number">，通过数字顺序控制tab的交互次序，0是最后被交互，-1是不要被交互；
title 语法是<element title="value">，鼠标悬停在包含该标签的元素上时，会显示出完整的内容。

HTML常用的内容标签

ol+li ol是有次序的列表，li是列表中的一项

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

；

ul+li ul是无次序的列表

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

；

dl+dd+dt 用来描述列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

pre 用来保留文本格式

<pre>一大段空       格</pre>

code 用来包裹代码

<code>一段代码</code>

hr 分割线

上文
<hr>
下文

br 换行

第一行文字<br>第二行文字

a 插入网站

<a href="http://www.baidu.com">百度一哈？</a>

em 对文字起强调作用

<em>
需要强调的文字
</em>

strong 对文字加粗

 <strong>
需要加粗的文字
</strong>

quote 引用一段文字

<q>
一段文字
</q>

blockquote 块级引用

<blockquote>
一块文字
两块文字
三块文字
</blockquote>

。

最后编辑于：2019.11.07 15:28:36