HTML --- 简单的标签

2021-06-17 20:05

阅读:684

YPE >

标签:序列   oldboy   结构   css   元素   产生   效果   char   ble   

HTML --- 简单的标签

 

html概述和基本结构

html概述

  HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

  HTML 不是一种编程语言,而是一种标记语言 (markup language)
  HTML 使用标记标签来描述网页

html基本结构

一个html的基本结构如下:

DOCTYPE html>
html lang="en">
    head>            
        meta charset="UTF-8">
        title>网页标题title>
    head>
    body>
          网页显示内容
    body>
html>

  第一行是文档声明,

   声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  第二行“”标签和最后一行“”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是‘lang="zh-CN"‘,不定义也没什么影响,它一般作为分析统计用。 “

”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“”内编写网页上显示的内容。

html标签格式

html文档规范

  xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

    1、所有的标签必须小写

    2、所有的属性必须用双引号括起来

    3、所有标签必须闭合

    4、img必须要加alt属性(对图片的描述)

 

标签的语法:

  内容部分标签名>
  

html注释:

1 

 

内常用标签

标签

  meta介绍
  元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
  标签位于文档的头部,不包含任何内容。
  提供的信息是用户不可见的

  meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

(1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    

1 meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
2  
3 meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

(2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

1 meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
2  
3 meta http-equiv="content-Type" charset=UTF8">
4  
5 meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

非meta标签

1 title>oldboytitle>     
2 link rel="icon" href="http://www.jd.com/favicon.ico">
3 link rel="stylesheet" href="css.css">
4 script src="hello.js">script> 

内常用标签

 1 hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
 2 
 3 p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
 4 
 5 b> strong>: 加粗标签.
 6 
 7 strike>: 为文字加上一条中线.
 8 
 9 em>: 文字变成斜体.
10 
11 sup>sub>: 上角标 和 下角表.
12 
13 br>:换行.
14 
15 hr>:水平线
16 
17 特殊字符:
18       < &gt&quot©®

html块

  

只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
  表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

  块级元素与行内元素的区别
  所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
  这两个元素是专门为定义CSS样式而生的。

html图像

标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。

1 img src="images/pic.jpg" alt="产品图片" />

超链接标签(锚标签)

标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。

1 a href="#">a> 
2 a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客a>
3 a href="2.html">测试页面2a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。

1 a href="#mao1">标题一a>
2 ......
3 ......
4 h3 id="mao1">跳转到的标题h3>

html列表

有序列表

在网页上定义一个有编号的内容列表可以用

  1. 配合使用来实现,代码如下:
    1 ol>
    2     li>列表文字一li>
    3     li>列表文字二li>
    4     li>列表文字三li>
    5 ol>

    在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。

    无序列表

    在网页上定义一个无编号的内容列表可以用

    • 配合使用来实现,代码如下:
      1 ul>
      2     li>列表文字一li>
      3     li>列表文字二li>
      4     li>列表文字三li>
      5 ul>

        在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

      定义列表

      定义列表通常用于术语的定义。

      标签表示列表的整体。
      标签定义术语的题目。
      标签是术语的解释。一个
      中可以有多个题目和解释,代码如下:
       1 h3>前端三大块h3>
       2 dl>
       3     dt>htmldt>
       4     dd>负责页面的结构dd>
       5 
       6     dt>cssdt>
       7     dd>负责页面的表现dd>
       8 
       9     dt>javascriptdt>
      10     dd>负责页面的行为dd>
      11 
      12 dl>

      html表格

      table常用标签

        1、table标签:声明一个表格

        2、tr标签:定义表格中的一行

        3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

      table常用属性:

        1、border 定义表格的边框

        2、cellpadding 定义单元格内内容与边框的距离

        3、cellspacing 定义单元格与单元格之间的距离

        4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

        5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

        6、colspan 设置单元格水平合并

        7、rowspan 设置单元格垂直合并

      传统布局:

      传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:

        1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0

        2、单元格里面嵌套表格

        3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

        4、通过属性或者css样式设置单元格中元素的样式

       

      HTML --- 简单的标签

      标签:序列   oldboy   结构   css   元素   产生   效果   char   ble   

      原文地址:http://www.cnblogs.com/alwaysInMe/p/7265024.html


评论


亲,登录后才可以留言!