黑马程序员技术交流社区

标题: 【西安校区】HTML基本标签集合 [打印本页]
作者: 逆风TO    时间: 2019-4-23 11:01
标题: 【西安校区】HTML基本标签集合
本帖最后由 逆风TO 于 2019-7-19 09:00 编辑

一、文本标签
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>文本标签</title>
        </head>
        <body>
                <!--
                        标题标签
                        h1-h6:标题由大到小
                        快捷键：alt+/:代码提示
                        ctrl+shift+R:复制行
                        ctrl+shift+/:
                -->
                <h1>标题</h1>
                <h2>标题</h2>
                <h3>标题</h3>
                <h4>标题</h4>
                <h5>标题</h5>
                <h6>标题</h6>
                <!--段落标签-->
                第一行
                第二行
                <p>第一段(段落标签)</p>
                <p>第二段(段落标签)</p>
                <blockquote>段落缩进</blockquote>
                <!--字体标签-->
                <b>加粗标签</b><br />
                <strong>加粗标签（带“语义”）</strong><br />
                <i>斜体标签</i><br />
                <em>斜体标签（带“语义”）</em><br />
                <hr />水平线标签
                <!--原样输出标签-->
                <pre>
                        原样输出标签
                          静夜思
                           李白
                        床前明月光，
                        疑是地上霜。
                        举头望明月，
                        低头思故乡。
                </pre>
                <!--换行标签-->
                <br />换行标签
                <!--上下标标签-->
                上标标签：x^2 : x<sup>2</sup> <br />
                下标标签：H2O  :H<sub>2</sub>O
               
                <!--滚动标签
                        滚动标签：marquee
                属性：behivor
                属性值：alternate :来回滚动
                                scroll:交替滚动
                                slide：滚动一次，默认从右到左
                -->
                <marquee>滚动标签（不写标签属性，默认来回滚动）</marquee>
                <marquee behavior="alternate">来回滚动</marquee><br />
                <marquee behavior="scroll">交替滚动</marquee>
                <marquee behavior="slide">滚动一次，默认从左到右</marquee>
                <!--块标签div(占一行）和行内标签span(在一行)-->
                <div>块标签1</div>
                <div>块标签2</div>
                <span>行内标签1</span>
                <span>行内标签2</span>
        </body>
</html>

运行结果：



二、列表标签
有序列表和无序列表
ul：无序列表标签

属性type：无序列表的类型
disc：默认的（实心圆点）
circle：空心圆点
square：小正方形（实心的）

li ：列表项

ol:有序列表
属性type：指定当前的有序列表类型


运行结果：


三、超链接标签
a标签

1.属性:
href ：链接的URL地址
target：打开链接文件的方式
常用两个属性值：_self:当前窗口直接打卡/_blank:新建窗口打开
2.        常见的协议:

                      file://  本地文件协议
                      http://  http协议
                          在当前本地找对应的hosts文件,找打了直接打开,如果没有,就调用网卡联网操作,中间DNS服务器中找!
                      jdbc://mysql:///数据库名称
                      thunder:// 迅雷协议
                      email: 邮件协议
<a href = "http://www.baidu.com" target="_blank">链接到百度</a>

3.使用场景：
1. 跳转到指定的文件:普通使用
2. 作锚链接使用

a)在同一页面中使用锚链接
              1)打锚点:跳转标记
                                超链接的name属性
              <a name="锚点(标记)名称"></a>
              2)进行跳转链接
    <a href="#锚点(标记)名称">开始跳转</a>
b)在不同页面中使用锚链接
              1)打锚点:跳转标记
                                超链接的name属性
              <a name="锚点(标记)名称"></a>
               2)进行跳转链接
    <a href="#连接的资源文件#锚点(标记)名称">开始跳转</a>

四、图片标签
img标签
属性：

src：链接图片资源（相对路径） …/：回退上一级目录
alt：替代文本（当图片失效的时候起作用）
title：当鼠标悬停的时候title起作用

五、表格标签
table:表格标签
属性：
width:表格的宽度
height:表格的高度
align：表格的对其方式
bgcolor:背景颜色
td标签：列标签
tr标签：行标签
th标签: 表头标签 自动加粗 居中显示

单元格合并：
rowspan
colspan

表格拆分：——解决用户有效体验
thead:头
tbody:体
tfoot:脚
在JS中会做业务处理






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2