Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

##### HTML的主要作用:

设计网页的基础,HTML5

##### HTML语法规范

##### 扩展内容

b : 加粗

i : 斜体

strong: 加粗, 带语义标签

em: 斜体, 带语义

### 网站图片信息

#### 需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

#### 技术分析

img 标签:

常用的属性;

width : 宽度

height: 高度

src : 指定文件路径

alt: 图片加载失败时的提示内容

#### 2.5 扩展-文件路径

- 相对路径

```html
       ./       代表的是当前路径
       ../    代表的上一级路径
       ../../   上上一级路径
```

#### 3.2技术分析

列表标签:

无序列表: ul

type: 小圆圈,小圆点, 小方块

有序列表: ol

type: 1,a ,A,I,

start : 指定是起始索引

#### 3.4代码实现

```html
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   
   <body>
       <ul>
           <li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
           <li><a href="http://www.jiayuan.com">世纪家园</a></li>
           <li>珍爱网</li>
           <li>非诚勿扰</li>
       </ul>
   </body>
</html>

##### 3.5 扩展内容

点击链接,跳转去指定网站

a 超链接标签

常用的属性:

href: 指定要跳转去的链接地址

如果是网络地址需要加上http协议 ,

如果访问的是本网站的html文件,可以直接写文件路径

target : 以什么方式打开

_self: 默认打开方式,在当前窗口打开

_blank: 新起一个标签页打开页面

- 网站信息案例
- 字体标签 font
- color: 颜色
- size: 大小 1~7
- face: 改变字体
- p 段落标签
- h标题标签 : 1~6
- br 换行
- hr 水平线
- b 加粗
- i 斜体
- strong : 加粗包含语义
- em : 斜体包含语义
- 网站图片案例
- img标签
- src : 指定图片的路径
- width: 宽度
- height: 高度
- alt : 图片加载错误时的提示信息
- 相对路径:
- ./ 代表的是当前路径
- ../ 代表的上一级路径
- ../../ 代表的上上一级路径
- 友情链接:
- ul: 无序列表
- type :
- ol: 有序列表
- type : 样式
- start : 起始索引
- li : 列表项
- a 超链接标签
- href : 要访问的链接地址
- target : 打开方式
- 网站首页
- table标签
- border: 指定边框
- width : 宽度
- height : 高度
- bgcolor : 背景颜色
- align : 对齐方式
- tr标签
- td标签
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格单元格的合并
- 表格的嵌套

### 4.网站首页

#### 4.1需求分析:

根据产品文档,完成商城首页,显示效果如图:

#### 4.2技术分析:

##### 表格标签table

table标签:

常用的属性:

bgcolor : 背景色

width : 宽度

height : 高度

align : 对齐方式

tr 标签

td 标签

###### 合并单元格:

colspan : 跨列操作

rowspan : 跨行操作

注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

###### 表格的嵌套:

在td中可以嵌套一个表格

#### 4.3步骤分析

1. 创建一个8行一列的表格
2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分: 嵌套一个三行7列表格
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接

Hyper Text Markup Language 超文本标记语言

猜你喜欢