资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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-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-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://cdkjz.cn/article/gghjpp.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220