[关闭]
@MRsunhuimin 2019-07-09T13:16:24.000000Z 字数 2567 阅读 533

html第一天（2019.07.08）

html

作者：孙慧敏

0. 什么是HTML

1.Hyper Test Markup Language(超文本标记语言)
2.超文本包括：文字、图片、音频、视频、动画等。
3.HTML5仅只HTML5，其余版本都统称HTML

1. HTML5的优势

1.世界知名浏览器厂商对HTML5的支持（包括微软、Google、苹果、Opera、Mozilla）
2.市场的需求
3.跨平台（跨操作系统、跨浏览器内核）

2. W3C标准

1.World Wide Web Consortium(万维网联盟)
2.成立于1994年，Web技术领域最具权威和最具影响力的国际中立性技术标准机构
3.网址 http://www.w3.org/
4.网址 heet://www.chinaw3c.org/

3. W3C标准包括

1.结构化标准语言（XHTML、XML）
2.表现标准语言（CSS）
3.行为标准（DOM、ECMAScript）

4. 网页编辑工具

包括记事本、Dreamweaver、WebStorm和Notepad++等

5. HTML基本结构

  1. <!DOCTYPE html>//告诉浏览器使用什么规范,这是HTML5的规范
  2. <html>
  3.     <head>
  4.         //头部
  5.         <meta charset="utf-8">//代表国际编码
  6.         <title>标题</title>
  7.     </head>
  8.     <body>
  9.         //主体部分
  10.     </body>
  11. <html>
80%左右的标签是成对的，如<head></head>、<body></body>等；包括开放标签和闭合标签两部分；
单独呈现的标签如（空元素），如<br/>、<hr/>等；意为用“/”来关闭空元素

6. UTF-8扩展

UTF-8: Unicode TransformationFormat-8bit 是用以解决国际上字符的一种多字节编码，它对英文使用8位（即一个字节），中文使用24为（三个字节）来编码。UTF-8包含全世界所有国家需要用到的字符，是国际编码，通用性强。UTF-8编码的文字可以在各国支持UTF8字符集的浏览器上显示。

UTF-8和utf-8不区分大小写

GB2312包含全部中文字符

GBK：GBK是国家标准GB2312基础上扩容后兼容GB2312的标准。GBK的文字编码是用双字节来表示的，即不论中、英文字符均使用双字节来表示，为了区分中文，将其最高位都设定成1。GBK包含全部中文字符，是国家编码，通用性比UTF8差，不过UTF8占用的数据库比GBK大。

GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换：
    GBK、GB2312－－Unicode－－UTF8
    UTF8－－Unicode－－GBK、GB2312

7. <title>标签

  1.     <title>《GoodTime》的中英文歌词</title>

8. <meta>标签

  1.     <meta charset="utf-8"/>
  3.     <meta name="keyword" content="Goodtime,GoodTime,goodtime,goodTime">//用于关键词搜索
  5.     <meta name="description" content="《Good Time》是亚当·扬与卡莉·蕾·杰普森合作演唱的一首流行歌曲，歌词、曲谱由亚当·扬、马修·蒂森、布莱恩·李共同编写。">//用于搜索后的名词解释

9. <h1>-<h6>标题标签

  1. <h1>一级标题</h1>//最大
  2. <h2>二级标题</h2>
  3. <h3>三级标题</h3>
  4. ...
  5. <h6>六级标题</h6>//最小

10. <p>段落标签

  1. <h1>《GoodTime》</h1>
  2. <p>Woah-oh-oh-oh</p>
  3. <p>这是第二段</p>

11.<br/> 换行标签

  1. <h1>《GoodTime》</h1>
  2. <p>
  3. Woah-oh-oh-oh<br/>
  4. 这是第二行<br/>
  5. </p>

12. <hr/>水平线标签

  1. <h1>《GoodTime》</h1>
  2. <hr/>//水平线标签
  3. <p>
  4. Woah-oh-oh-oh<br/>
  5. 这是第二行<br/>
  6. </p>

13. 字体样式标签

  1. <strong>加粗</strong>
  2. <em>斜体</em>

14. 注释和特殊符号

特殊符号 字符实体 实例
空格 &nbsp aa aaa
大于号（>） &gt 100>20
小于号 （<） &lt 2<3
引号（"） &quot "这总是个美好时光"
版权符号（@） &cop ©版权所有，仿冒必究

15. 图像标签

  1. <img src="path" alt="text" title="text" width="x" height="y"/>
  2. src:图像地址
  3. alt:图像的替代文字
  4. title:鼠标悬停提示文字
  5. width:图像宽度
  6. height：图像高度
  1. <img src="image/kgc.jpg" width="80" height="80" alt="课工场" title="课工场">

16. 链接标签

  1. <a href="path" target="目标窗口位置">链接文本或图像</a>
  2. herf:链接路径
  3. target：连接在哪个窗口打开
  4. 目标窗口位置：常用值：_self、_blank
  1. <a href="detail.html" target="_blank">程程回寝室了</a>
  2. <a href="detail.html" target="_blank"><img src="image/img1.png" alt="社会人先走了" title="洛师的现在也要走了"/>
  3. </a>

17. 常用的超链接

1.页面超链接

2.锚链接

    从A页面的甲位置跳转到本页中的乙位置
    从A页面的甲位置跳转到B页面中的乙位置

3.创建步骤

创建跳转标记

  1. <a name="marker">乙位置</a>
  2.  ```
  3.  创建跳转链接
  4.  ```html
  5. <a href="#marker">甲位置</a>
  6.  ```
  7. ####4. 功能性链接
  9.     电子邮件
  10.     QQ
  11.     MSN
  12.  ```html
  13. <a href="mailto:1783093966@qq.com">联系我</a>
  14.  ```   
  15. ###18.  行内元素和块元素
  16. 块元素
  18.     无论内容多少，该元素单独占一行
  19. 行内元素
  21.     内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em）
  22. ```html
  23. <p>我是p元素</p>
  24. <h1>我是标题h1</h1>
  25. <a href="#">我是超链接a元素</a>
  26. <strong>我是strong元素</strong>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注