HTML基础(1)

我又出来赶博客了,这几天接触的知识量有点大,欠了能有10几篇博客吧,我觉得我再不赶出来,知识点就全忘记了,所以我决定百忙之中,抽出空来,来整理一下我最近学到的知识点,那么今天所讲的呢,就是HTML的初体验。

HTML简介

HTML(超文本标记语言——HyperText Markup Language)是构成Web世界的基石。它描述并定义了一个网页的内容。其他除HTML以外的技术则通常用来描述一个网页的表现/展示效果(CSS)或功能(JavaScript)。
也就是说,HTML这个标签语言,仅仅用来描述网页里面的内容,不去分配网页的样式和功能。这种方式能使我们的代码层次分明,便于维护。

HTML标签

常见的HTML标签有:a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg等。

下面我就逐个的列举,常用标签的用法和属性(ps:主要是怕我自己忘记,这里么做个笔记)

注释标签

突然发现这个标签好萌有没有,额。。。这个是注释标签 和C语言里的//是一个意思,用于在代码里面注释某些东西的,这个最好理解。

<!DOCTYPE>标签

这个一般写HTML5的时候会自动生成,<!DOCTYPE> 用于声明文档类型,<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。一般的写法如下

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容
</body>
</html>

用于选择文档类型的,HTML里面肯定是html啦。

<html>标签

主要告诉浏览器,我是一个html文档。<html> 与\ </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。

<html>
<head>这里是文档的头部</head>
<body>
  这里是文档的主体
</body>
</html>

<h1>~<h6>标签

标题(Heading)元素拥有六个不同的级别,<h1> 是最高级的,而 <h6> 则是最低的级别。这个就和Markdown一样,用起来很简单,但是我查资料的过程中,发现了一些要注意的细节

  • 不要为了减小标题的字体而使用低级别的标题, 而是使用 CSS font-size 属性。
  • 避免跳过某级标题:始终要从 <h1> 开始,接下来使用 <h2> 等等。
  • 使用 <section> 元素的时候,为了方便起见你应该考虑着去避免重复在一个页面上使用 <h1>,<h1> 应该用来表示页面的标题,其他的标题当从 <h2> 开始。 使用 section 当时候,应当每个 section 都使用一个 <h2>。

<br>标签

这个标签是强制换行的标签,是将文本信息换行的标签。<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。需要注意的细节是

不要使用<br>来增加行距;请改用CSS margin特性或<p>元素。

<body>标签

body么,顾名思义就是身体的意思,就是HTML的主体部分,HTML 主体元素 (<body>) 表示的是HTML文档的主体内容,任何一个HTML文档,只允许存在一个 <body> 元素。

<p>标签

paragraph,也就是段落的意思,所以<p>标签的作用就是展示一段文字。

\<p>This is some text in a very short paragraph\</p>

<ul>,<ol>,<li> 标签

  • unordered list(ul),所以这个标签就是一个无序的列表,用来展示没有顺序相关的文本或事件的罗列。
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • ordered list (ol),所以这个标签就是一个有序列表,用于展示有顺序的123这样的文本和事件的罗列。
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  • list(li),从以上两端代码可以看出,<li>标签,是配合<ul>和<ol>标签进行使用的,表示的是列表中的项目。必须配合使用。

<strong>标签

strong属性是用于把文本定义为强调的内容,但是HTML里面是不会对这个强调的内容做任何样式的改变,可以在CSS中,对strong定义的文本进行样式的定制,例如加粗修改颜色等操作。HTML中只是单纯的将这部分内容强调出来。

<span>标签

一直听说某些人可以就靠<span>和<div>就能实现页面,那这个span究竟是干嘛的呢。<span>标签是行内元素,他需要定义一个class,来配合CSS对其进行样式的改变,单独在HTML中,是没有任何样式的改变,不定义class的时候也没有意义,与其他文本没有任何差异。

<div>标签

<div>标签和<span>标签差不多的意思,不同的是一个是行内元素,一个是块元素,<div>标签可以让开发者根据自己的理解或用户的需求,对网页页面进行区域的划分,用<div>包裹起来,以此来区分网页不同功能,不用用途的区域,方便对某一区域进行操作或样式的改变。
这个标签也需要CSS配合来进行样式的改变。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

这一篇博客就先写到这里,还有几个棘手的标签,放到下一篇博客来具体的分析和理解,比这篇博客要介绍的详细的多,但是梳理起来也相对麻烦的多,下一篇主要讲解iframe,a,form,input,button,table标签的属性和细节,包栝HTTP请求的部分。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • HTML标题HTML标题由 至 标签定义。 定义了最重要的标题。 定义了最不重要的标题: HTML段落HTML段落...
    空城阿风阅读 357评论 0 0
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,599评论 0 30
  • 现在的我已经跨过了十九岁这个门槛,不知不觉马上就要二十了,不知道为什么总感觉自己还小,但是时间却不断提醒着我,你已...
    南方古镇阅读 227评论 0 2
  • 时代变迁很快,五年前的今天我,还在初中的宿舍和当时的兄弟吹着牛逼,这个时刻,当时的我还没有睡觉,因为我记得那晚上我...
    原原点阅读 439评论 0 0