HTML 常见标签part1

时间 2021-04-04

标签 javascript css html 前端 java 浏览器学习字体网站 code 栏目 HTML 繁體版

原文原文链接

一，HTML常见标签part1

想要在网页上展现出来的内容必定要放在body标签中。保存到一个HTML格式的文件中。javascript

二，标题标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。因为 h 元素拥有确切的语义，所以请您慎重地选择恰当的标签层级来构建文档的结构。所以，请不要利用标题标签来改变同一行中的字体大小。相反，咱们应当使用css来定义来达到漂亮的显示效果。标题标签一般用来制做文章或网站的标题。css

h1~h6标签的默认样式：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小马哥以前端学习</title>
</head>
<body>
    <h1>一级标题</h1><h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

请看上面代码 <h1>和<h2>书写在一行上展现，可是在浏览器的效果倒是换行了前端

1) 文本样式标签

文本样式标签主要用来对HTML页面中的文本进行修饰，好比加粗、斜体、线条样式等...

1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标 
6. `<sub></sub>`：下标

如今若是想在一段文字中特别强调某几个字，这时候就能够用到`<em>`或`<strong>`标签。
这两个标签都是表示强调，可是二者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，咱们一般会推荐你们使用`<strong>`表示强调

三，段落标签

,paragraph的简写。定义段落 java

<body>
        <p>小马哥学习前端！！！</p>
        <p>小马哥学习前端！！！</p>

</body>

浏览器展现特色：浏览器

跟普通文本同样，但咱们能够经过css来设置当前段落的样式
是否又独占一行呢？答案是的块级元素

四，超连接标签

超级连接<a>标记表明一个连接点，是英文anchor（锚点）的简写。它的做用是把当前位置的文本或图片链接到其余的页面、文本或图像学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连接标签</title>
</head>
<body>
<body>
    <h1>

        <!-- a连接 超连接
        target:_blank 在新的网站打开连接的资源地址
                _self 在当前网站打开连接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:zhaoxu@tedu.cn">联系咱们</a>

        <!-- 返回页面顶部的内容 -->
        <a href="#">跳转到顶部</a>

        <!-- 返回某个id -->
        <a href="#p1">跳转到p1</a>

        <!-- javascript:是表示在触发<a>默认动做时，执行一段JavaScript代码，
        而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>


    </h1>
</body>
</body>
</html>

target:_blank 在新的网站打开连接的资源地址 target：_self 在当前网站打开连接的资源地址 title: 表示鼠标悬停时显示的标题字体

连接其余表现形式：网站

目标文档为下载资源例如：href属性值，指定的文件名称，就是下载操做(rar、zip等)
电子邮件连接前提：计算机中必须安装邮件客户端，而且配置好了邮件相关信息。例如：<a href="mailto:zhaoxu@tedu.cn">联系咱们</a>
返回页面顶部的空连接或具体id值的标签例如：<a href="#">内容</a>或<a href="#id值">内容</a>
javascript:是表示在触发<a>默认动做时，执行一段JavaScript代码。例如：<a href="javascript:alert()">内容</a>
javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</a

五，列表标签

网站页面上一些列表相关的内容好比说物品列表、人名列表等等均可以使用列表标签来展现。一般后面跟<li>标签一块儿用，每条li表示列表的内容code

<ul>:unordered lists的缩写无序列表 <ol>:ordered listsde的缩写有序列表

<!-- 无序列表 type能够定义无序列表的样式-->
    <ul type="circle">
        <li>个人帐户</li>
        <li>个人订单</li>
        <li>个人优惠券</li>
        <li>个人收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type能够定义有序列表的样式 -->
    <ol type="a">
        <li>个人帐户</li>
        <li>个人订单</li>
        <li>个人优惠券</li>
        <li>个人收藏</li>
        <li>退出</li>
    </ol>

1）type：列表标识的类型

ul标签的属性： type：列表标识的类型

disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

ol标签的属性：

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

列表标识的起始编号

默认为1