HTML入门笔记 一

212 阅读2分钟

HTML的创造者——蒂姆·伯纳斯-李

Tim Berners-Lee

He is the inventor of the World Wide Web. On December 25, 1990, he successfully used the Internet to realize the first communication between the hypertext Transfer protocol client and server.

他是万维网的发明者。1990年12月25日,他成功利用网际网路实现了超文本传输协议客户端与服务器的第一次通讯。


HTML起手式

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


HTML标签

章节标签

1.标题:h1至h6

<h1>标题</h1>

2.章节:section

<section>
    章节内容
</section>

3.头部:header

<header> 顶部内容 </header>

4.脚部:footer

<footer> 底部内容 </footer>

5.主要内容:main

<main>

                  内容

</main>

6.旁支内容:aside

<aside>

                 内容

</aside>

7.划分:div

<div>  需要被划分的内容  </div>

全局属性

  • class 类
  • contenteditable 可以编辑页面
  • hidden 让标签内容消失
  • id 不保证全局唯一,用法类似于class,不能重名已有的全局属性名称
  • style 设置样式,且优先级js>html>css
  • tabindex 使用Tab访问代替鼠标功能,按顺序依次选择,0为最后一个,-1表示不访问
  • title 标题,显示省略的内容

内容标签

1.有序列表 ol+li

<ol>
    <li>张三<li>
    <li>李四<li>
    <li>王五<li>
    <li>狗蛋<li>
</ol>

2.无序列表 ul+li

<ul>
    <li>张三<li>
    <li>李四<li>
    <li>王五<li>
    <li>狗蛋<li>
</ol>

3.描述列表 dl+dt+dd

<dl>
    <dt>汉堡</dt>
    <dd>汉堡有肉饼,生菜,面包,西红柿组成</dd>
</dl>

4.预格式化的文本 pre

<pre>  相当于文本框,可以自由地回车和空格了   </pre>

5.代码 code

<code>  system.out.print("Hello")  </code>

6. 分割线 hr

      内容
<hr>

7.换行 br

这句话打完了。<br>

8.链接 a

<a href="www.baidu.com"  target="_blank">百度的链接</a>

9. 语气强调 em

<p>em的默认样式是<em>斜体</em></p>

10.内容强调 strong

<p>strong的默认样式是<strong>加粗</strong></p>

11.行内引用 quote

歌德说过<quote>时间是我的财产,我的田亩是时间。</quote>

12.块级引用 blockquote

鲁迅说过<blockquote>爱情必须时时更新,生长,创造。</blockquote>