博客列表 >HTML常见标签以及使用

HTML常见标签以及使用

王浩
王浩原创
2021年09月19日 16:57:51400浏览
  1. 作业内容:
  2. 1. 将课堂介绍过的<a>,<img><ul>,<table>,<iframe>的案例,全部上机练习,并自己扩展一些案例,发布到作业博客中;
  3. 2. 预习css知识

HTML常见标签

超链接(a)

a标签一般常用来做链接,常用的属性有href(所要链接的地址)和target(目标窗口)链接一般也分三种:

【站外链接】

  1. <a href="https://www.baidu.com">点击跳转百度</a>

【指定窗口打开】

  1. <!-- 新窗口打开百度 -->
  2. <a href="https://www.baidu.com" target="_blank">新窗口打开百度</a>
  3. <!-- 在框架内打开百度,这里因为百度做防内嵌操作了,所以打不开 -->
  4. <a href="https://www.baidu.com" target="frame1">在框架内打开百度</a>
  5. <iframe name="frame1" frameborder="0"></iframe>

【站内跳转】

  1. <!-- 站内跳转,也称之为锚点链接 -->
  2. <a href="#content1" target="_self">站内跳转</a>
  3. <a href="#content2" target="_self">站内跳转</a>
  4. <div id="content1" style="margin-top: 1000px">跳转内容1</div>
  5. <div id="content2" style="margin-top: 1000px">跳转内容1</div>

图像(img)

img标签常见的属性有src(图像路径),alt(文本替换),width(宽度),height(高度)等。
其中前两个属性是必须的。后面的宽度和高度,可以以像素为单位,也可以填写百分比,在HTML5中也逐渐被CSS所取代,使用频率也不高了。
src属性代表该标签所指向的图像路径,这个路径可以是相对路径,也可以是绝对路径,甚至可以直接是站外的链接。
alt属性是在图片加载不出来的时候,显示的文字,一般也没啥用

  1. <!-- 常规图片 -->
  2. <img src="1.jpg" alt="这是一张图片" />
  3. <!-- 指定宽度的图片 -->
  4. <img src="1.jpg" alt="" width="400px" />
  5. <!-- 按百分比指定高度的图片 -->
  6. <img src="1.jpg" alt="" height="30%" />

如果没有同时宽度和高度,比如高度设置了30%,则宽度会按同比例缩放至30%。而按像素设定的宽度,那么高度也一样按对应的比例缩放,以确保图片不会变形。
而如果同时指定了高度和宽度,如果高宽比例与原图比例不同的话,则可能就会导致图片变形。

列表(ul)

我们常见的ul标签是拿来做导航栏或者侧边栏菜单的
列表主要表现形式有三类:

  • 有序列表,显示结果会自动为每一条记录前面加上序号
  1. <!-- 有序列表 -->
  2. <ol>
  3. <li>item1</li>
  4. <li>item2</li>
  5. <li>item3</li>
  6. </ol>
  • 无序列表,显示结果会自动在每一条记录前加上一个小黑点
  1. <!-- 无序列表 -->
  2. <ul>
  3. <li>item1</li>
  4. <li>item1</li>
  5. <li>item1</li>
  6. </ul>
  • 自定义列表
  1. <!-- 自定义列表 -->
  2. <nav>
  3. <a href="">item1</a>
  4. <a href="">item2</a>
  5. <a href="">item3</a>
  6. </nav>

上面这几种做法,目前最常用的是无序列表结合CSS生成自己想要的任何效果。

表格(table)

表格一般分为表头,表主体以及表尾,表头常用<thead></thead>包含起来,表主体用<tbody></tbody>包含起来,而表尾则用<tfoot></tfoot>包含起来。不论哪一个部分都需要用<tr><td></td></tr>这种格式写,其中一个tr表示一行,一个td表示一列。表格是我们常用的元素,因为他跟二维数组几乎是一一对应的关系。此处代码较多,顺便可以复习一下emmet的语法:

  1. table>thead>tr>td{表头}*4^^tbody>tr*3>td{表主体}*4^^tfoot>tr>td{表尾}*4

生成结果如下:

  1. <table>
  2. <thead>
  3. <tr>
  4. <td>表头</td>
  5. <td>表头</td>
  6. <td>表头</td>
  7. <td>表头</td>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>表主体</td>
  13. <td>表主体</td>
  14. <td>表主体</td>
  15. <td>表主体</td>
  16. </tr>
  17. <tr>
  18. <td>表主体</td>
  19. <td>表主体</td>
  20. <td>表主体</td>
  21. <td>表主体</td>
  22. </tr>
  23. <tr>
  24. <td>表主体</td>
  25. <td>表主体</td>
  26. <td>表主体</td>
  27. <td>表主体</td>
  28. </tr>
  29. </tbody>
  30. <tfoot>
  31. <tr>
  32. <td>表尾</td>
  33. <td>表尾</td>
  34. <td>表尾</td>
  35. <td>表尾</td>
  36. </tr>
  37. </tfoot>
  38. </table>

内嵌框架(iframe)

之前在讲述a标签的时候已经简单提到过框架,iframe框架支持所有HTML全局属性,常用的属性有src(框架指向的数据)和frameborder(框架边框)

  1. <iframe src="https://taobao.com" frameborder="0"></iframe>

针对有些比较老的浏览器,不支持框架的情况下,可以这样写,以满足在框架不能正常显示的时候,可以显示文字

  1. <iframe src="https://taobao.com" frameborder="0">
  2. 您的浏览器不支持框架,请更换最新的浏览器来正常浏览页面
  3. </iframe>

预习CSS

简介:CSS是一种描述HTML文档样式的语言 CSS描述应该如何显示HTML元素

常见CSS样式表

  1. <style>
  2. /* 全局主体样式 */
  3. body {
  4. background-color: lightblue;
  5. }
  6. /* 全局h1标签样式 */
  7. h1 {
  8. color: blue;
  9. text-align: center;
  10. }
  11. /* 针对class="menu"的标签指定样式 */
  12. .menu {
  13. font-size: 20px;
  14. }
  15. /* 针对id="name"的标签指定样式 */
  16. #name {
  17. font-family: verdana;
  18. }
  19. /* 组合选择器 */
  20. div.menu {
  21. color : red;
  22. }
  23. /* 分组选择器 */
  24. h1, h2, h3 {
  25. font-size: 20px;
  26. }
  27. /* 通用选择器 */
  28. * {
  29. text-align: center;
  30. }
  31. </style>

最上面的像body、h1、.menu、#name。统称为选择器,选择器也可以使用组合的方式,如div.menu,这个选择器的意思是所有class=”menu”的div标签。还可以用*号表示通配所有标签。如果多个标签拥有相同的样式,则可以用逗号把选择器连接放一起。如 .menu1,.menu2{ color : red; }
大括号里的内容,冒号左侧的为属性,冒号右侧的为属性值,可以有多个属性共同修饰一个选择器,并且以分号隔开。
选择器可以针对全局标签(如body),也可以针对一类标签(如.menu),甚至还可以针对某一个标签(如#name)。

其中的属性,常用的有

属性 含义
background-color 背景颜色
color 文本颜色
font-size 文本大小
font-family 字体

太多了。。。。等老师讲吧。。。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议