08月20, 2020

HTML学习

作为一名JAVA后端程序员,虽然前端不太在行,但是简单的HTML还是必不可少。最近工作中接触前端页面时,发现很多前端基础知识点已经忘了,于是又看来一次HTML,在这里简单记录一下HTML知识点,方便以后随时查看。

1、HTML基本格式

<html>                                
    <head>                            
        <title>HTML入门</title>       
    </head>

    <body>
        <h1>Hello World</h1>
    </body>
</html>

html:根标签,只有一个(网页所有内容都应该写在根标签里面)

head:子标签,用来设置头部内容

body:子标签,网页主体,所有要显示的内容放这里面

title:

  1. 网页的标题标签,也就是网页显示名字。

  2. 搜索引擎检索页面时,会首先检索titlte中的内容。

  3. 元素:一个完整的标签<></>

  4. 标签<>

2、HTML后缀名

  1. 将编写好的文件保存为.html网页格式文件

  2. 显示文件格式名

3、HTML注释

<!-- 这是一个注释的格式,可以直接换行
     继续写注释。
 -->
  1. 注释中的内容,不会显示在页面。

  2. 可以写注释来对代码进行描述,便于后期的维护。要养成良好的编写注释习惯。

4、标签属性

<html>
    <head>
        <title>HTML入门</title>
    </head>

    <body>
        <h1>Hello <font color="red">World</font> !</h1>
        <!-- 这是一个注释,不会显示在网页中。 -->
    </body>
</html>
  1. 属性只能在开始标签中设置

  2. 属性名 ="属性值"

  3. 怎么知道有哪些属性,可以参考W3C

5、文档申明

  1. 主要用于申明网页版本最新为html5
  2. html5的文档申明,申明当前的网页是按照HTML5页标准编写的一定要放在网页的最上边,不申明,则会导致有些浏览器有些页面无法正常显示,所以为了避免,一定要写文档申明.
<!DOCTYPE html>
<html>
    <head>
        <title>HTML入门</title>
    </head>

    <body>
        <h1>Hello <font color="red">World</font> !</h1>
        <!-- 这是一个注释,不会显示在网页中。 -->
        <h1>怎么知道有哪些属性?</h1>
        <p>可以参考<a href="http://www.w3school.com.cn/">W3C</a></p>
    </body>
</html>

6、进制

二进制

    满2进1

            0 1  。。。。

十进制

    满10进1

            0 1 2 3 4 5 6 7 8 9 10 11 12 。。。。

十六进制

    满16进1

        只能用10 11 12 13 14 15标志

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

        0--f

八进制

    满8进1

    0 1 2 3 4 5 6 7  10 11 12 13 。。。。

常用十进制、二进制、十六进制

7、乱码问题

用PC自带记事本可以写html,但是效率不高。常用html编写工具:Sublime、notepad++等等。

1. 在计算机中保存的任何内容,都需要转为为0 1这种二进制来保存,包括在读取内容时,需要将二进制彪马,在转换为正确的内容。
2. 编码: 一句一定的规则,将字符转换为二进制编码的过程。
3. 解码:一句一定的规则,将二进制编码转换为字符的过程。
4. 字符集:编码和解码所采用的规则,我们称为为字符集
5. 产生乱码原因:编码和解码采用的字符集不同。
6. 常用字符集:ASCII(最早)、IOS-8859-1、GBK(英文)、GB2312(中文)、UTF-8(万国码)

注意:中文系统浏览器,默认使用的是GBK进行解码

设置网页编码字符集

meta:用来这是网页的一些元数据,比如网页的字符集、关键字、简介

meta:是单标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML入门</title>
    </head>

    <body>
        <h1>Hello <font color="red">World</font> !</h1>
        <!-- 这是一个注释,不会显示在网页中。 -->
        <h1>怎么知道有哪些属性?</h1>
        <p>可以参考<a href="http://www.w3school.com.cn/">W3C</a></p>
    </body>
</html>

ANSI:自动编码。我们一般使用的是UTF-8。

8、标题标签

<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>

使用HTML标签时,关心的是标签的语义,我们使用的标签时语义化标签,所有表现都使用CSS来设置。

h1:对搜索引擎,重要性仅次于title标签,非常重要,会影响搜索引擎中的排名,页面中最好只能用一个h1。一般只使用h1、h2、h3。

9、段落标签

使用P标签,用于表示内容的一个自然段。

<p>我的一个p段落标签</p>

p标签默认会占一行,端与端之间有间距。表现的都用css,html不关心。html都是语义标签。

10、换行标签

空格:

&nbsp; 

换行标签(换行,是一个单标签(自结束标签))

<br />

横线(水平线,是一个自结束标签)

<hr />    

11、实体

特殊字符(实体)

&lt;    小于
&gt;     大于

版权

&copy;

参考W3c实体

12、图片

支持图片格式:jpeg、gif、png。

1、jpeg不支持透明,常用于保存图片颜色丰富的图片

2、gif支持的颜色少,支持动态图。支持简单透明。图片颜色单一用gif。

3、png支持的颜色多,并且支持复杂透明,可以用来显示颜色复杂的透明图片。

实际开发中常用png多一点。图片使用原则:

效果不一致,使用效果好的,效果一致的,使用小的。

<img src="1.gif" alt="图片" width="200px" height="120px"/>

alt:图片不能显示时,才显示,百度搜索只识别alt。

注意:只设置width或height时,高度或宽段会按比例自动变化。如果同时制定宽度和高度,图像比例会发生变化。

13、路径问题

一般使用相对路径:

返回上级目录

../     访问上级目录

绝对路径:直接在目录下面全路径

14、mate标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" name="keywords" content="html5,JavaScript,前段,Java"/>
        <title>html学习</title>
        <meta name="description"content="发布html5、js等前段相关信息"/>
        <meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>
    </head>
    <body>
        <a href="https://ww.baidu.com" target="_blank" style="text-decoration:none">百度一下</a>
        &nbsp; 
        <a href="https://www.taobao.com" target="_blank" style="text-decoration:none">淘宝</a>
        &nbsp; 
        <a href="https://www.jd.com" target="_blank" style="text-decoration:none">京东</a>
        <hr />
        <img src="../img/01.gif" alt="这是一个动态图片" width="600px"></img>
        <hr />
        <!--你好,欢迎光临---->
            a &lt; b
            <br />
            c &gt; d
            <br />
            &copy;ichating先生
    </body>
</html>

name:名字

content:内容

  1. 使用meta标签还可以用来设置网页的关键词。

  2. 还可以用来制定网页的描述,搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名。

  3. 可以用来做请求的重定向。

    <meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>

    content:

    1. 5:时间秒数
    2. url:重定向连接地址

15、HTML语法规范

XHTML:语法相对更严格

1. HTML中不区分大小写的,但是我们一般都使用小写。有些情况还是使用大写。

2. HTML中注释不能嵌套。

3. HTML标签必须结构完整,要么成对出现,要么自结束标签。

4. HTML标签可以嵌套,不能交叉嵌套。

5. HTML标签中的属性必须有值,且必须加引号。

16、内联框架

一个页面引入另一个外部页面,现实开发中不推荐使用,因为内联框架中网页,搜索引擎不会搜索。

  1. src:只想一个外面页面的相对路径

    <iframe src="html.html" name="show"></iframe>
  2. name:可以为内联框架制定一个name属性,通过该名字使用超链接标签时,可以将跳转页面显示在内联框架中。

17、超链接

使用超链接可以一个页面跳转到另一个页面。代码:

<a href="https://ww.baidu.com" target="_blank">百度一下</a>
  1. href:指向连接跳转的目标地址,可以写一个相对路径,也可以写一个绝对路径。

  2. 默认访问过的连接和没有访问过的连接,颜色有区别。

  3. 如果href值设置为#,连接会回到顶部,设置为哪个#id值,就回到哪个id位置。

    <a href="#foot">回到底部</a>
    
    <a href="#">回到顶部</a>
    <center id="foot">我会居中显示哦</center>
  4. 联系我们,自动打开发送邮件应用程序。 没有邮件应用程序,就不会打开,有会自动填充发送人邮箱地址。

    设置href值为mailto:邮件地址

    <a href="mailto:batis@foxmail.com">联系我们</a>
  5. target: 设置在哪里打开连接(默认值为_self)

    _blan: 在新页面中打开连接。

    _self: 在当前窗口中打开。

     <ul>
         <li><a href="https://www.baidu.com/" target="windows">主页</a></li>
         <li><a href="http://news.baidu.com/" target="windows">公司简介</a></li>
         <li><a href="https://tieba.baidu.com/index.html" target="windows">产品介绍</a></li>
         <li><a href="https://wenku.baidu.com" target="windows">联系方式</a></li>
     </ul>
     <iframe src="html.html" name="windows" width="100%" height="80%"></iframe>

18、居中标签

center内容居中,不赞成使用,表现形式的最后都使用css来实现。

<center>我会居中显示哦</center>

19、ID属性

所有标签都可以使用id属性,用于标志标签,id不能数字开头,不能重复。

通过id来设置、操作该元素,例如:超链接中通过id回到底部。

本文链接:https://www.yanxizhu.com/post/html.html

-- EOF --

Comments