HTML入门（一）

发布时间：2023-09-06 02:14责任编辑：董明明关键词：HTML

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入门（一）

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

HTML入门（一）

知识推荐