HTML

web标准

　　w3c：万维网联盟组织，用来指定web标准的机构。

　　web标准：制作网页遵循的规范。

　　web准备规范的分类：结构标准，表现标准，行为标准。

　　结构：html，表示：css，行为：Javascript。

浏览器内核介绍：

　　IE：trident

　　chrome：blink

　　火狐：gecko

　　Safari：webkit

浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

开发工具介绍

　　Sublime Text 的使用：

　　参考链接：sublime text 使用技巧

HTML介绍

　　html全程Hyper Text Makeup Language,超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式，如字体，颜色，大小等。

　　超文本：音频，视频，图片称为超文本。

　　标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

HTML是负责描述文档语义的语言。

HTML的网络术语：

　　网页：由各种标记组成的一个页面就叫网页。

　　主页(首页)：一个网站的起始页或者导航页面。

　　标记：<p>被称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。

　　元素：<p>内容</p> 称为元素。

　　属性：给每个一标签所做的辅助信息。

HTML颜色介绍

颜色表示：

　　纯单色表示：red, green, blue等。

　　10进制表示：rgb(255,0,0)等。

　　16进制表示：#FF0000，#0000FF，#00FF00等。

RGB色彩模式：

自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。

HTML的规范

　　HTML是一个弱势语言。

　　HTML不区分大小写。

　　HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)。

　　HTML的结构：

　　　　声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。

　　　　head部分：将页面的一些信息告诉服务器，并不会显示在页面上。

　　　　body部分：我们的代码放在此标签内。

编写HTML的规范：

　　1，所有标记的元素都要正确的嵌套，不能交叉嵌套。

　　2，所有的标记必须小写。

　　3，所有的标记必须关闭。

　　　　双边标记：如 <p></p>

　　　　单边标记：如 <br> 一般最好在里面加上反斜杠如<br />

HTML的基本语法特征：

　　HTML只在乎标签的嵌套结构，嵌套的关系。对空格(换行，tab)不敏感。

　　空白折叠现象：HTML中所有的文字之间，如果有空格，换行，tab都将被折叠为一个空格显示。

HTML结构详解:

新建HTML文件，输入html:5 ,按tab键，自动生成如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

任何一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE...

开头，就是文档的声明头，DocType Declaration 简称DTD，此标签可告知浏览器文档使用 HTML或者XHTML规范。

XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。

XHTML的主要目的是为了取代 HTML，也可以理解为HTML的升级版。

HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。

XHTML与HTML4.0的标记基本上一样。

XHTML是严格的、纯净的 HTML。

头标签(head)

　　head标签放在头部分，这里面包含了<title>,<meta>,<link>,<style>

　　　　<title>：指定整个网页的标题，在浏览器最上方显示。

　　　　<meta>：提供有关页面的基本信息。

　　　　<link>：定义文档与外部资源的关系。

　　　　<style>：定义内部样式表与网页的关系。

meta标签介绍

　　元素可提供有关页面原信息，针对搜索引擎和更新频度的描述和关键词。

　　标签位于文档的头部，不包含任何内容。

　　提供的信息是用户不可见的。meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　http-equiv属性：

　　　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <!-- 重定向 2秒后跳转到对应的网址 -->
    <meta http-equiv="refresh" content="2;url=http://www.baidu.com"/>
    <!-- 指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!-- 告诉IE浏览器以最高级模式渲染当前网页 -->
    <meta http-equiv="x-ua-compatible" content="IE-edge" />
</head>
<body>
    你好
</body>
</html>

　　name属性：

　　　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用逗号隔开，与之对应的属性为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

title标签

　　主要是用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

HTML标签中有两类标签：

　　1，字体标签。

　　2，排版标签。

字体标签

　　字体标签包含：h1~h6，<font>、<u>、<b>、<strong><em>、<sup>、<sub>

标题：

　　标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<body>
    <h1>顾清秋</h1>
    <h2>顾清秋</h2>
    <h3>顾清秋</h3>
    <h4>顾清秋</h4>
    <h5>顾清秋</h5>
    <h6>顾清秋</h6>
    
</body>
</html>

字体标签<font>

　　color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 #ff00cc rgb(0,0,255)

　　size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决

　　face="楷体"：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<body>
    <!-- <h1>顾清秋</h1>
    <h2>顾清秋</h2>
    <h3>顾清秋</h3>
    <h4>顾清秋</h4>
    <h5>顾清秋</h5>
    <h6>顾清秋</h6> -->
    <font color="red" size="3" face="楷体">顾清秋</font>
</body>
</html>

粗体标签<b>或<strong>

顾清秋
<b>顾清秋</b>
<strong>顾清秋</strong>

下划线标记<u>中划线标记<s>

<u>顾清秋</u>
<s>顾清秋</s>

斜体标记<i>或<em>

顾清秋
<i>顾清秋</i>
<em>顾清秋</em>

上标<sup>下标<sub>: bottom:底部

5<sup>2</sup>
5<sub>2</sub>

特殊字符　

 ：空格（non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™

　　重要： 、<、>、&copy

比如：如果想把一个标签如<p>作为一个文本再页面上显示，直接写是不行的，所以需要转义字符。

这是一个HTML语言的&lt;p&gt;标签

排版标签

　　段落标签<p>

　　　　段落：是英文paragraph的缩写。

　　　　属性：

　　　　　　align = '属性值'：对齐方式。属性值包括：left、center、right

<p>这是一个段落</p>
<p align="left">这是一个段落</p>
<p align="center">这是一个段落</p>
<p align="right">这是一个段落</p>

HTML标签是分等级的，将所有标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

块级标签 <div>和<span>

　　div和span是非常重要的标签，div的语义是division‘分割’;span的语义是‘范围，跨度’。在CSS中，这两个都是非常重要的"盒子"。

　　div：把标签中的内容作为一个快来对待，必须独占一行。

　　div标签的属性：

　　　　align="属性值"：设置块的位置，属性值可以选择：left，right，center。

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

<div>导航栏</div>
<div>首页</div>
<span>你好</span>
<span>世界</span>

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span举例：

<p>
        商品简介：
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
    </p>

div举例：

<div class="header">
    <div class="logo">
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
</div>
<div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

换行标签<br>

　　当打算结束一行，而又不想开启一个新段落，就用<br>

this<br/>is a para<br/>graph with line breaks

<p>标签和<br>标签的区别： <p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；且<br>标签没有属性。

水平线标签<hr>

　　水平分隔线：可以在视觉上将文档分个成各个部分。

<p>顾清秋</p>
<hr/>
<hr/>
<p>段落</p>

内容居中标签<center>

　　此时center代表的是一个标签，不是属性，只要在这个标签内的内容都会居中显示在页面中。

<center>
    <p>你好！世界</p>
</center>

预定义(预格式化)标签 <pre>

　　保留其中的所有空白字符，原封不动的输出结果。(有多少空行输出多少空行)

超链接

　　外部链接：连接到外部文件。

<a href="http://www.baidu.com">点击跳转到百度</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

　　新页面打开链接：

<a href="http://www.baidu.com" target="blank">点击跳转到百度</a>

　　锚链接：

　　　　指给超链接起一个名字，作用是在本页面或者其他页面的不同位置进行跳转。

<a name="top">顶部</a>
<pre>
        






</pre>
<a href="#top">回到顶部</a>

顶部这个锚的名字叫做top。
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。注意上图中红框部分的#号不要忘记了，表示跳到名为top的特定位置，这是规定。如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去

邮件链接：

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果：点击之后，会弹出outlook，作用不大。

前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。

特殊的几个链接：

　　返回页面顶部位置：

<a href="#">跳转到顶部</a>

　　与js有关：

<a href="javascript:alert(1)">内容</a>
 <a href="javascript:;">内容</a>

javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</2
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<ahref="javascript:alert()">内容</a>

超链接的属性

　　href：目标URL。

　　title：悬停文本。

　　name：主要用于设置一个锚点的名称。

　　target：告诉浏览器用什么方式来打开目标页面，target属性有以下几个值：

　　　　_self：在同一个网页中显示(默认值)

　　　　_blank：在新的窗口中打开。

　　　　_parent：在父窗口中显示。

　　　　_top：在顶级窗口中显示

blank就是空白的意思，就表示新建一个空白窗口。前面加 _ 是规定。

图片标签 <img/>

　　img：代表的就是一张图片。单边标记。

　　img是自封闭标签，也成为但标签。

能插入的图片类型：　

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

src属性：图片的相对路径和绝对路径。

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案：用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
绝对路径，就是http://开头的路径。
绝对不允许使用file://开头的东西，这个是完全错误的！

img标签的常用其他属性：

　　width：宽度

　　height：高度

　　title：提示性文本，公有属性，也就是鼠标悬停时出现的文本。

　　align：指图片的水平对齐方式，属性值可以是：left，right，center

　　alt：当前图片显示不出来的时候，代替图片显示的内容，alt是英文alternate“替代”的意思(部分浏览器不支持)

注意事项：

　　如果要想保证图片等比例缩放，就设置width和height的其中一个。

　　如果想实现图文混排的效果，请使用align属性，取值为left或right。

通过点击一个图片跳转到一个链接：

　　将图片嵌套入超链接中。

    <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1526902655303_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E9%87%91%E6%9C%A8%E7%A0%94%E5%9B%BE%E7%89%87">
          <img src="./1.jpg" alt="金木研" title="金木研">
      </a>

posted @ 2018-05-21 19:45 Qingqiu_Gu 阅读(270) 评论(0) 编辑收藏举报

刷新页面返回顶部

Qingqiu_Gu

HTML

web标准

浏览器内核介绍：

开发工具介绍

HTML介绍

HTML颜色介绍

HTML的规范

HTML结构详解:

头标签(head)

meta标签介绍

title标签

HTML标签中有两类标签：

字体标签

标题：

字体标签<font>

粗体标签<b>或<strong>

下划线标记<u>中划线标记<s>

斜体标记<i>或<em>

上标<sup>下标<sub>: bottom:底部

特殊字符

排版标签

段落标签<p>

HTML标签是分等级的，将所有标签分为两种：

换行标签<br>

水平线标签<hr>

内容居中标签<center>

预定义(预格式化)标签 <pre>

超链接

外部链接：连接到外部文件。

锚链接：

邮件链接：

特殊的几个链接：

超链接的属性

图片标签 <img/>

能插入的图片类型：

src属性：图片的相对路径和绝对路径。

相对路径和绝对路径的总结

img标签的常用其他属性：

注意事项：

通过点击一个图片跳转到一个链接：

公告

特殊字符　

　　段落标签<p>

　　外部链接：连接到外部文件。

　　锚链接：

能插入的图片类型：　