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 超文本标记语言相关推荐

html文件是一种使用超文本标记语言,超文本标记语言HTML HTML(Hyper Text Markup Language,.ppt...
超文本标记语言HTML HTML(Hyper Text Markup Language, 5)链接到多媒体对象如果将标记的href属性的值指定为其它文件,那么就可以连接到指定的其它类型的文件.例如使 ...
HTML - 超文本标记语言 (Hyper Text Markup Language)
HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言. HTML是一种易于学习的标记语言. HTML使用像 <p> ...
HTML笔记——hyper text markup language
HTML笔记--hyper text markup language ( 超文本标记语言)超文本包括:文字.图片.音频.视频.动画等 IDEA官网下载指定浏览器 <!--DOCTYPE:告诉浏 ...
HTML （Hyper Text Markup Language）超文本标记语言
1.它是一种标志性的语言,非编程语言,不能使用逻辑运算以及函数调用等功能. 2.它更像是一种人为规范的文档,使分散的网络进行统一. 3.超文本:是一种组织信息的方式,通过超级链接将多种媒介(文字图片m ...
HTML Hyper Text Markup Language（超文本标记语言）基础知识汇总3
表单语法 <form method="post" action="result.html"><p> 名字:<input name ...
HTML(Hyper Text Markup Language)
HTML 结构认识 HTML 标签 HTML 代码是由 "标签" 构成的. 形如: <body>hello</body> 标签名 (body) 放到 &l ...
web之HTML超文本标记语言
1.什么是web web的概念 web概念概述 Javaweb : *使用Java语言开发基于互联网的项目 *软件架构:1. C/S: Client/Server 客户端/服务器端 *在用户本地有一 ...
HTML超文本标记语言详解
HTML超文本标记语言详解 Hyper Text Markup Language(超文本标记语言) 现在的开发版本一般为HTML5+CSS3 W3C标准:World Wide Web Consorti ...
html为什么叫超文本标记语言,HTML(超文本标记语言)的内容和理解
由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式 ...

Hyper Text Markup Language 超文本标记语言

Hyper Text Markup Language 超文本标记语言相关推荐

最新文章

热门文章