HTML入门笔记1

万维网WWW的发明

WWW=URL+HTTP+HTML 1990年
WWW之父:Sir Timothy John Berners-Lee 蒂莫西·约翰·伯纳斯-李爵士(W3C主席)
HTML:HyperText Markup Language 超文本标记语言
W3C:World Wide Web Consortium 万维网联盟 1994年

学习方法

语法→调试→查资料→标准制定者
CRM学习法: copy run modify
三上: 马(车)上 枕上 厕上
查阅资料: xxx MDN
收藏链接: 网道HTML教程建议移动端收藏以便“三上”

HTML起手式

<!DOCTYPE html>

在高级的编辑器或IDE里(如VS Code/PyCharm/WebStorm),可以自定义html模板,输入感叹号!+tab即可自动生成预定义的代码片段。

常用的章节标签

标签名 描 述 备 注
h1~h6 标题 标题元素实现了六层文档标题,h1是最大的标题,h6是最小的标题。
section 章节 定义文档中的一个章节。
article 文章 定义可以独立于内容其余部分的完整独立内容块。
p 段落 paragraph 定义一个段落
header 头部 定义页面或章节的头部,常用来包含 logo、页面标题和导航栏。
footer 脚部 定义页面或章节的尾部,常用来包含版权信息、使用条款和反馈建议等链接。
main 主要内容 定义文档中主要或重要的内容。
aside 次要内容 定义和页面内容关联度较低的内容。常显示在页面的左侧或右侧。
div 划分 代表一个通用的容器,没有特殊含义。

常用全局属性

全局属性: 所有标签都有的属性

class

定义元素的类名 .xxx

contenteditable

定义元素的内容是否可编辑

hidden

隐藏元素

id

定义元素的唯一id,尽量少用,能用class就不用id #xxx

style

定义元素的行内样式,比css样式的优先级高,但可被css样式覆盖。

tabindex

定义元素被tab键选中的次序。(0为最后一个,-1为不可选中的的元素)

title

定义关于元素的额外信息。
鼠标移到元素上时显示一段提示文本。

内容标签

  • ol + li
    有序列表 ordered list + list item
  • ul + li
    无序列表 unordered list + list item
  • dl + dt + dd
    dl 字典列表(dictionary list)
    dt 字典标题(dictionary title)
    dd 字典数据(dictionary data)
  • pre
    按预定格式显示的文本(Preformatted),可规避空白折叠现象,常用来写代码片段,可搭配code使用。
  • code
    代码 字体格式为等宽
  • hr
    横线(horizontal)
  • br
    换行(break)
  • quote
    引用,默认内联,不换行。
  • blockquote
    引用块,默认换行。
  • em
    强调(emphasize) / 语气的强调
  • strong
    重点强调(strong emphasized) / 内容本身的强调
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,208评论 6 524
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,502评论 3 405
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,496评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,176评论 1 302
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,185评论 6 401
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,630评论 1 316
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,992评论 3 431
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,973评论 0 280
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,510评论 1 325
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,546评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,659评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,250评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,990评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,421评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,569评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,238评论 3 382
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,732评论 2 366

推荐阅读更多精彩内容

  • 万维网 WWW & HTML 的发明 WWW 简述 WWW = URL + HTTP + HTML WWW: Wo...
    饥人谷_AaronXu阅读 583评论 0 0
  • 1 HTML历史 1990年 Tim Berners-Lee实现HTTP客户端与服务器的第一次通讯,设计并构建第一...
    苏wisdom阅读 301评论 0 0
  • HTML 是谁发明的 1990 年,由于对 Web 未来发展的远见,Tim Berners-Lee 提出了 超文本...
    星学家阅读 230评论 1 0
  • 今天笔者看完了饥人谷的HTML网课,对于其又有了全新的理解。今天笔者就来与大家分享一下。包括HTML的概述,历史以...
    郑馋师阅读 506评论 0 2
  • 哥你走了,走得那么突然,我一直幻想着等你出院。心里最坏的打算也是你手术后仍要卧床康复治疗,那样我可以坐轮椅乘高...
    且行且珍惜知足常乐阅读 308评论 7 7