HTML01

基础知识

1. HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是 开始标签,第二个标签是结束标签。

2. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。

3. HTML 文档的的后缀名必须是 .html 或 .htm

4. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。

5. <!DOCTYPE>不是一个 HTML 标签,它就是 文档类型声明标签。

6. 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

7.  在<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

8. <!DOCTYPE html>  文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.

9. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.

10. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析


标题标签

<h1> -<h6>

    标签语义:作为标题使用,并且依据重要性递减。(随着数字的增大,字体大小减小)

特点:

    加了标题的文字会变的加粗,字号也会依次变大。

    一个标题独占一行


标签用于定义段落

<p>

<p> 我是一个段落标签 </p>

    标签语义:可以把 HTML 文档分割为若干段落。

特点:

    文本在一个段落中会根据浏览器窗口的大小自动换行。

    段落和段落之间保有空隙。   


换行标签

<br />(单标签)

    标签语义:强制换行。

特点:

    <br /> 是个单标签。

    <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距,间距比段落标签<p>小。


文本格式化标签

加粗 <strong> </strong> 或 <b> </b>

斜体 <em> </em> 或 <i> </i>

删除线 <del> </del> 或 <s> </s>

下划线 <ins> </ins> 或  <u> </u>

div> 和<span>标签

<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。

特点:

    ①. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子

    ②. <span> 标签用来布局,一行上可以多个 <span>。小盒子


图像标签和路径

src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。

<img src="xx.jpg" title="xxx" alt="xxx图片" width="100px" height="100px" border="1"/>

图像标签

图像标签属性注意点:

    ① 图像标签可以拥有多个属性,必须写在标签名的后面。

    ② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

    ③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。

目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。

根目录:打开目录文件夹的第一层就是根目录

路径问题

相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。

同一级路径                图像文件位于HTML文件的同一级          <img src="xxx.jpg" >

下一级路径        /       图像文件位于HTML文件的下一级        <img src="XXX/xxx.jpg" >

上一级路径        ../     图像文件位于HTML文件的下一级        <img src="XXX../xxx.jpg" > 如果有多个上一级可以使用多次../

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

    例如,“D:\web\img\logo.gif”或完整的网络地址

            “http://www.itcast.cn/images/logo.gif”。

        (注意!!!!)相对路径和绝对路径的斜杠方向相反

链接分类:

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >。

3. 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。

4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。

5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.

6. 锚点链接:  点我们点击链接,可以快速定位到页面中的某个位置.   

    在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> xxx </a> 

      找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">xxx</h3>


注释

    HTML中的注释以“<!--”开头,以“ -->”结束


特殊字符

重点记住:空格 、大于号、 小于号 这三个,

        空格    &nbsp

        小于号    &lt

        大于号    &gt

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

推荐阅读更多精彩内容

  • 一、HTML 1.超文本标记语言; 2.超出文本的限制,包含了音频、视频、图片等元素。 二、浏览器 1.浏览器 谷...
    ae7e2869e671阅读 127评论 0 0
  • 第01阶段.前端基础.认识WEB HTML 第一天目标 能够写出基本的html页面(里面包含图片、链接、文字等网页...
    Hamilton_22c6阅读 470评论 0 0
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    Mr大喵喵阅读 1,390评论 0 4
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    璐璐熙可阅读 424评论 0 0
  • 一:HTML简介 1.什么是HTML? 1. HTML:超文本标记语言(Hyper Text Markup Lan...
    风来_阅读 509评论 0 0