一.HTML初识
HTML概述
HTML：超文本标记语言（Hyper TextMarkup Languag，通过HTML标签对网页中的文字、图片、连接进行美化 关键词：文本、标记、语言
HTML格式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
标签 | 意义 --- | --- html | 最外层的标签，所有标签都包含在html标签中 head | 头部标签，包含了title标签、meta 标签、style标签等标签 title | 定义标题标签，显示在网页标签上 body | "身体"标签，网页所有内容都在body标签中
标签分类：
标签都大部分都是使用<>进行包裹,有开始标签和结束标签，只有少部分标签属于单标签，不需要闭合。 标签名 | 举例 | 展示 --- | --- | --- 双标签 | html、body、div、p标签等 | <html></html> | 单标签 | hr、br | <br />、<hr /> |
标签关系
- 嵌套关系
<html>
<head>
</head>
</html>
- 并行关系
<head>
</head>
<body>
</body>
文档类型<!DOCTYPE>
<!doctype html>：表示html文档类型。
meta标签
<meta charset="UTF-8">：使用UTF-8编码格式。
二.标签的语义化
标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五极标题</h5>
<h6>这是六级标题</h6>
段落标签
<p>这是p标签，段落标签</p>
水平线标签
<hr />
换行标签
<br />
布局、盒子模型标签
<span>行内元素</span>
<div>盒子标签</div>
文本格式化标签
标签类型 | 标签 | 推荐使用| --- | --- | ---| 加粗 | <b></b>、<strong></strong> | 推荐使用strong标签，语义更强烈| 斜体 | <i></i>、<em></em> | 推荐使用em标签 删除线 | <s></s>、<del></del> | 推荐使用del标签 下划线 | <u></u>、<ins></ins> | 推荐使用ins标签
标签属性
标签属性
<p size=10px color='red'>标签属性</p>
- 写在开始标签内部
- 使用空格隔开
- 可以写多个属性
图像标签
<img /> ：单标签,将图像显示在网页中，image缩写。通过多个属性展示。
<img src=./images/test.jpg alt='测试' />
属性 | 值 | 意义| --- | --- | --- src | 图片路径：相对路径、绝对路径、网络路径 | 图片存放的路径 alt | 替换文本 | 在图片无法显示时显示的替换文字 title | 鼠标悬停时显示的内容 | 提示信息 width | 宽度 | 设置图片的宽度，单位px height | 高度 | 设置图片的高度，不建议同时修改高度和快点 boder | 边框 | 设置边框的宽度，px
链接标签
链接标签：<a></a> a标签是用来在网页上添加链接或者锚点。
属性 | 描述 | 例子 --- | --- | --- href | 链接地址:相对路径、绝对路径、网页链接 | href="http://www.lovejoan.com" target | _blank:新建标签页 ，_self:原标签页打开 | 默认在原标签页打开链接、_blank重新打开一个标签
锚点
通过id的值加上a标签链接实现跳转。
<h3 id="live">个人生活</h3>
<a href="#live">个人生活</a>
base标签
在<head></head>标签里面统一设置链接的打开方式
<html>
<head>
<title>标题</title>
<base target="_blank"/>
<meta charset="utf-8">
</head>
<body>
</body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
</html>
特殊字符
特殊字符 | 值 --- | --- | 空格 < | < > | > © | ©
注释标签
<!--这个是注释-->
文件路径
类型 | 描述 | 示例 --- | --- | --- 绝对路径 | 从盘符开始写 | C:/Users/WZS/.packettracer 相对路径 | 相对当前文件的路径 | ./images/1.jpg 网络路径 | 跳转网络路径 | http://www.lovejoan.com
列表标签
- 无序列表 ：ul
- 有序列表 ：ol
- 自定义列表 dt
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
无序列表前面默认有项目符号，但可以通过CSS代码去掉。需要和<ul></ul>标签搭配使用
有序列表
<ol>
<li>西瓜</li>
<li>哈密瓜</li>
<li>三华李</li>
</ol>
使用ol标签+li标签显示有顺序的列表。
自定义列表
<dl>
<dt>测试</dt>
<dd>111</dd>
<dd>222</dd>
<dt>测试2</dt>
<dd>333</dd>
</dl>
自定义列表使用dl+dt+dd的方式来显示自定义列表。多用于网页底部的友情链接。 好了，大概先到这来吧！
