zoukankan      html  css  js  c++  java

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

    前端--对前端的认识　

    　一个网页的构成：

    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;

    效果：

         

  • 相关阅读:
    5种主要聚类算法的简单介绍-转发
    序列标注中的BIO标注介绍
    Lecture1- Introduction and Word Vectors 斯坦福 nlp 教程
    Word embedding
    RNN
    《生成对抗网络GAN的原理与应用专题》笔记
    《自控力》《基因组：人类自传》的读后联想
    开源共享一个训练好的中文词向量（语料是维基百科的内容，大概1G多一点）
    “程序的迭代”——复杂性度量随想
    人工智能算法脑图
  • 原文地址：https://www.cnblogs.com/androidsuperman/p/6431665.html
Copyright © 2011-2022 走看看