美文网首页四期学习小组
Html阶段第一小节第三天

Html阶段第一小节第三天

作者: AndrewZheng | 来源:发表于2017-04-15 22:18 被阅读12次

    1.Html常见几种标签:

    ①文档声明标签--<!DOCTYPE>标签:

    <!DOCTYPE>标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。主要用于浏览器解析文档标签的依据。

    ②<html></html>标签:

    说明:

    <html>标记位于<!DOCTYPE>标记之后,也称为根标记,用于告知浏览器其自身是一个HTML文档,<html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结束,在它们之间的是文档的头部标签和主体标签

    属性:

    -lang:该属性设置当前文档的主要语言,lang="en"代表英语,lang=“zh_CN”代表中文

    ③<head></head>标签:

    说明:

    <head>标记用于定义HTML文档的头部信息,也成为头部标记,紧跟在<html>标签后面。head标签定义的内容只是提供给浏览器使用,主要用来封装其他位于文档头部的标记,如title/meta/link/style等。一个Html文档只能包含一对head标签。

    子标签<meta>:

    <meta charset="UTF-8">设置了当前页面的编码用UTF-8

    子标签<title></title>:

    设置了当前页面在浏览器上方的标题内容

    ④<link>标签:

    第一种用法:设置DNS预解析(域名预解析),有效提高后续访问网站的效率

    <link rel="dns-prefetch" href="http://mimg.127.net">

    第二种用法:引入网站icon图标:

    <link rel="shortcut icon" href="http://www.126.com/favicon.ico">

    第三种用法:引入CSS样式

    <link rel="stylesheet" href="css/bg.css">

    ⑤script标签:

    ⑥style标签:

    ⑦<body></body>标签:

    子标签<h1></h1>:h后的数字代表标题的重要性,从1~6,重要性逐级递减。一般情况一个页面中只有1个H1标题(一级标题过多会影响SEO)。注意:此标签不是用来表示样式大小。

    子标签<p></p>:段落标记,</p>结尾标签后的文本会被强制换行成为一个新的段落。默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

    子标签<hr/>:水平线标记,是一个创建横跨网页水平线的标记,在网页中输入<hr/>就添加了一条默认样式的水平线。

    子标签<span></span>:文本节标签

    子标签<br>:可以强制段落进行换行,不受空格和换行合并的影响。

    子标签<em>:定义着重字

    子标签<strong>:定义加重语气

    子标签<sub>:定义下标字

    子标签<sup>:定义上标字

    子标签<del>:定义删除字

    子标签<i>:定义斜体字

    2.Sublime Text 快速生存Html5标准的页面结构:

    先输入"html:5",再按Tab键

    3.常用的字符集编码方式

    ①UTF-8:是目前最常用的字符集编码方式,包含全世界所有国家需要用到的字符

    ②GBK:包含全部中文字符,既包含繁体中文也包含简体中文

    ③GB2312:简体中文

    ④BIG5:繁体中文

    4.HTML文档空白合并

    在HTML文档中,文字之间的空格会进行合并,多个空格或者是换行会合并成一个空格。

    5.HTML文档添加空格:文本中添加一个"&nbsp;",就是添加一个空格。

    6.<em>标签和<strong>标签的区别:

    ①作用范围不同:<em>用于局部文本的加强语气或者强调作用,而<strong>是用于针对整体的加强语气;

    ②<em>有可能会改变局部的文本的语义,而<strong>不会改变语义。

    7.文本格式化标签

    8.超级链接标签<a></a>

    说明:

    超级链接不止可以嵌套文本,还可以嵌套表单,图片,标题等

    属性:

    -href:你要跳转的网页的地址;

    -target:有两个值:_self,默认的,表示在当前页面打开超级链接;_blank表示在新的页签中打开超级链接

    9.锚点链接

    说明:通过创建锚点链接,用户能够快速定位到目标位置。

    方法:

    ①在需要跳转到的目标位置,使用相应的id名标识,如:

    <span id="Here">我要跳转到这里</span>

    ②使用<a href="#Here" >点击超链接跳转到目标位置</a>

    10.URL协议:就是用来规定url地址的格式

    scheme://host.domain:port/path/filename

    scheme:定义因特网服务的类型,最常见的类型是http/https/ftp

    host:定义域主机(http的默认主机是www)

    domain:定义因特网域名,比如w3school.com.cn

    :port:定义主机上的端口号(http的默认端口号是80)

    path:定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)

    filename:定义文档/资源的名称

    11.URL编码:就是把URL中非ASCII码转化为% ASCII码

    URL在线编码转化工具:http://tool.chinaz.com/tools/urlencode.aspx

    12. 图片标签<img>

    <img src="图片的地址" alt="图片不存在时显示的文本" title="鼠标指着图片时显示的文字">

    13.常见的图片格式

    ①gif格式:最突出的地方是支持动画,同时也是一种无损的图像格式。在网页中,常用于LOGO,小图标,及其他色彩相对单一(只能处理256种颜色)的图像。

    总结:储存占用空间小,兼容性好,支持透明,但色彩太多不行

    ②jpg格式:其文件格式为.jpg或者.jpeg。JPEG是一种有损压缩格式,其可以处理色彩较多,文件体积非常小(但比GIF格式大),非常有利于网络传输,但由于是有损压缩,所以将一幅图像转换为JPEG格式后图像质量会降低。一般用于广告/大的宣传图/照片等

    ③PNG格式:png包括PNG-8和真色彩PNG(PNG-24和PNG-32),相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明,半透明,全不透明),并且颜色过滤更平滑,但PNG不支持动画。

    注意:IE6是可以支持PNG-8的,但在处理PNG-24的透明时会显示为灰色。通常,图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而半透明的图片只能使用PNG-24。

    相关文章

      网友评论

      本文标题:Html阶段第一小节第三天

      本文链接:https://www.haomeiwen.com/subject/fijnattx.html