HTML1
第一个网页
桌面右击创建txt文本创建代码如下:
<!Doctype Html>
<hetml>
<head>
<title>我的第一个网页</title>
<meta charset="GBK">
</head>
<body>
我是我是第一个网页 哈哈哈哈
</body>
</html>
改后缀名
标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
</head>
<body>
<!-- 注释: 解释说明 不参与运行 -->
<br>
<!-- 在html中 标签分为(单标签和双标签)
-->
<!-- 单标签: 换行标签<br> 换行横线标签 <hr>
<meta>
<br>
<hr> -->
<!-- 双标签:一个开始标签 一个技术标签 来实现内容展示
<p></p>
<span></span>
<head></head>
-->
<br>
<!-- 标签关系:
嵌套关系:
<body>
<p></p>
</body>
并列关系:
<head>
</head>
<body>
</body>-->
<br>
<p>p标签是一个段落标签</p>
<h1 id="A">这是标题标签1</h1>
<h2 id="B">这是标题标签2</h2>
<h3 id="C">这是标题标签3</h3>
<h4>这是标题标签4</h4>
<h5>这是标题标签5</h5>
<h6>这是标题标签6</h6>
<!-- 从大到小h1到h6 -->
<br>
<!-- font 文本样式标记 实际开发不推荐用
不单占一行 可以修饰颜色 字体 字号
不推荐原因 没有实现页面结构和样式相分离-->
<font color="red"> 这个文本的颜色改了
</font>
<hr>
<!-- 文本加粗
推荐使用strong标签 因为网页的语义化
-->
<b>加粗了</b>
<strong>加粗了</strong>
<!-- 斜体标签 推荐使用em 因为网页的语义化
-->
<i>倾斜了</i>
<em>倾斜了</em>
<!-- 删除标签 推荐使用del -->
<s>指导价6999 </s>
<del>指导价6999</del>
<!-- 下划线 推荐使用ins-->
<u>这是下划线</u>
<ins>这是下划线</ins>
<hr>
<!-- img是专门呈现图片的标签
src="图片路径"
alt="图片加载失败后呈现的文字"
widht=""宽度
hight=""高度 实际开发中只是用宽高的一种
title=""
src 图片路径:
相对路径
从当前的html文件的路径出发:
1.如果图片和html处在同一个文件夹 直接写文件名
2.如果图片在html的下一层或者多层文件夹 写文件夹歇文件名
3.如果图片在当前网页的上一层或者多层文件夹 那么就写../加文件名 上2层../../加文件名
绝对路径
带盘符的路径(不推荐使用)
网络路径(实际开发经常使用的手段)
带网络协议的在线图片路径
-->
<img title="鼠标提示文本" widht="200" height="200" src="1.jpg" alt="加载失败呈现的文字">
<!-- 处在同一个文件夹的相对路径 -->
<!-- <img src="q.jpg" title="看什么看" height="400" alt="此处是一个美女图片">
<br>
下一层文件夹的路径写法
<img src="image/liying.jpg" width="100" alt="">
<br>
下两层文件夹的路径写法
<img src="image/qq/ww.jpg" width="200" alt=""> -->
<!-- 上一层路径写法 -->
<!-- <img src="../qq.jpg" width="200" alt="">
<br>
<img src="../../mm.jpg" alt=""> -->
<!--绝对路径 -->
<!-- <img src="D:/aa上课用图标素材/美女/mm552.jpg" alt=""> -->
<hr>
<!-- 超链接:又叫超级链接
标签名 <a href=""></a>
常用属性:
href="" 衔接地址
target="" _self 在当前页面直接打开
—blank在新选项打开
因为单独一个网页超链接可能很多 那么如果每一个超链接都需要单独设置target那么维护起来很不方便
那么需要用到base标签
专门统一设置 超链接的 基本路径 和 target
一旦超链接 a标签没有设置 自己的target 那么会按照base标签的target来算
可以实现页面 所有超链接一键更改 维护起来非常方便
-->
<base href="http://www.baidu.com" target="_blank">
<a href="http://www.baidu.com" target="_self" >百度</a>
<a href="http://www.baidu.com" >百度</a>
<!-- 所有超链接的统一域名部分 可以写到base标签里面 href=" 这里"
节省代码空间 让代码看起来更整洁
-->
<base href="https://www.douban.com" target="_blank">
<a href="/group/explore/life">豆瓣生活</a>
<a href="/group/explore/travel">豆瓣行摄</a>
<a href="/group/explore/tech">豆瓣科技</a>
</body>
</html>