HTML基础入门

最新推荐文章于 2024-07-07 15:25:57 发布

运维方便面

最新推荐文章于 2024-07-07 15:25:57 发布

阅读量2.1k

点赞数 3

本文链接：https://blog.csdn.net/kxindouhao5491/article/details/81865345

版权

为什么学习HTML？学了能做些什么？

什么是HTML?

HTML：

超文本标记语言(Hyper Test Markup Language)

HTML不是一种编程语言，而是一种标记语言，描述网页的语言

HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。

2. W3C--------w3school

HTML 4.01开始为了严谨，制作了XML

严谨过头，有了HTML5

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="gb2312"/>

<title>网页标题</title>

</head>

<body>

........

</body>

</html>

1.<title>，是网页标题

2.标题<head>标题<title>

3.<meta charset="UTF-8">----修改编码格式，防止乱码

4.标题之后，是内容。 <body>是文档内容

开发环境以及开发工具
1. 开发环境：windows linux Mac OSX
2. 开发工具：Dreamweaver Eclipse FrontPage WebStorm...
3. WebStorm优点：只能的代码不全、代码提示、自动保存。。

title ---网页名

body--网页的内容

<html>

<head lang ="en">

<meta charset="GB2312"/>

<title> 我的第一个网页</title>

</head>

<body>

hello world!

</body>

</html>

5. HTML基本标签

名称标签示例

<h1>~~<h6> 标题的大小字号-h1大号字 <h1>静夜思</h1>

<br/> 换行标签，但是换行 <p>床前明<br/>疑是</p>

<hr/> 水平线标签 <hr/>

<em>...</em> 斜体 <em>举头望明月</em>

<strong>...</stong> 字体加粗 <strong>低头思故乡</stong>

<br/> 和 <hr/>---单标记，只有一个就有作用

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="GB2312"/>

<title>网页名字</title>

</head>

<body>

<h1>静夜思</h1>

<em><strong>作者：李白</strong></em>

<hr/>

<p>床前明月光</p>

<p>疑是地上霜</p>

<p>举头望明月，低头思故乡。<br/></p>

</body>

</html>

6.路径：相对路径和绝对路径

c:\1\2\3\4.txt

c:\1\2\3\5.txt

如何定位5.txt？？

答：相对路径：5.txt

绝对路径：c:\1\2\3\5.txt

链接实例演示：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="GB2312"/>

<title>锚链接</title>

</head>

<body>

<p><img src="E:/学习HTML的图片/img1.png" alt="菇凉">七夕</p>

<p><a href="mailto:zhangsan@163.com">给站长写信</a></p>

</body>

</html>

图片标签案例2：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="GB2312"/>

<title>案例</title>

</head>

<body>

<!--h1标题-->

<h1>静夜思</h1>

<em><strong>作者：<李 ©  白></strong></em>

<hr/>

<p>窗前明月光</p>

<img src="E:\学习HTML的图片\img2.png"  alt="这是一个美女的图片"/>

</body>

</html>

7.超链接

<a href=”链接地址” target=”目标窗口位置”>文本或图像</a>

超链接的应用

页面间链接：A页B页，网上常见链接
锚链接：跳至自身固定位置，或A页调到B页固定位置，需要锚标记

<a href=”#me”>点击我</a>

<a name=”me”>跳到这里来</a>

功能性链接：电子邮件、QQ、MSN等链接

<a href=”mailto:邮箱地址”>给站长写信</a>

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

可以是文字、图片、网站

窗口： self------自身窗口

blank---新建窗口

锚链接：

作用：从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

步骤：1.创建跳转标记

<a name="marker">乙位置</a>

2.创建跳转链接

<a href="#marker">甲位置</a>

图像标签：

<img src=”图片路径” alt =”替换文本” width=”x” height=”y”/>

width-----------宽度

height----------高度

超链接标签：

<a href="链接路径" target="目标窗口位置">需要链接的文本或者图像</a>

锚链接：跳转到同一个页面的固定位置

1.html-----------<a href=”#me”>点击我</a>

2.html-----------<a href=”#me”>跳到这里来</a>

功能链接：

<a href=”mailto:邮箱地址”>给站长写信</a>

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

8.注释和特殊符号

空格------------------

小于号<-------------<

大于号>------------->

引号””--------------"；

9.常见图片格式：jpg gif png bmp

网页上经常用到：jpg gif

10. 块元素和行内元素

块元素

无论内容多少，该元素独占一行（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

示例：

  <p>我是p元素</p>

    <h1>我是标题h1</h1>

    <a href="#">我是超链接a元素</a>

   <strong>我是strong元素</strong>

11.HTML5的结构元素

header 标题头部区域的内容(用于页面或页面中的一快区域)

footer 标记脚部区域的内容(用于页面或页面中的一快区域)

section Web页面中的一块的区域

article 独立的文章内容

aside 相关内容或应用(常用语侧边栏)

nav 导航类辅助内容

12.总结

运维方便面

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门

为什么学习HTML？学了能做些什么？什么是HTML?HTML：超文本标记语言(Hyper Test Markup Language) HTML不是一种编程语言，而是一种标记语言，描述网页的语言HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。 2. W3C--------w3school HTML 4.01开始为了严谨，制作了XML严谨过头...
复制链接

扫一扫