Web前端-Html1--基础标签

                                                 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>
发布了26 篇原创文章 · 获赞 4 · 访问量 437

猜你喜欢

转载自blog.csdn.net/yanghainan0318/article/details/103211078