码迷,mamicode.com
首页 > Web开发 > 详细

2-HTML常见的一些标签

时间:2019-10-25 23:44:57      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:idt   右上角   head   type属性   标记语言   乱码   images   创建   webstorm   

HTML常见的一些标签

HTML介绍

HTML:超文本标记语言
其实它就是文本,游览器负责将它解析成具体的网页内容

技术图片

  • HTML组成

跟XML类似,HTML由N个标签(节点、元素、标记)组成

技术图片

上图:<>中的内容都属于标签,其中div标签最多

技术图片

上图:通过webstorm来开发。我们创建了一个html文件,默认会生成图中的部分内容,我们先将其删掉。

在webstorm中html中的注释通过 ctrl+/ 或 ctrl+shift+/ 来添加

<!--最外层标签-->
<!--最外层标签-->
<html>
    <!--头部:标题-->
    <head>
        <!--标题-->
        <title>我的第一个HTML5</title>
        <!--编码-->
        <meta charset="UTF-8">

    </head>

    <!--body:内容、结构-->
    <body>

    </body>

</html>

技术图片

上图:通过webstorm右上角,将当前的代码通过已安装的浏览器打开

技术图片

上图:可以看到浏览器的标签页中的内容,就是标题的内容


<!--最外层标签-->
<html>
    <!--头部:标题-->
    <head>
        <!--标题-->
        <title>我的第一个HTML5</title>
        <!--编码-->
<!--        <meta charset="UTF-8">--> 

    </head>

    <!--body:内容、结构-->
    <body>

    </body>

</html>

代码:我们将meta charset="UTF-8"给注释掉了,然后在通过浏览器打开该代码或刷新已打开的网页

技术图片

上图:可以看到不使用UTF-8就显示乱码了。

<!--最外层标签-->
<html>
    <!--头部:标题-->
    <head>
        <!--标题-->
        <title>我的第一个HTML5</title>
        <!--编码-->
        <meta charset="UTF-8">

    </head>

    <!--body:内容、结构-->
    <body>
        hello world,你好 世界!
    </body>

</html>

代码;在body添加内容

技术图片

上图:body中的内容在页面显示

HTML常用的标签

  • 标题标签

技术图片

技术图片

技术图片

以上几个图都是标题标签

<html>
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--标题标签-->
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>
</body>
</html>

技术图片

上图:标题标签的不同级别大小不同

  • 表单标签
<html>
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--标题标签-->
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>

    <!--表单标签-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默认值">
</body>
</html>

技术图片

上图:
表单标签可以提供输入框;
表单标签的placeholder元素可以显示提示内容;
表单标签的value元素可以提供输入的默认内容。

标签手册: http://www.w3school.com.cn/html/html_headings.asp

技术图片

上图:随意点击一个,及惹怒标签参考手册

技术图片

上图:标题下面就是HTML中的各种标签

技术图片

上图:进入input标签

技术图片

技术图片

上2图:点进去标签以后可以看到,标签相关的属性(元素);其中就包括我们上面使用的placeholder属性。

技术图片

上图:type属性

<html>
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--标题标签-->
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>

    <!--表单标签-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默认值">
    <input type="color">
</body>
</html>

代码:增加了input标签的color属性

技术图片

上图:增加了颜色,并且可以更改颜色。

<input type="date">

代码:增加了日期

技术图片

上图:可以选择日期

<input type="file">

代码:增加了文件选择

技术图片

<input type="checkbox">
<input type="radio">

代码:checkbox是复选框; radio是单选

技术图片

<p>我是段落,我是段落,我是段落,我是段落,</p>
<p>我是段落,我是段落,我是段落,我是段落,</p>
<p>我是段落,我是段落,我是段落,我是段落,</p>

代码:增加段落标签

技术图片

  • 图片
<img src="https://www.baidu.com/img/bd_logo1.png" alt="提示文字" width="200">

代码:
加载网络图片; 通过Google浏览器到www.baidu.com首页去复制图片地址;
alt设置提示文字
width设置图片大小

技术图片

上图:这是我们从百度复制来的图片效果

技术图片

上图:我们从本地copy一个图片到webstorm关联的目录,与我们当前编辑的html文件在同一级目录;

<img src="images/img_01.jpg" alt="风景" width="300">

代码:因为是同级目录,所以加载图片的时候,将同级相对路径下的图片加载过来就好。

技术图片
上图:加载好的图片

  • 换行标签
<br>
<p>换行测试!!!!!!!</p>
<br><br><br><br>
<p>换行测试!!!!!!!</p>
<p>换行测试!!!!!!!</p>

技术图片

上图:每个br就是一个换行

  • 超链接
<a href="#">我是超链接</a>
<a href="https://www.baidu.com" target="_blank">我是超链接</a>

代码:
href用于关联连接
“#”会跳转到本页面
target=‘_blank‘表示当跳转时,用新的页面来显示网页(当前网页还会继续存在)。
target=‘_self‘,会用当前页面进行跳转(不会保留原有网页)

技术图片

上图:点击超链接就会跳转到关联的网址页面

  • 列表标签

技术图片

技术图片

上2图:两个图都属于列表标签
列表标签是非常常用的标签。

列表分为:有序列表、无序列表

<ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

技术图片

  • 分割线换行标签
<ul>
    <li>我是无序列表</li>
    <hr>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

代码:<hr>是分割线换行标签

技术图片

上图:可以看到被分割线给分割了

  • div标签
<div>我是div,我是div,我是div,</div>
<div>我是div,我是div,我是div,</div>
<div>我是div,我是div,我是div,</div>

代码:
div标签就是你输入什么,就得到什么(所见即所得);div标签是用的最多的。
div是一个容器,div里可以嵌套div,或嵌套其他。

    <div>
        我是div,我是div,我是div,我是div
        <li>我是嵌套的无序列表</li>
        <p>我是嵌套的段落</p>
    </div>

技术图片

小结:

  • src与href

相同点:

src与href都是用来链接外部资源的;

不通点:

src:引用;引用的资源是必须的。
href:引入; 引入不是必须的。

  • 单标签与双标签

单标签:<>是不需要写内容的
双标签:<>这里是需要写内容的<>

  • 所有代码

<html>
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--标题标签-->
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>

    <!--表单标签-->
    <input>
    <input placeholder="我是提示文字">
    <input value="默认值">
    <input type="color">
    <input type="date">
    <input type="file">
    <input type="checkbox">
    <input type="radio">

    <!--我是段落标签-->
    <p>我是段落,我是段落,我是段落,我是段落,</p>
    <p>我是段落,我是段落,我是段落,我是段落,</p>
    <p>我是段落,我是段落,我是段落,我是段落,</p>

    <!--
    图片
    -->
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="提示文字" width="200">
    <img src="images/img_01.jpg" alt="风景" width="300">

    <!--换行标签-->
    <br>
    <p>换行测试!!!!!!!</p>
    <br><br><br><br>
    <p>换行测试!!!!!!!</p>
    <p>换行测试!!!!!!!</p>

    <!--超链接标签-->
    <br>
    <a href="#">我是超链接</a>
    <a href="https://www.baidu.com" target="_blank">我是超链接</a>

    <!--列表标签-->
    <ul>
        <li>我是无序列表</li>
        <li>我是无序列表</li>
        <li>我是无序列表</li>
    </ul>

    <!--分割换行标签-->
    <ul>
        <li>我是无序列表</li>
        <hr>
        <li>我是无序列表</li>
        <li>我是无序列表</li>
    </ul>

    <!--div标签-->
    <div>我是div,我是div,我是div,</div>
    <div>我是div,我是div,我是div,</div>
    <div>我是div,我是div,我是div,</div>

    <!--div嵌套-->
    <div>
        我是div,我是div,我是div,我是div
        <li>我是嵌套的无序列表</li>
        <p>我是嵌套的段落</p>
    </div>

</body>
</html>

2-HTML常见的一些标签

标签:idt   右上角   head   type属性   标记语言   乱码   images   创建   webstorm   

原文地址:https://blog.51cto.com/daimalaobing/2445511

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!