HTML入门笔记1

Posted on

html入门

HTML全名”超文本标记语言”（HyperText Markup Language）
英国物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。

首先写这一套，Emmet语法!

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html> 文档类型
<html lang="en"> 语言 中文为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>标题</title>
    </head>
    <body>
    </body>
</html>

章节标签

h1~h6

1
2
3
4
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

section

article

section表示一个有主题的独立部分，通常用在文档里面表示一个章节，比如article可以包含多个section。section总是多个一起使用，一个页面不能只有一个section。
每个article，通常包括标题（h1 - h6元素）作为article元素的子元素。

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

p

1
<p>表示一个文本段落</p>

main

1
2
3
4
5
6
7
8
9
10
<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

aside

1
2
3
4
5
6
7
8
9
10
11
12
网页通常用来放置侧边栏
<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

文章用来放置标注或评论
<p>第一段</p>
<aside>
  <p>本段是文章的重点。</p>
</aside>

全局属性

全局属性是所有元素都可以使用的属性。

id

表示元素的唯一,必须是全局唯一。

1
2
3
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

class

元素类名,类名可以相同，也可以多个.

css和js通过类选择器或DOM方法(document.getElementsByClassName)来选择和访问特定的元素

1
2
3
4
5
<p class="para"></p>
<p></p>
<p class="para"></p>
<p class="p1 p2 p3"></p>

contenteditable

允许用户编辑内容

1
2
3
<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

hidden

布尔属性，表示当前的元素不在跟页面相关<p hidden>本句不会显示在页面上。</p>

style

指定当前元素css样式，如<p style="color: red;">hello</p>

title

为元素添加说明，鼠标悬停显示属性值

1
2
3
<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>

内容标签

ol+li(ordered list + list item)

有序列表

ul+li(unordered list + list item)

无须列表

dl+dt+dd(description list + term + data)

1
2
3
4
5
<dl>
    <dt>山东</dt>
    <dd>济南<dd>
    <dd>青岛</dd>
</dl>

自定义列表

pre(preview)

预定义格式文本，保留原来格式

1
2
3
4
<pre>
    床前明月光，疑是地上霜
    举头望明月，低头思故乡
</pre>

br(break)

换行<br>

a(anchor)

超链接到其他网页或同一页面的某一位置

<a href="www.baidu.com" target=_blank>点击跳转到百度页面</a>

code

显示代码

1
2
var x = 1
console.log(1)

em

强调，表示语气

strong

强调，内容重要，一般为粗体

q(quote)

行内引用

blockquote

块级引用