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

简介: 前端--对前端的认识  一个网页的构成:Html用于描述页面的结构Css用于控制页面中元素的样式JavaScript用于响应用户操作 html超文本标记语言第一个demo:DOCTYPE html> 我是小帅哥我是大帅哥前端-- 注释注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码。

前端--对前端的认识 

 一个网页的构成:

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;

 

效果:

 

     

相关文章
|
8天前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是目前互联网行业中最为热门的职业之一。本文将介绍从零开始学习前端开发所需的基础知识和技能,包括HTML、CSS、JavaScript等方面的内容,并提供了一些实践性的建议和学习资源,帮助初学者快速入门。
22 1
|
27天前
|
前端开发 JavaScript
从零开始学习前端开发
前端开发是当前最热门的技术之一。本文将从零开始,详细介绍前端开发的基础知识和实践技巧,为初学者提供全面的学习指南。
16 0
|
1月前
|
设计模式 前端开发 算法
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
|
1月前
|
消息中间件 缓存 前端开发
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
|
1月前
|
前端开发 JavaScript Java
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
|
27天前
|
Web App开发 前端开发 JavaScript
从零开始学习前端开发
在当今数字化时代,前端开发人员的需求越来越高。本文将介绍从零开始学习前端开发所需学习的技能和工具,以及如何将这些知识应用到实际项目中。
|
27天前
|
前端开发 JavaScript 开发工具
从零开始学习前端开发技术
随着互联网的快速发展,前端开发成为了一个备受关注的职业。本文将从零开始介绍前端开发所需的基础知识和技能,并重点介绍常用的HTML、CSS和JavaScript语言,帮助初学者快速入门前端开发。
17 0
|
1月前
|
存储 JSON 前端开发
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习
|
5天前
|
存储 移动开发 前端开发
从零开始学习前端开发
前端开发是一项非常有前途的技能,在当今数字化时代中变得越来越重要。本文将介绍从零开始学习前端开发所需的基本知识,包括HTML、CSS和JavaScript的基础知识以及相关工具和框架。
|
6天前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是当前最热门的IT职业之一,随着互联网的飞速发展,对于具有良好前端知识的开发者需求不断增长。然而,对于初学者来说,学习前端开发需要掌握一系列的技术和工具,这可能会让他们感到非常困难和挫败。本文将从零开始,为初学者介绍前端开发的核心技术和实践经验。

热门文章

最新文章

相关产品

  • 云迁移中心