HTML入门笔记壹

Peterpanpng
158 阅读4分钟

HTML是谁发明的呢？

他是万维网的发明者，南安普顿大学与麻省理工学院教授。1990年12月25日， 罗伯特·卡里奥（Tim Berners-Lee）在CERN和他一起成功通过Internet实现了HTTP代理与服务器的第一次通讯。

进行了第一次页面和服务器之间的访问

2004年，英女皇伊丽莎白二世向伯纳斯·李颁发大英帝国爵级司令勋章，所以我们叫他李博士

HTML起手应该写什么呢？ 当你使用Viscode时在第一行输入英文的感叹号时!复制代码，根据提示点击确定就会出现如下代码

 <!-- 这是一个文档类型，说明这个文档是以html类型的 -->
 <!DOCTYPE html>
 <!-- 这是html标签，引号里的en表示是英文的可以将它改成中文，zh-CH -->
 <html lang="en">
 <!-- 这是一个头部标签 -->
 <head>    
 <!-- 意思是通过utf-8的编码格式进行排序 -->   
 <meta charset="UTF-8">    
 <!-- viewport进行适口的配置，保证用户不会缩放 -->    
 <meta name="viewport" content="width=device-width, initial-scale=1.0">    
 <!-- title网站的标题可以把Document改成你想要的标题 -->    
 <title>Document</title></head>
 <!-- 这是页面主体标签 -->
 <body></body>
 </html>

起手式搭建好了，就可以在里面写代码了

常用章节标签

  • 标题h1~h6
  • 章节section
  • 文章article
  • 头部header
  • 脚部footer
  • 主要内容main
  • 旁支内容aside
  • 划分div

标题h1~h6
运行网页中显示如下

这是一个标题

这是一个标题

这是一个标题

这是一个标题

这是一个标题
这是一个标题
章节section section表示这是一个章节可以进行选择
属性 option子属性 value默认的内容在option中要写选择显示的内容 ```编程语言 显示的内容Value 1 Value 2 Value 3 ``` 文章article
一般用于包裹其他元素，可以作为页面元素 ```编程语言

03 March 2018

Rain.

``` 头部header
```编程语言 页面的头部部分 ``` 脚部footer
```编程语言 页面的脚部部分 ``` 主要内容main
可以包含其他内容作为页面的主要内容 ```编程语言

标题

Hello word

...

...

``` 旁支内容aside
元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框 ```编程语言

这是侧边栏

``` 划分div
就是一个盒子，可以往里面加东西 ```编程语言
```

全局属性

什么是全局属性？

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

  • 类选择器class


class 的值是一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素.

  • <>是一个布尔属性hidden
    hidden 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

  • 元素的样式style
    修改元素的样式

<p style="color: blue">Hello</p>
  • 标题title
<title>这是标题</title>
  • 脚部contenteditable
<p style="color: blue">Hello</p>
  • id选择器id
<p id=xxx>Hello</p>
  • TAB键tabindex
    tabindex 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名
    tabindex=负值(通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
    tabindex="0"，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
    tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。
<div tabindex="0">hello.</div>

常用的内容标签

  • 表格样式


ol+li
ul+li
dl+dt+dd

有序列表
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
在界面显示为
1.。。。。。。
2.。。。。。。
3.。。。。。。
无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
自行想象
<dl>
 <dt>Firefox</dt>   //网站
 <dd>这是个很棒的网站</dd>  //描述
</dl>
网页中输出
Firefox
 这是个很棒的网站
  • pre
元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，
以等宽字体的形式展现出来，
文本中的空白符（比如空格和换行符）都会显示出来。
(紧跟在 <pre> 开始标签后的换行符也会被省略)

  • 水平线

    hr
<hr>

  • 换行

    br
</br>

  • 对文本进行强调

    em
<em></em>

  • 定义重要的文本strong

<strong></strong>
  • code计算机代码文本
    元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
<code>This is code.</code>
  • blockquote元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 cite元素。
<blockquote cite="">
</blockquote>
avatar
文章
阅读
粉丝