整合营销服务商

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

免费咨询热线:

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/

    欢迎订阅。

    全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

    主要内容:这是HTML课程的第四课,主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。



    上节回顾

    在上一节中主要讲解了HTML的标题标签(h1~h7)以及加粗、斜体、下划线、上下标等格式的标签。上节请戳→HTML电脑编程03 标题物理字体标签的使用,大学生学编程

    HTML


    font标签

    font标签通过字面意思来看,就是字体的意思。是的这是一个用来显示文字的标签。不过值得说的是,这个文字可以通过属性的方式,指定颜色和字体大小。比如:

    font标签的写法

    效果:

    font标签的显示效果

    从书写的HTML代码可以看出,font标签包括两个参数:

    1. color(字体的颜色):颜色的值可以为英文,也可以为RGB数值。

    2. size(字体的大小):通过数字1~7可以控制字体的大小。

    3. face(文字的显示字体):这个属性可以设置显示的字体。如可以写为:face="楷体"


    颜色体系

    在HTML中包括两种颜色体系。一种就是直接写颜色的英文,如:red(红色)、blue(蓝色)、green(绿色)等。

    不同颜色

    另外一种颜色体系是RGB。由R(Red)、G(Green)、B(Blue)三种颜色组成。相信小时候很多人都知道两种不同的颜料,可以转换为不同的颜色。RGB就是通过红绿蓝不同的明暗程度。来表示所有的颜色的。

    RGB

    RGB中的每一个颜色都是以六位十六进制进行表示。数值越大颜色越深。如:000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#号。


    段落标签

    段落标签为p。会为里面的文字自动分段显示:

    p标签自动分段


    换行标签

    换行标签为br,这是个单标签。写法为:<br/>。

    br标签的形式

    效果:

    换行标签的效果

    默认情况下,HTML的文档排列形式为自上而下,自左而右。标签包括行级标签和块级标签。如果想要对块级标签进行换行,你就需要使用br标签。


    其他几个标签

    下面是几个标签,大家直接Sublime中写入看一下效果哦。在以后就直接使用啦

    居中预格式化标签

    果想开发一个网站,除了要精通后端开发语言(如: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出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。