html学习

时间 2019-12-05

标签 html 学习栏目 HTML 繁體版

原文原文链接

什么是HTML？

HTML:超文本标记语言。
所谓超文本也就是超连接,可让咱们从一个网页跳转到另外一个网页。

HTML基本格式

<html>                              
    <head>                          
        <title>HTML入门</title>      
    </head>
    
    <body>
        <h1>Hello World</h1>
    </body>
</html>

html：css

根标签:只有一个（网页全部内容都应该写在根标签里面）

head:html

子标签：用来设置头部内容

body:html5

子标签:网页主体,全部要显示的内容放这里面

title：windows

网页的标题标签，也就是网页显示名字。
搜索引擎检索页面时，会首先检索titlte中的内容。
元素：一个完整的标签<></>
标签<>

HTML后缀名

将编写好的文件保存为.html网页格式文件浏览器
显示文件格式名框架

HTML注释

<！-- 这是一个注释的格式，能够直接换行
     继续写注释。
 -->

注释中的内容，不会显示在页面。
能够写注释来对代码进行描述，便于后期的维护。要养成良好的编写注释习惯。

标签属性

<html>
    <head>
        <title>HTML入门</title>
    </head>
    
    <body>
        <h1>Hello <font color="red">World</font> ！</h1>
        <!-- 这是一个注释，不会显示在网页中。 -->
    </body>
</html>

显示效果：工具

属性只能在开始标签中设置
属性名 ="属性值"
怎么知道有哪些属性，能够参考W3C

文档申明

主要用于申明网页版本最新为html5ui

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>

进制

二进制编码

满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 。。。。

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

乱码问题

用PC自带记事本能够写html，可是效率不高。

经常使用html编写工具：

Sublime、notepad++等等

在计算机中保存的任何内容，都须要转为为0 1这种二进制来保存，包括在读取内容时，须要将二进制彪马，在转换为正确的内容。
编码：一句必定的规则，将字符转换为二进制编码的过程。
解码：一句必定的规则，将二进制编码转换为字符的过程。
字符集：编码和解码所采用的规则，咱们称为为字符集
产生乱码缘由：编码和解码采用的字符集不一样。
经常使用字符集：ASCII（最先）、IOS-8859-一、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

标题标签

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

使用HTML标签时，关心的是标签的语义，咱们使用的标签时语义化标签，全部表现都使用CSS来设置。

h1:对搜索引擎，重要性仅次于title标签

h1：很是重要，为影响搜索引擎中的排名

页面中只能写一个h1

通常只使用h1\h2\h3

段落标签

用于表示内容的一个天然段

使用P标签

<p>个人一个p段落标签</p>

p标签默认会占一行，端与端之间有间距

表现的都用css，html不关心

html都是语义标签

换行标签

空格：

&nbsp;     空格

换行标签

<br />     换行，是一个单标签（自结束标签）

横线

<hr />    水平线，是一个自结束标签

实体(特殊元素)

特殊字符（实体）

&lt；    小于
&gt;     大于

版权

&copy;    版权

参考W3c实体

图片

支持图片格式：jpeg、gif、png

jpeg不支持透明，经常使用于保存图片颜色丰富的图片

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

png支持的颜色多，而且支持复杂透明，能够用来显示颜色复杂的透明图片。

实际开发中经常使用png多一点。

图片使用原则：

效果不一致，使用效果好的，

想过一致，使用小的。

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

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

只设置width或height时，高度或宽段会按比例自动变化。若是同时制定宽度和高度，图像比例会发生变化。

路径问题

通常使用相对路径：

返回上级目录

../     访问上级目录

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

mate标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" name="keywords" content="html5,JavaScript,前段，Java"/>
        <title>html练习笔记01</title>
        <meta name="description"content="发布html五、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;邓凌
    </body>
</html>

name:名字

content:内容

使用meta标签还能够用来设置网页的关键词
还能够用来制定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，可是这两个值不会影响页面在搜索引擎中的排名
能够用来作请求的重定向
```
<meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>
```
content:

5:时间秒数

url：重定向链接地址

HTML语法规范

XHTML：语法相对更严格

HTML中不区分大小写的，可是咱们通常都使用小写。有些状况仍是使用大写。
HTML中注释不能嵌套。
HTML标签必须结构完整，要么成对出现，要么自结束标签。
HTML标签能够嵌套，不能交叉嵌套。
HTML标签中的属性必须有值，且必须加引号。

内联框架（用得很少）

一个页面引入另外一个外部页面

属性：

src：只想一个外面页面的相对路径

<iframe src="html.html" name="show"></iframe>

现实开发中不推荐使用，由于内联框架中网页，搜索引擎不会搜

width：
height：
name：能够为内联框架制定一个name属性，经过该名字使用超连接标签时，能够将跳转页面显示在内联框架中。

超连接

使用超连接能够一个页面跳转到另外一个页面

代码：

<a href="https://ww.baidu.com" target="_blank">百度一下</a>

href: 指向链接跳转的目标地址，能够写一个相对路径也能够写一个绝对路径。
默认访问过的链接和没有访问过的链接，颜色有区别。

若是href值设置为#,链接会回到顶部，设置为#id值，就回到那。

<a href="#foot">回到底部</a>

<a href="#">回到顶部</a>
<center id="foot">我会居中显示哦</center>

联系咱们，自动打开发送邮件应用程序。

设置href值为mailto:邮件地址
```
<a href="mailto:batis@foxmail.com">联系咱们</a>
```
没有邮件应用程序，就不会打开，有会自动填充发送人邮箱地址。
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>

居中标签

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

center内容居中，不同意使用，表现形式的最后都使用css来实现。

ID属性

全部标签均可以使用id属性，用于标志标签，id不能数字开头，不能重复。

使用如:

超连接回到底部。

1. HTML学习
2. html 学习
3. HTML学习 day04
4. html学习
5. html学习day2.1
6. web学习html
7. Html学习
8. HTML学习（一）
9. HTML学习（二）
10. html学习 -- 2
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议