学习html总结(一)
一、什么是HTML
HTML是HyperText Markup Language的缩写,翻译成中文是超文本标记语言,用于网页的创建。
二、HTML的基本结构
主要包括<!DOCTYPE html>文档类型、<head>头部和<body>主体三部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
三、HTML的头部
1、meta标签
1.1charset 设置文档的字符集编码格式
<meta charset="UTF-8">
常见的几种字符集编码格式:
a.UTF-8 :万国码(最常用)。
b.GB-2312 :国标码。
c.GBK :扩展的国标码。
1.2name 将该网页的信息写给搜索引擎看
<meta name="keywords" content="这是搜索网页的关键字"/>
<meta name="description" content="这是网页的介绍"/>
第一行是网页的关键字,用于搜索该网页。第二行是网页的介绍。
常用的name属性值有:author(作者)keywords(关键字)description(网页描述)。
2、title标签——网页的标题
<title>这是网页的标题</title>
四、HTML的主体
1、标签的分类:块级标签和行级标签
1.1块级标签:显示为块状,前后隔一行(自动换行)
a.标题标签 <h1>到<h6>,h1最大,h6最小。
<h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <hr /> <!--水平线--> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> <hr />
<pre>这是预格式标签 可以换行</pre> <!--预格式标签,可以保留代码的排版格式-->
f.<blockquote></blockquote>引用标签
g.有序列表ol和无序列表ul
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
h.定义描述列表dl
<dl> <dt>定义列表标题</dt> <dd>描述项第一项</dd> <dd>描述项第二项</dd> </dl>
i.分区标签
<div></div> 可以包裹任何标签,也可以被包裹进任何标签。
<span style="color: red;font-size: 33px;">姜浩是我大哥</span> <!--color 字体颜色 font-size 字体大小 background-color 背景颜色 font-weight 加粗--> <em>表示为强调,字体倾斜</em> <strong>表示强调,字体加粗</strong> <i>表示切斜,没有强调效果</i> <b>表示加粗,没有强调效果</b> <q>表示短引用,自带双引号</q> <small>字体比正常字体小一号,可以多重嵌套</small> <big>字体大一号</big> <s>表为倾斜</cite> <code>表示计算机代码,但不会保留格式,需要配合示有误文本,删除线</s> <cite>表示引用,浏览器表示pre标签使用</code> <bdo dir="ltr">表示文本方向,ltr:从左往右 rtl:从右往左</bdo> X<sup>2</sup> <!--sup:上标文本 sub:下标文本--> <!--版权符号 空格--> © © 空格 <u>这是下划线标签</u> <mark>高亮或标记文本 浏览器显示为黄色背景</mark>
b.超链接 <a href="" target=""></a>
<a href="https://www.baidu.com/" target="_blank" title="打开百度">表示超链接</a> <!--href表示跳转的地址; target表示页面打开的位置:self自身页面打开(默认),blank新页面打开; title表示超链接的标题,也就是鼠标指上去显示的东西--> <a href="练习.html#bottom">打开超链接</a> <!--相对路径的三种情况: 如果在同一文件夹,直接写“文件名.后缀” 如果在下一层文件夹,写“文件夹名/文件名.后缀” 如果在上层文件夹,写“../文件夹名/文件名.后缀” ..的意思是上一层文件夹,类似后退-->
c.锚链接
自身页面锚链接:先定义锚点<a name=name1>、设置超链接跳转到锚点<a href="#name1">
页面间锚链接:先在另一个页面设置锚点<a name=name2></a>,然后在本页面跳转链接,<a href="链接地址#name2">
d.功能性连接:mailto 用于给指定邮箱发送邮件 http file ftp
<a href="mailto:j.com" target="_self">点击就送</a>