整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML常用标签概述(可用于网店装修)

  • TML标签:

  1. 所有内容都在<html></html>标签之内;

  2. <head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中。

  3. <head></head>内的<title></title>中设置的是页面的标题,<title></title>只能放在<head></head>中;

  4. <body></body>是页面的主体,大部分显示内容都定义在这里。

  • HTML注释:<!-- -->:

    1. 注释不允许嵌套

  • html常用标签:

    1. h标签(标题),HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。h1最大,h6最小。

    2. <br/>只是回车,<p>是段落。<p>前后会有比较大的空白,而<br/>则没有。

    3. <center>居中显示.

    4. <b>、<strong>粗体,<i>、<em>斜体。<u>下划线。

    5. <sub>2</sub>下标,如:H<sub>2</sub>O

    6. <sup>2</sup>上标,如:10<sup>2</sup>

    7. <font></font>字体标签,<font color=“red“ size=“7” face=“隶书”>红色</font>。color(设置颜色) size(1-7) face(设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示)

    8. <hr> color size(厚度) width(长度) align=left/center/right (默认为剧中显示)

    9. <pre> 预格式化 保持本色;

    10. HTML特殊字符:&lt;(小于号,less than);&gt;(大于号,greater than);&nbsp;(空格)。

    11. 超链接:<a>标签的一些常用属性:href、title、target、name

    12. 插入图片:<img src=“路径”/>

    13. 列表:dl→(定义列表),ul→(无序列表), ol→(有序列表)。

    14. 表格:<table>;创建行:<tr>;创建单元格:<td>;表页眉:<thead>;表主体:<tbody>;表页脚:<tfoot>;表头:<th>。

    15. rowspan(合并行)、colspan(合并列)

    16. <input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox表单标签:(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。

    • meta标签:(包括在head标签中。主要用来描述页面自身信息,元信息)

    1. <meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>

    2. <meta name="description" content="免费更新最新C#相关技术知识,主要包括:.net基础,网页前端,三层架构,SQL数据库..."/>

    3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码

    4. <meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。

    5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。

    6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。

    7. <meta name="名字" content="值" />关于网页的描述信息。

    8. <meta http-equiv="名字" content="值" />模拟http响应头信息。

    C#编程自学_做最好的.net自学资料站_更多文章请访问:http://www.4k8k.net/

    欢迎订阅。

    天是刘小爱自学Java的第76天。

    感谢你的观看,谢谢你。

    话不多说,继续html的学习:

    昨天学习了最基础的文本标签及属性,除此之外还有很多其它标签,今天逐一学习。

    一、链接标签(a标签)

    a标签有一个必不可少的属性:href。href也就是超链接的意思。

    下面编写代码,其中我每行之间用了两个换行符(<br/><br/>),为了使页面看起来相对而言更加美观些。

    ①href="#"

    作用是跳转本页面。

    ②href="对应网页链接地址"

    作用是跳转到对应网页。

    ③href="本地主页"

    这个呢是我自己电脑里面的一个html文件,自己可以访问,但是别人就没法访问了。

    ②中的是只要网址能打开,所有人都能访问。

    ④href="mailto:对应邮箱地址"

    作用是用本地的邮箱客户端,给填写的邮箱发送邮件。

    ⑤target="_self"

    self,自身的意思,作用就是在当前页面中打开填入的网页链接。

    ⑥target="_blank"

    blank,空白的意思,作用就是在新窗口中打开填入的网页链接。

    ⑦title="刘小爱的博客"

    title,又是标题,这里的作用是:当我们将鼠标放在当前链接上的时候会出现一个标题提示。

    代码编写完毕,做一个测试:

    其中有个小常识:

    左键直接点击,会在当前页面中打开对应链接。

    Ctrl+左键点击,会在新的页面中打开对应链接。

    二、图片标签和列表标签

    1图片标签

    image,图像的意思,简写为img,图片标签也就是用img来表示。

    ①src="图片地址"

    如果是本地图片,写出图片所在的路径即可。

    如果是网络图片,写出其对应的链接即可。

    其中width为宽度,height为高度,如果只设置其中一项,高度和宽度是等比例缩放的。

    当然也可以宽度高度同时设置不同的值。

    ②alt="图片丢失了啦"

    如果图片丢失了,就会显示alt里面的内容。

    ③title="我是刘小爱"

    同a标签一样,当鼠标放在该图片上时,会显示title里的内容。

    2列表标签

    list,即列表的意思,其中又分为有序列表和无序列表。

    有序列表:ordered list,简写就是ol。

    ①type="1"

    数字排序,这也是默认的有序排序规则,所以可以省略不写。

    ②type="a"

    使用小写字母排序,详情见上图。

    ③type="A"

    使用大写字母排序,详情见上图。

    ④type="Ⅰ"

    使用罗马字母排序,详情见上图。

    ⑤type="i"

    使用字母i来排序,详情见上图。

    无序列表:unordered list,简写就是 ul。

    ①type="disc"

    disc,唱片、圆盘的意思,这是无序列表的默认属性,所以可以省略不写。

    ②type="circle"

    circle,圆形的意思。

    ③type="square"

    square,正方形的意思。

    三、表格标签

    1基本介绍

    table,表格的意思,这在学数据库时就接触过。

    tr,tablerow的缩写,表示的是表格中的行。

    td,tabledata的缩写,表示的是表格中的数据。

    ①单元格:cell:细胞的意思,在表格中就表示为一个单元格。

    ②表格外边框:border,边界的意思,用其可以设置外边框的粗细。

    ③单元格外间距:cellspacing,用其设定外间距。

    ④单元格内间距:cellpadding,用其设定内间距。

    其中width表示表格的宽度,并且外间距一般都会设定为0,不然都不像是个表格的样子。

    ①caption标签

    标题的意思,用以说明表格的标题,我这边还用了一个b标签将其给加粗了。

    ②th标签

    table head的简写,也就是表格的表头,它是默认居中加粗的。

    当然我们也可以根据align属性来设定排序位置(居左,居中,居右)。

    此外,其中也可以使用thead、tbody、tfoot标签来划分表格。

    • thead表示表格的头部。
    • tbody表示表格的主体。
    • tfoot表示表格的脚部。

    这个稍作了解即可,感觉使用这些标签和不使用这些标签对表格本身没有影响。

    2表格快速模板设置

    看到左上角那个黄灯后点击,选择Language Injection Settings,最后选择html即可。

    这样设置后就可以使用表格快速创建模板了。

    先输入table>tr*4>td*4,再加上Tab键,即可快速创建一个4*4的表格。

    3合并单元格

    ①rowspan

    合并行的意思,相同的列不同的行。

    “2”的意思就是表示是跨两行,从第1行开始将第1行和第2行合并起来了。

    既然如此,那么第2行总共也就只需要3列了,所以将其第2行第1列删除。

    ②colspan

    合并列的意思,相同的行不同的列。

    “3”的意思就是表示是跨3列,从第2列开始将第2列第3列和第4列合并起来了。

    既然如此,那么第3行总共也就只需要2列了,所以将第3行中第3列第4列删除。

    最后

    谢谢你的观看。

    如果可以的话,麻烦帮忙点个赞,谢谢你。

    果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

    一、文档类型声明。

    html5文档类型声明:<!doctype html>

    html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    二、html主标签。

    这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

    <html>

    <head></head>

    <body></body>

    </html>

    三、双标签和单标签。

    在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

    四、head头部标签。

    head头部有以下几种常用标签:

    meta:主要提供有关页面的元信息。

    link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

    title:页面标题的标签。

    script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

    五、body主体标签。

    1、块级标签。

    块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


    <div>div1</div>

    <div>div2</div>

    <style>

    .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    </style>


    前端页面显示的效果如下图:

    常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

    2、内联标签。

    内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


    <style>

    .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    </style>

    <span>span1</span>

    <span>span2</span>


    CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

    常用的内联标签有:span、a、b、strong、i、em 。

    3、内联块级标签。

    内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


    <style>

    .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

    </style>

    <img src="w5.jpg" alt="">

    <img src="w5.jpg" alt="">


    CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

    常用的内联块级标签有:img、input、textarea。

    4、区域标签。

    所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

    常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

    5、表单标签。

    这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

    ​表单常用的标签有:form、input、select、option、textarea 。

    以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。