HTML入门笔记1

1. HTML发明者

李爵士(Tim Berners-Lee)

  • 李爵士发明了WWW(万维网)、HTML、HTTP和URL。
  • 2004年,英国女皇颁发给他大英帝国爵级司令徽章。
  • 2017年,被颁发图灵奖。
  • 李爵士是万维网的开创者,他写了世界上第一个浏览器(World Wide Web)和第一个服务器,并用自己的浏览器访问了自己的服务器。

2. HTML起手式

在编辑器里输入!+tab会出现以下代码


html起手式含义注释

3. 常用的HTML章节标签

  • 标题 h1 - h6:用来表示层级,h1 ~ h6标题级数依次递减,h1级别为最高,字体最大。

  • 章节section:<section>元素表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。

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

  • 段落P:<p>元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,<p> 是块级元素

  • 头部header:用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

  • 脚部footer:表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

  • 主要内容main<main>元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

  • 旁支内容aside<aside>元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。

  • 划分div<div> 元素(或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响。作为一个“纯粹的”容器,<div> 元素在语义上不表示任何特定类型的内容。然而,其可以将内容分组,从而可以使用<class>或是id属性方便的定义内容的格式,也可以在一段文档中划分标记出使用另一种语言书写的内容。
    代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页标题</title>
  </head>
  <body>
    <header>介绍性内容</header>
    <div>
      <main>
        <h1>heading,文章标题</h1>

        <section>
          <h2>第一章节</h2>
          <p>这是一个段落(paragraph),内容可以自由发挥</p>
          <section>
            <h3>1.1小节</h3>
            <p>这是第一章节里,1.1小节的段落</p>
          </section>
          <section>
            <h3>1.2小节</h3>
            <p>这是第一章节里,1.2小节的段落</p>
          </section>
        </section>
      </main>
      <aside>参考文献1.2.3.</aside>
      <footer>&copy;资料来自MDN文档</footer>
    </div>
  </body>
</html>

Output:

效果演示

4. 全局属性

所有标签都有的属性

  • class:给标签分一个类,给标签标记class。由于class有局限性,因此在使用时会用"."来代替

    class例子

    .class用法

  • contenteditable:加上后可以使任何一个元素可以被编辑,文本可以变得能够被编辑。

    contenteditable用法

    把style放进body里面,就能让style也变得可以被编辑,就能让用户自己更改html的样式。不过通常情况下,style是放head里面的。

  • hidden:隐藏,隐藏文本内容。在标签里面加上,可以让标签里面的内容被隐藏。

  • id:元素是全页面唯一的时候用id,用法与class相同。
    但是!不到万不得已千万不要用id。 因为id必须是全局唯一的属性,但当他不唯一时id也不会报错。

  • style:包含文档的样式信息或者文档的部分内容。
    默认情况下,该标签的样式信息通常是[CSS]的格式

    style三种情况对比,左上为style作为css属性,左下为作为htm属性

    style在作为html属性的时候,效果的优先级比作为css的高,css,html,javascript属性同时存在时,以js为最终结果。

  • tabindex: 添加属性,使文本可以用tab键进行选中,用来控制tab选中时候的顺序。
    1. tabindex=-1,表示不可以被tab访问。
    2. tabindex=0,表示最后被tab访问。
    3. tabindex=正数,按顺序被tab访问。

  • title:作用1:定义文档的标题,显示在浏览器的标题栏或标签页上。

image.png

作用2:通过红色标记的三行,设置溢出的文本格式,再在标签内加入title属性,就能使鼠标移到文本上显示完整的内容。

5. 内容标签

  • dl+dt+dd:dl=description list描述列表 dt=... term(概念、术语)dd=... data(数据)

    dl用法

  • ol+li:ol=ordered list有顺序的列表,li=list item列表
    ol不能含有除了li之外的任何子元素。

    ol+li演示

  • ul+li:ul=unordered list无序的列表

    ul+li用法

  • pre:由于系统默认会使多个空格和换行都会转换成一个空格,该标签是为了是文本保留原来的空格和换行。

    pre标签展示

    一般在h标签里面加pre

  • code:<code>包裹住的字体是等宽的,<code>一般用来包住代码,一般和pre配合写代码。

    code演示

  • hr:水平分割线

  • br:br=break换行,<br>就是用来换行的

    br演示

  • a:用于添加超链接

    <a>演示

    target用来表示在新标签页打开网站。

  • em :em=emphasis,用来强调(语气的强调),默认样式字体为斜体

  • strong:重要(用来强调本身内容),默认样式字体为加粗

  • quote:内联引用

    quote演示

  • blockquote:块级引用

    blockquote效果演示

本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容