HTML基础学习——基本标签

https://www.w3school.com.cn/tags/index.asp
标签参考手册网址

标签:

1.HTML文档是由HTML标签及内容组成的文本文件。
2.HTML标签的组成:
(1).通常成对出现,在开始标签和结束标签之间的文本是内容
(2).大小写无关,<b>和<B>表示的意思是一样的

  • <ELEMENT ATTRIBUTE = value>
    ELEMENT:元素——标识标签
    ATTRIBUTE:属性——描述标签
    value:值——分配给属性的内容

3.HTML标签 (HTML Tag)
(1)告诉浏览器如何显示内容
(2)两端有两个包括字符:“<”和“>”,如<html>,<body>
(3)大小写无关
(4)标签的种类:

  • 成对出现的标签。前一个标签为开始标签,后一个标签 为结束标签
  • 单标签,如<hr />

4.标签属性
(1)标签可以拥有属性,来具体描述标签的特征
(2)属性能够为页面上的HTML元素提供附加信息,如:
<body bgcolor=“red”>
bgcolor属性告诉浏览器,你的页面的背景色是红色的
<table border=“0”>
border属性告诉浏览器,这个表格是没有边框的
(3)属性是附加给HTML元素的开始标签的
(4)属性通常由属性名和属性值成对出现,形式为
name=“value”
(5)属性值本身就含有引号,会考虑使用单引号,如
name=‘John”ShotGun”Nelson’

一.页头标签

1. <head>常包含的标签:

<link>,<style>,<script>,<meta>,<title>,<base>

2.关于字符编码:

UTF-8,Big5(港澳台繁体字),GB2312,GBK(兼容GB2312)

3.<meta>标签设置页面字符编码:
  • HTML5之前:
    <meta http-equiv="Content-Type"
    content="text/html;charset=UTF-8" />
  • HTML5增加支持:
    <meta charset="UTF-8" />
4. <meta>标签设置描述信息和关键字

(不会在网页上显示,给搜索引擎看的)

  • 设置描述信息:
    <meta name="description" content="本网站主要研究恐龙进化史" />
  • 设置关键字:
    <meta name="keywords" content="进化,恐龙,历史“ />
5. <meta>标签实现页面跳转

<meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
当前页面在5秒以后自动跳转到后面的网址

6.<title>
<title>标签的使用
  • <title>标签的作用:
    1.定义浏览器工具栏中的标题
    2.提供页面被添加到收藏夹时的标题
    3.显示在搜索引擎结果中的页面标题

  • 代码测试如下:


    代码示例

    结果

    跳转结果如下
7.<style>标签的使用

说到<style>标签就需要简单说一下css,对于css的具体说明会在以后的文章中更新。
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。

Html和CSS的关系:

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
  2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
  • 代码示例如下:(简单代码,css以后会详细写)


    代码示例

    结果
8.<link>标签的使用

定义HTML文档与外部资源之间的关系(与<style>的主要作用一样,也是应用css样式)


示例
8.<script>标签的使用

<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
示例代码如下:


代码如下

结果如下

二.文本标签

1.文本段落
1.<p>和<hr />
  • <p>
    <p> 标签定义段落。
    p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
    代码示例:


    示例1

    结果1

    PS:两个段落之间有一行白色空格

  • <hr />

    标签在 HTML 页面中创建一条水平线。
    水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
    代码示例:
    示例2

    结果2

    <hr />标签既可以在段落内部分割也可以在段落外部分割。
    示例3

    结果3
2.空白与注释以及居中
  • 无论你在文本段落中加多少的空格与换行,在最终网页所显示的只有一个空格。


    示例1

    结果1
  • 注释内容格式<!--XXXXXXXXXXXXX-->


    示例代码

    结果不显示注释内容,但是在源码中还可以看到,便于开发人员维护。

  • 居中:设置标记中文本或者图像居中显示


    示例1

    结果1
3.换行、空白的控制
1.<br />与
(字符实体)

 
<br /> 可插入一个简单的换行符。
<br /> 标签是空标签(意味着它没有结束标签,因此这是错误的:
</br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
请注意,<br /> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。

示例代码:


代码如下

结果
2.HTML中常用的字符实体
  • 实体名称对大小写敏感!


    常用的字符实体

    示例代码如下:


    代码

    结果

三.短语标签

短语标签

示例代码

结果
1.带有记号的文本
1.<make>高亮显示
示例

结果

四.标题标签

1.<h1>,<h2>,<h3>,<h4>,<h5>和<h6>
示例

结果
2.字体样式标签
字体样式标签

代码示例:


示例1

结果1
3.引用和引号
1.<q>和<blockquote>
  • <q> 标签定义短的引用。
    浏览器经常在引用的内容周围添加引号。
  • <blockquote> 标签定义块引用。
    <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
    代码示例:


    代码示例

    结果
4.预格式化文本
1.<pre>

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签(例如标题、<p><address> 标签绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接图像水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
代码示例:

示例1

结果1

示例2

结果2

5.东亚语言显示
1.<ruby>,<rp>和<rt>

<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。


示例1

结果1

(此文章仅作为个人学习笔记使用,如有错误欢迎指正~)

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

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,171评论 0 3
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,236评论 1 41
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,636评论 0 7
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,113评论 0 0