当前位置:首页>编程>html>html第一课 认识html

html第一课 认识html

今天小编学习html语言的第一天,用来记录html中的语言标签,小白可以通过本文,跟小编一起学习html(超文本语义标签

在html语言中有头部、内容、底部三大版块,下面我们来简单讲解一下html

html第一课 认识html

html学习

这里给大家一个简单实例 认识一下html有那些标签,这些标签都是干什么用的?

<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 设置视口: 可视窗口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html文档结构</title>
  </head>
  <body>
    <!-- 这里才是用户真正关注的内容 -->
  </body>
</html>

实列代码中的注释文字可以清晰描述这些标签是干什么用的

常用布局标签

这里我们重要关注<body></body>里的部分就可以;我们在<body></body>里会把网站分成三部分 头部、内容、底部;常用以下标签写在<body></body>中。

    <!-- 经典 -->
    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>
    <!-- id权重太大 -->

    <!-- 改进 -->
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
    <!-- class权重小于id,有利于样式复用 -->

    <!-- 语义化布局标签 -->
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>

绝大多数程序员还是喜欢 div + class 模式列如:

<!-- div + class  -->
<div class="article-header">我是文章头部</div>

目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎;完全是个人习惯,主要原因是这种布局的语义化标签太少了,不如语义更明确的class

链接与图像

链接跳转

在html中<a>用于网站链接跳转列如:

<!-- 跳转到站外 -->
<a href="https://www.jd.com">京东</a>

指定网址跳转列如:

<!--在指定的窗口打开 -->
<a href="https://zydown.com" target="tmall">当下资源网</a>
<iframe frameborder="2" name="tmall"></iframe>

站内跳转列如:

<!-- 站内跳转 -->
<!-- 使用锚点/书签来实现 -->
 <a href="#hello">我要找到你</a>

图片链接

<!-- 可点击的图片链接 -->
<a href=""><img src="dog.jpg" alt="dog" /></a>
<!-- 可点击的文本链接 -->
<a href="">今晚有肉吃了</a>

列表与导航

  • 有序列表:
<!-- 1. 有序列表 ,极少用,如果要用请求无序列表+css代替它-->
    <h3>东京奥运奖牌榜</h3>
    <ol>
      <li>美国:113</li>
      <li>中国:88</li>
      <li>日本:58</li>
    </ol>
  • 无序列表:
<!-- 2. 无序列表 -->
    <h3>购物车</h3>
    <ul>
      <li>笔记本电脑一台</li>
      <li>蓝牙耳机一副</li>
      <li>卫生纸10卷</li>
    </ul>
  • 自定义列表:
<!-- 3. 自定义列表 -->
    <dl style="display: grid; grid-template-columns: 3em 16em">
      <dt>地址:</dt>
      <dd>合肥市</dd>
      <dt>邮箱:</dt>
      <dd>2877741347@qq.com</dd>
    </dl>
  • 导航列表:
    <!-- ul + li + a  -->
    <ul class="menu" style="display: flex; place-content: space-around">
      <li class="item"><a href="">首页</a></li>
      <li class="item"><a href="">教学视频</a></li>
      <li class="item"><a href="">社区问答</a></li>
      <li class="item"><a href="">资源下载</a></li>
      <li class="item"><a href="">关于我们</a></li>
    </ul>

    <!-- nav + a  -->
    <nav class="menu" style="display: flex; place-content: space-around">
      <a href="">首页</a>
      <a href="">教学视频</a>
      <a href="">社区问答</a>
      <a href="">资源下载</a>
      <a href="">关于我们</a>
    </nav>

表格与布局

<!-- table + caption + thead + tbody + tfoot  -->
    <!-- tr + td  -->
    <table width="300" border="1">
      <!-- 标题 -->
      <caption>
        表格标题
      </caption>

      <!-- 表头 -->
      <thead>
        <tr bgcolor="lightgreen">
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </thead>

      <!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 -->
      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 从表体2行3列开始水平方向合并3列 -->
          <td bgcolor="red" colspan="3">x</td>
          <!-- <td>x</td>1
          <td>x</td>2 -->
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <!-- 在第3行进行垂直方向/行方向合并2个单元格 -->
          <td bgcolor="violet" rowspan="2">x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>

        <!-- 注意2点: 合并操作一定是发生在单元格上td元素,  -->
        <!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 这一个单元格应该被注释或删除 -->
          <!-- <td>x</td> -->
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tbody>
      <!-- 可以有多个tbody表格主体 -->

      <!-- 表尾 -->
      <tfoot>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tfoot>
    </table>

内联框架标签

 <h2><a href="https://zydown.com" target="dx">当下资源网</a></h2>
 <iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="dx"></iframe>

今天html学习就分享到这里。

文章链接:https://www.zydown.com/614.html
文章标题:html第一课 认识html
文章版权:当下资源网 (https://www.zydown.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2024年02月28日 21时25分00秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系:2877741347@qq.com

给TA打赏
共{{data.count}}人
人已打赏

相关文章

互联网教程

如何使用腾讯云服务器代金券支付

2024-4-26 15:34:07

html

html中表单代码

2024-3-16 17:08:12

{{yiyan[0].hitokoto}}
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索