HTML入门（一）

时间：2018-09-09 18:14:44 阅读：185 评论：0 收藏：0 [点我收藏+]

标签：总结入门 index 列表开始客户 doctype red details

HTML基本语法及常用标签

0序言：

html文件可使用任意编辑其，最终把文件后缀名改为.html即可(txt等。推荐notepad++)，文末有文中所用所有html示例文件的下载地址。

一、HTML文档结构

html文档框架及解释

<!doctype html>　　　    　//指定文档类型
<html>　　　　　　　　     //html开始标签　
<head>　　　　　　　　   　//头开始标签

</head>                        //头结束、、
<body>                        //身体开始标签
     
</body>                        //身体结束、、
</html>　　　　　　　      　//html结束标签

基本框架运行效果（空白页）

html文档的注释

在上述中以 // 为html注释是不可运行的，在html中有其独特的注释方式：

<!-- 我是一个注释 -->
<!doctype html>　　　    　
<html>　　　　　　　　     　
<head>　　　　　　　　   　

</head>                        
<body>                        
     
</body>                        
</html>

二、HTML语法

　　html的标签是定义好的标记，用来控制页面显示的内容（文字、列表、图像等），通过定义标签的属性可以定义网页的内容样式。

　　标签分为单标签和成对标签

单标签
```

 
```

成对标签

<!--字体标签-->
<font size = "5" color = "red" face = "楷体">红色字体</font>

三、HTML常用标签实例

meta标签（单标签）

meta标签属于head标签的子标签，有http-equiv（用于指定协议头类型）和 content（用于指定头类型的值）两大部分
content的值有多个时用；隔开（如refresh类型content的值）

http-equiv类型总结:

content-type: 用于定义用户的浏览器或相关设备以何种方式加载数据(指定网页的编码方式)。

<!doctype html>　　　    　
<html>　　　　　　　　     　
<head>
    <!--meta作用：指定text/html（普通网页打开资源），编码方式为UTF-8-->　　　　　　　　   　
    <meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8"/>
</head>                        
<body>                        
     
</body>                        
</html>

content-language:用于指定页面的编码方式，此值也可包含在content-type协议头中（如上定义了UTF-8）：

<!--meta作用：指定编码方式为UTF-8-->　　　　　　　　   　
<meta http-equiv = "Content-language" content = "charset = UTF-8"/>

refresh：用于指定页面的刷新或转跳的间隔时间和转跳的资源。

<!--meta作用：3s后跳转到我的github上里面有本文所用到的所有html文件-->　　　　　　　　   　
<meta http-equiv = "refresh" content = "3; url = https://github.com/Sunrisepeak/webLearning/tree/master/HTML"/>    
<!--meta作用：每3s刷新页面一次-->　　　　　　　　   　
<meta http-equiv = "refresh" content = "3"/>

expires：用于指定缓存过期时间。缓存一旦过i就，当有客户请求页面时，必须从服务器上重新下载。

pragma与no-cache：

<!--表示禁止浏览器从本地计算机的缓存中访问页面内容，这样将无法实现脱机访问-->
    <meta http-equiv = "pragma" content = "no-cache"/>

set-cookie:

<!--设置cookie,浏览器访问某个页面时会将cookie保存在缓存中，在下次访问可以从缓存中读取，以提高速度。必须用GMT格式指定cookie过期时间-->
    <meta http-equiv = "set-cookie" content = "cookievalue = xxx; expires = Mon,12 May 2001 00:20:00 GMT"/>

name类型：

keywords：为搜索引擎提供关键字列表。

<meta name = "keywords" content = "key1,key2,key3....."/>

description：为搜索引擎提供网页的主要内容的描述。
```
<meta name = "description" content = "网页描述信息"/>
```
author：标明网页的制作者。

robots：用于提示那些页面需要索引，那些页面不需要索引。

<!--
content的值：
    all            文件将被检索，且页面上的链接可以被查询
    none        　　文件将不被检索，且页面上的链接不可以被查询
    index        文件将被检索
    follow       页面上的链接可以被查询
    noindex    文件将不被检索，但页面上的链接可以被查询
    nofollow   文件将被检索，但页面上的链接不可以被查询
-->

2.title标签:<title></title>

title.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv = "content-type" content = "charset = UTF-8"/>
    <title>快看标题栏</title>
</head>
<body>
    
</body>
</html>

3.文本标签

字体标签实例,(成对标签可定义color 、 size 、face属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv = "content-language" conetnt = "charset=UTF-8">
    <title>font 标签的使用示例</title>
</head>
<body>
    <font size = "+5" color = "blue" face = "楷体">这是蓝色五号楷体</font>
    <br/>
    <font size = "4" color = "#FF0000" face = "隶属">这是红色四号隶属</font>
</body>
</html>

标题标签实例:<hx></hx>,标题属于块级元素，浏览器会自动在标题前后加上空行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题标签的使用的实例</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

换行标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>换行标签的使用</title>
</head>
<body>
    <!--单标签只起换行作用，没有相互关系-->
    春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少
</body>
</html>

段落标签：</> , x =(center,left,right)--------------也可单独使用O

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv = "content-type" content = "charset = UTF-8"/>
    <title>段落标签使用实例</title>
</head>
<body>
    <!--成对标签，align属性的值为居中（center）-->
    <p align = "center">春晓</p>
    <p align = "center">
    春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少
    </p>
    <p align = "right"> 我是单独使用的例子
</body>
</html>

特殊字符：----------------https://blog.csdn.net/pierre_/article/details/51306393

4.列表标签：分有序列表和无序列表两类，通常结合使用。

无序列表：使用<ul>定义，列表项使用<li>定义，列表项的内容位于一对<li>标签之内。<li>标签有属性type(disc 默认值；为实心圆；circle为空心圆；square为实心方块)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv = "content-type" content = "charset = UTF-8"/>
    <title>无序列表的使用实例</title>
</head>
<body>
常见的体育运动有：<br/>
    <ul>
        <!--默认-->
        <li>篮球</li>
        <!--实心圆-->
        <li type = "disc">P球</li>
        <li type = "circle">pingPang球</li>
        <!--实心方块-->
        <li type = "square">zHu球</li>
</body>
</html>

更新中、、、、、

全文html示例文件下载地址?：点我

HTML入门（一）

标签：总结入门 index 列表开始客户 doctype red details

原文地址：https://www.cnblogs.com/sunrisepeak/p/9607525.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行