01HTML基础
一直感觉自己基础还需要加强，这次就跟着就业班一步一步踏踏实实的来，每个细节都做笔记巩固，希望这次就业班结束时能力有进一步提升，今天就从HTML开始吧！！！
[目录]
一、HTML基础知识介绍
- HTML（Hypertext Markup Language）：即文本标记语言
- HTML特点
- 不需要编译，直接由浏览器执行
- 文件是一个文本文件
- 文件必须使用 .html或 .htm为文件名后缀
- 大小写不敏感，html和HTML是一样的
- 开发工具
- 记事本、Word、Dreamweaver、WebStorage、sublime、visual studio都可以，目前比较常用的是sublime、WebStorage和visual studio
- DOCTYPE文档类型声明
- <!DOCTYPE>声明必须放在HTML文档第一行
- <!DOCTYPE>声明不是HTML标签
- 网页编码设置
当网页乱码时，在<head></head>标签之间添加：
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
二、HTML基础语法
- HTML基础结构
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
- HTML属性
语法：<标签名 属性名1=“属性值” 属性名2=“属性值”……>……</标签名>
三、文字和段落标签
- 标题标签：<h1></h1>~<h6></h6>
- 段落标签：<p></p>
值 |
描述 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 对行进行伸展，这样每行都可以有相等的长度 |
- 换行标签：<br/> 横线标签：<hr/>
- <pre> </pre> 预格式化标签保留编辑格式
- 文字斜体：<i></i> <em></em>
加粗：<b> <b/> <strong> </strong>
上标：<sup> </sup>
下标：<sub> </sub>
6.特殊符号
属性 |
显示结果 |
描述 |
|---|---|---|
< |
< | 小于号 |
> |
> | 大于号 |
® |
® | 已注册 |
© |
© | 版权 |
™ |
™ | 商标 |
|
Space | 空格 |
四、列表标签
- 无序列表
<ul>
<li>列表项</li>
……
</ul>
type属性值 |
描述 |
|---|---|
| disc | 圆点 |
| square | 正方形 |
| circle | 空心圆 |
- 有序列表
<ol>
<li>列表项</li>
……
</ol>
type属性值 |
描述 |
|---|---|
| 1 | 数字 |
| a | 小写字母 |
| A | 大写字母 |
| i | 小写罗马数字 |
| I | 大写罗马数字 |
- 定义列表
<dl>
<dt>定义列表项</dt>
<dd>列表描述</dd>
<dd>列表描述</dd>
……
</dl>
五、图像和超链接标签
- 图像标签
<img src="" alt=""/>
属性 |
值 |
描述 |
|---|---|---|
| src(必写) | url | 显示图像的url |
| alt | 文字 | 图像替代文本 |
| height | 数值和百分比 | 图像的高 |
| width | 数值和百分比 | 图像的宽 |
- 路径
- 绝对路径：从根目录开始写
- 相对路径：相对于网页的文件写
- 路径的写法
- 在同一级目录下：
<img src="1.jpg"/> - 在上一级目录中：
<img src="../1.jpg"/> - 在下一级目录中：
<img src="../../1.jpg"/>
- 在同一级目录下：
- 超链接标签
<a href="">内容</a>
href：链接地址，可以是内部链接或外部链接
属性 |
描述 |
|---|---|
| href | 链接地址 |
| target | 目标窗口 _self _blank _top _parent |
| title | 链接提示文字 |
| name | 链接命名 |
- 空链接
<a href="#">内容</a> - 定义锚
- 同页面
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="……" name="锚名1">内容</a>
……
<a href="……" name="锚名1">内容</a>
……
- 不同页面
网页1：<a href="网页名称#锚名">……</a>
网页2：<a href="锚名">……</a>
- 邮件链接：
<a href="mailto:邮件地址"></a> - 文件下载：
<a href="下载文件地址"></a>
