前端学习--认识，注释，基础，进制，乱码，实体

前端--对前端的认识　

　一个网页的构成：

Html用于描述页面的结构

Css用于控制页面中元素的样式

JavaScript用于响应用户操作

 

html

超文本标记语言

第一个demo:

<!DOCTYPE html>
<html>
<head>
    <title>我是小帅哥</title>
</head>
<body>
<H1>我是大帅哥</H1>
</body>
</html>

前端-- 注释

<!-- 注释内容 -->

注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。

也可以通过注释隐藏一些页面中不想显示的内容。

<!-- 
    html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<html>
    <!-- 
        head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的
    -->    
    <head>
        <!-- 
            title网页的标题标签，默认会显示在浏览器的标题栏中
                搜索引擎在检索页面时，会首先检索title标签中的内容
                它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
        -->
        <title>网页的标题</title>
    </head>

    <!--
        body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
     -->
    <body>
        <!-- 
             在这个结构中，可以来编写HTML的注释
             注释中的内容，不会在页面中显示，但是可以在源码中查看
             我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作    
            一定要养成良好的编写注释的习惯，但是注释一定要简单明了        
         -->            

        <!-- 
            属性：
                可以通过属性来设置标签如果处理标签中的内容
                可以在开始标签中添加属性
                属性需要写在开始标签中，实际上就是一个名值对的结构
                属性名 = "属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
        -->
        <h1>这是我的<font color="green" size="7">第二个</font>网页</h1>
    </body>
</html>

<font></font>用来设置字体，color属性用来设置颜色，size用来设置字体大小

效果：

 

w3c上面的标签列表，来自http://www.w3school.com.cn/tags/index.asp：

标签描述
<!--...--> 定义注释。
<!DOCTYPE>  定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dir> 不赞成使用。定义目录列表。
<div> 定义文档中的节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<h1> to <h6> 定义 HTML 标题。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<kbd> 定义键盘文本。
<keygen> 定义生成密钥。
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义命令的列表或菜单。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义文档中的节。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> 为 <details> 元素定义可见的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义可能的换行符。
<xmp> 不赞成使用。定义预格式文本。

 如何让浏览器识别到底是html4还是xhtml还是html5?

利用文档声明：<!doctype html>

主要作用：

  1. 用来标识当前页面的html的版本;
  2. 该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的。

doctype

HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。

html4

　　1、过渡版
　　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

 

　　2、严格版
　

　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

 

　　3、框架集
　　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

xhtml1.0

过渡版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Html5

<!DOCTYPE html>

 

怪异模式

为了兼容一些旧的页面，浏览器中设置了
两种解析模式：
– 标准模式（Standards Mode）
– 怪异模式（Quirks Mode）

怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
避免的最好方式就是在页面中编写正确的doctype。

 

进制

几进制就是满几进一

二进制：

0 1

例如:10 11 100 101 110 111

十进制：

0 1 2 3 4 5 6 7 8 9

例如：10 11 12 13 14 。。。

十六进制：

满16进1

0 1 2 3 4 5 6 7 8 9 a b c d e f

a b c d e f分别表示10,11,12,13,14,15

例如：10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15

八进制：

满8进1

0 1 2 3 4 5 6 7

例如：10 11 12 13 14 15 16 17 20 21 22

 

乱码

产生乱码的根本原因是，编码和解码采用的字符集不同。

 

计算机是一个非常笨的机器，它只认识两个东西 0 1。在计算机中保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。

比如：中国，在计算机底层，可以能需要转换为 1010001001010101011010。

在读取内容时，需要将二进制编码，在转换为正确的内容。

编码：依据一定的规则，将字符转换为二进制编码的过程。

解码：依据一定的规则，将二进制编码转换为字符的过程。

 

常见字符集：

ASCII

ISO-8859-1

GBK

GB2312：中文系统的默认编码。

UTF-8：万国码，支持地球上所有的文字。

ANSI：自动以系统的默认编码来保存文件。

告诉浏览器网页所使用的编码字符集，通过meta来进行设置，避免乱码问题的产生。

meta标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介，

<!doctype html>
<html>
    <head>
        <!-- 需要来告诉浏览器，网页所采用的编码字符集
            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
            meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
        -->
        <meta charset="utf-8">
        <title>网页的标题</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
    </body>
</html>

常用标签

内容标题标签

h1~h6

-在HTML中，一共有六级标题标签
h1 ~ h6
在显示效果上h1最大，h6最小，但是文字的大小我们并不关心
使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签
6级标题中，h1的最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1

一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用 

<!doctype html>
<html>
    <head>
        <!-- 需要来告诉浏览器，网页所采用的编码字符集
            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
            meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
        -->
        <meta charset="utf-8">
        <title>网页的标题</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
        <h2>这是一个非常漂亮的网页</h2>
        <h3>这是一个非常漂亮的网页</h3>
        <h4>这是一个非常漂亮的网页</h4>
        <h5>这是一个非常漂亮的网页</h5>
        <h6>这是一个非常漂亮的网页</h6>
    </body>
</html>

效果：

段落标签：

段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距

<!doctype html>
<html>
    <head>
        <!-- 需要来告诉浏览器，网页所采用的编码字符集
            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
            meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
        -->
        <meta charset="utf-8" />
        <title>网页的标题</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
        <p>段落标签1</p>
        <p>段落标签2</p>
    </body>
</html>

效果：

自结束标签br

在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，
换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签 

<!doctype html>
<html>
    <head>
        <!-- 需要来告诉浏览器，网页所采用的编码字符集
            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
            meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
        -->
        <meta charset="utf-8" />
        <title>网页的标题</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
        <p>
            张三，<br />
            李四，<br />
            赵雷，<br />
            王五。<br />
        </p>
    </body>
</html>

效果：

自结束标签hr

hr标签也是一个自结束标签，可以在页面中生成一条水平线

<!doctype html>
<html>
    <head>
        <!-- 需要来告诉浏览器，网页所采用的编码字符集
            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
            meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
        -->
        <meta charset="utf-8" />
        <title>网页的标题</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
        <hr></hr>
        <p>
            张三，<br />
            李四，<br />
            赵雷，<br />
            王五。<br />
        </p>
    </body>
</html>

效果：

实体

 

在HTML中，一些如< >这种特殊字符是不能直接使用，
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体的语法：
&实体的名字;
< &lt;
> &gt;
空格 &nbsp;
版权符号 &copy;

 

html中实用的实体：

http://w3school.com.cn/html/html_entities.asp 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>实体</title>
    </head>
    <body>
        <!-- 
            在HTML中，一些如< >这种特殊字符是不能直接使用，
                需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
                浏览器解析到实体时，会自动将实体转换为其对应的字符
            实体的语法：
                &实体的名字;
                    <  &lt;
                    >  &gt;
                    空格  &nbsp;
                    版权符号 &copy;
        -->
        a&lt;b&gt;c
        <p>&copy;&divide;老王&nbsp;&nbsp;&nbsp;爱琼琼</p>
    </body>
</html>
显示结果描述实体名称实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
§ 小节 &sect; &#167;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

 

效果：

 

     

posted @ 2017-02-23 00:36  西北野狼  阅读(461)  评论(0)    收藏  举报