HTML入门笔记

WilliamWang123
179 阅读5分钟

1.HTML是什么？

HTML是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载HTML代码，然后渲染出网页。

“HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。大约在1990年左右诞生由Tim Berners-Lee（李伯纳）发明的。它的最大特点就是支持超链接，可以跳转到其他网页，1990年，HTML4.0发布，成为广泛接受的HTML标准。2014年，HTML5发布，这是目前正在使用的版本。

2.HTML的基本结构

html起手式：!Emmet

3.常用表章节标签

(1)h1~h6：文章标题，共分六级，h1最大，逐级减小，h6最小

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

(2)section：一个章节,一般来说会有一个标题,section总是多个一起使用，一个页面不能只有一个section

<article>
    <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>一段内容</p>
    <h2>第二章</h2>
    <p>一段内容</p>
  </section>
</article>

(3)article：一段完整内容,表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目

(4)p：文章的一个段落

<p>这是第一个段落。这是第一个段落。
   这是第一个段落。这是第一个段落。</p>

(5)header：头部,既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部

用在网页的头部，称为“页眉”。网站的导航栏和搜索栏通常会放到

里

<h1>公司名称</h1>
<ul>
 <li><a href="/home">首页</a></li>
 <li><a href="/about">关于</li>
 <li><a href="/contact">联系</li>
 <ul>
 <form target="/search">
  <input name="q" type="search"/>
  <input type="submit"/>
  </form></header>

如果header用在文章的头部，则可以把文章标题、作者等信息放进去

<article>
    <header>
      <h2>文章标题</h2>
      <p>王小二，发表于周四</p>
    </header>
</article>

(6)footer：表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或其他相关信息

<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

(7)main：页面的主题内容，一个页面只能有一个main

<body>
  <header>页眉</header>
  <main>
    <article>文章</article>
  </main>
  <aside>侧边栏</aside>
  <footer>页尾</footer>
</body>

(8)aside：旁支内容

<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

4.全局属性标签

(1)class
class属性用来对网页元素进行分类。如果不同元素的class属性相同，就表示他们是一类的。
元素可以同时具有多个class，他们之间用空格分隔。

<p class="p1 p2 p3"></p>

(2)contenteditable
HTML网页的内容默认是不可编辑的，contenteditable属性允许用户修改内容，它有两个可能的值。

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

(3)hidden
hidden 是一个布尔属性，表示当前的网页元素不再跟页面相关。如果一个元素设置了这个属性，它就不会被显示。

<p hidden>这个段落应该被隐藏。</p>

(4)id
id属性是元素在网页内的唯一标识符。比如，网页内可能包含多个p标签，id属性可以指定每个p标签的唯一标识符。注意：如果有相同的id出现，浏览器并不会报错，但是在js中调用的时候会报错

id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。此外，id属性的值不得包含空格。

Tips:id属性的值还可以在最前面加上#，放到url中作为锚点，定位到改元素在网页内部的位置。比如，用户访问网址https://foo.com/index.html#bar的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容

(5)style
style属性用来指定当前元素的CSS样式。具体设置请看CSS教程

(6)tabindex
tabindex属性的值是一个整数，表示用户按下Tab键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。根据tabindex的值从小到大依次访问

(7)title：提示信息显示给用户

(8)Lang
lang属性指定网页元素使用的语言

  • zh：中文
  • zh-Hans：简体中文
  • zh-Hant：繁体中文
  • en：英语
  • en-US：美国英语
  • en-GB：英国英语
  • es：西班牙语
  • fr：法语

5.常用内容标签

(1)div：表示一个区块，没有语义,如果网页需要一个块级元素容器，有没有其他合适的标签，就可以用这个标签。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力，因为不带有语义。后来，HTML5就提出了语义标签，改进了上面的代码

<main>
  <article>
    <header>
    <h1>文章标题</h1>
    </header>
  </article>
</main>

(2)ol+li：有序列表

(3)ul+li：无序列表

(4)dl+dt+dd：一组列表

(5)pre：保留原来格式，如空格和换行

(6)hr：分隔线

(7)br：换行

(8)a：跳转指定网址

(9)em：：语气上的强调

(10)strong：强调，内容本身重要

(11)code：呈现一段计算机代码

(12)q：引用短文本

(13)blockquote：引用长文本

更多详细内容参考网道HTML教程

avatar
文章
阅读
粉丝