2-HTML常见的一些标签

HTML常见的一些标签

HTML介绍

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

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了广饶免费建站欢迎大家使用！

2-HTML常见的一些标签

HTML组成

跟XML类似，HTML由N个标签（节点、元素、标记）组成

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

2-HTML常见的一些标签

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

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




    
    
        
        我的第一个HTML5

2-HTML常见的一些标签

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

2-HTML常见的一些标签

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



    
    
        
        我的第一个HTML5

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

2-HTML常见的一些标签

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



    
    
        
        我的第一个HTML5
        
        

    

    
    
        hello world，你好 世界！

代码；在body添加内容

2-HTML常见的一些标签

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

HTML常用的标签

标题标签

2-HTML常见的一些标签

以上几个图都是标题标签



    
    常用标签


    
    我是h2标题
    我是h3标题
    我是h4标题
    我是h5标题
    我是h6标题
    我是h7标题

2-HTML常见的一些标签

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

表单标签



    
    常用标签


    
    我是h2标题
    我是h3标题
    我是h4标题
    我是h5标题
    我是h6标题
    我是h7标题

2-HTML常见的一些标签

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

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

2-HTML常见的一些标签

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

2-HTML常见的一些标签

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

2-HTML常见的一些标签

上图：进入input标签

2-HTML常见的一些标签

上2图：点进去标签以后可以看到，标签相关的属性（元素）；其中就包括我们上面使用的placeholder属性。

2-HTML常见的一些标签

上图：type属性



    
    常用标签


    
    我是h2标题
    我是h3标题
    我是h4标题
    我是h5标题
    我是h6标题
    我是h7标题

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

2-HTML常见的一些标签

上图：增加了颜色，并且可以更改颜色。

代码：增加了日期

2-HTML常见的一些标签

上图：可以选择日期

代码：增加了文件选择

2-HTML常见的一些标签

代码：checkbox是复选框； radio是单选

2-HTML常见的一些标签

我是段落，我是段落，我是段落，我是段落，
我是段落，我是段落，我是段落，我是段落，
我是段落，我是段落，我是段落，我是段落，

代码：增加段落标签

2-HTML常见的一些标签

图片

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

2-HTML常见的一些标签

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

2-HTML常见的一些标签

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

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

2-HTML常见的一些标签
上图：加载好的图片

换行标签



换行测试！！！！！！！





换行测试！！！！！！！
换行测试！！！！！！！

2-HTML常见的一些标签

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

超链接

我是超链接
我是超链接

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

2-HTML常见的一些标签

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

列表标签

2-HTML常见的一些标签

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

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


    我是无序列表
    我是无序列表
    我是无序列表

2-HTML常见的一些标签

分割线换行标签


    我是无序列表
    
    我是无序列表
    我是无序列表

代码：

是分割线换行标签

2-HTML常见的一些标签

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

div标签

我是div，我是div，我是div，
我是div，我是div，我是div，
我是div，我是div，我是div，

代码：
div标签就是你输入什么，就得到什么（所见即所得）；div标签是用的最多的。
div是一个容器，div里可以嵌套div，或嵌套其他。

 
        我是div，我是div，我是div，我是div
        我是嵌套的无序列表
        我是嵌套的段落

2-HTML常见的一些标签

小结：

src与href

相同点：

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

不通点：

src：引用；引用的资源是必须的。
href：引入；引入不是必须的。

单标签与双标签

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

所有代码



    
    常用标签


    
    我是h2标题
    我是h3标题
    我是h4标题
    我是h5标题
    我是h6标题
    我是h7标题

    
    
    
    
    
    
    
    
    

    
    我是段落，我是段落，我是段落，我是段落，
    我是段落，我是段落，我是段落，我是段落，
    我是段落，我是段落，我是段落，我是段落，

    
    
    

    
    

    换行测试！！！！！！！
    




    换行测试！！！！！！！
    换行测试！！！！！！！

    
    

    我是超链接
    我是超链接

    
    
        我是无序列表
        我是无序列表
        我是无序列表
    

    
    
        我是无序列表
        
        我是无序列表
        我是无序列表
    

    
    我是div，我是div，我是div，
    我是div，我是div，我是div，
    我是div，我是div，我是div，

    
    
        我是div，我是div，我是div，我是div
        我是嵌套的无序列表
        我是嵌套的段落

网站题目：2-HTML常见的一些标签
转载来源：http://azwzsj.com/article/gghjpp.html

2-HTML常见的一些标签

HTML常见的一些标签

HTML介绍

HTML常用的标签

我是h2标题

我是h3标题

我是h4标题

我是h5标题

我是h6标题

我是h2标题

我是h3标题

我是h4标题

我是h5标题

我是h6标题

我是h2标题

我是h3标题

我是h4标题

我是h5标题

我是h6标题

我是h2标题

我是h3标题

我是h4标题

我是h5标题

我是h6标题

其他资讯