超文本标记语言：HTML

W3C：互联网联盟

注释语法：<!--注释掉的内容-->

标签格式：

　　双标签元素：<标签名 属性 style="样式">内容</标签名>

　　单标签元素：<标签名 /> 或<标签名>

基本标签：

第一类：自带标签

　　<html>网页开始 </html>网页结束

　　<head>头标签 里面放控制性的东西

　　<body>主体标签，里面放网页内容

　　<title>网页的标题

<body>的几个属性：

　　bgcolor背景色

　　background背景图片

　　text文本颜色

第二类：格式标签

　　<font color="#663399" face="微软雅黑" size="3">操作文字</font>

　　<b>加粗

　　<strong>加粗

　　<i>倾斜

　　<em>倾斜

　　<u>下划线

　　<br/>换行

　　&nbsp; 空格 　　

　　<center>居中

第三类：内容标签

　　<h1>--<h6> 标题标签（会自动换行），其中好h1的字体最大

　　<p>段落标签，段落之间自动空行

　　<div>层标签，内容容器，网页布局用,默认占一行

　　<span>层标签，内容容器，默认有多大空间占多大空间

　　<ul>无序列表，里面的每一项用<li> ，列表符号可改变

　　<ol>有序列表，里面的每一项用<li>，列表符号可改变

　　<ol type="1">    --有序列表，序号为1,2,3……，引号中可以更改序号形式

　　　　<li>内容</li>

　　　　<li>内容</li>

　　</ol>    --上面“ol”改为“ul”则为无序列表

“../”　　表示上级目录

“./”　　 表示当前目录

相对路径：从当前页面开始查找。

绝对路径：从网站的根开始查找。  “/”，代表网站的根。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

四、常用标签

1、超链接标签

路径问题：手写路径怎么写 以该网页所在的位置为基础，如果找它的父级文件夹用../ 如果找它的子级文件夹用/ 直到找到图片为止

　　<a href="超链接地址" target=“_blank”>超链接的文字</a>     --href（hyperlink reference）

属性 值 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
 HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 规定在何处打开链接文档。
type MIME type 规定被链接文档的的 MIME 类型。

　第一步：做锚点的标签。<a name=""></a>

　　第二步：做锚点链接。<a href="#目标链接的name的值"></a>

图片超链接：<a href="超链接地址" target=“_blank”> <img src="图片地址" alt="文字" width="" height="" />  </a>

2、图片标签

　　<img src="图片地址" alt="文字" width="" height="" />

必需的属性

属性 值 描述
alt text 规定图像的替代文本。alt在图片无法加载时，显示文字，还可帮助搜索引擎搜索。
src URL 规定显示图像的 URL。

可选的属性

属性 值 描述
align
  • top
  • bottom
  • middle
  • left
  • right
 不推荐使用。规定如何根据周围的文本来排列图像。
border pixels 不推荐使用。定义图像周围的边框。
height
  • pixels
  • %
 定义图像的高度。高跟宽设置一个即可，显示图片会按比例缩放
hspace pixels 不推荐使用。定义图像左侧和右侧的空白。
ismap URL 将图像定义为服务器端图像映射。
longdesc URL 指向包含长的图像描述文档的 URL。
usemap URL 将图像定义为客户器端图像映射。
vspace pixels 不推荐使用。定义图像顶部和底部的空白。
width
  • pixels
  • %
 设置图像的宽度。

注：

“../”　　表示上级目录

“./”　　 表示当前目录

相对路径：从当前页面开始查找。

绝对路径：从网站的根开始查找。  “/”，代表网站的根。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

4、表格标签：

　　<table> 属性：width:表格宽度，border:边框 cellspacing：单元格间距  cellpadding：单元格的内边距 bordercolor:边框颜色

　　<tr>行，属性：bgcolor:背景色，

　　<td>单元格：属性：width:宽度，height：高度，align:水平对齐 valign：垂直对齐 rowspan="3"合并列 colspan="2"合并行

HTML构成及基本标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. GCC、GDB、Makefile

    1.GCC程序编译 Linux系统下的gcc(GNUCCompiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作之一.gcc可以在多种硬体平台上编译出可执行程序,其执行效率与一 ...

  2. 虚拟化之KVM virsh常用命令篇

    1,查看运行的虚拟机 virsh list 2,查看所有的虚拟机(关闭和运行的虚拟机) virsh list --all 3,连接虚拟机 virsh console +域名(虚拟机的名称) 4,退出虚 ...

  3. JQ动画 show hide

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Oracle创建数据库、表、用户

    create tablespace south_knowledge logging datafile 'D:\TestDatabase\south_knowledge.dbf' size 10m au ...

  5. python- 如何return返回多个值

    函数的return 语句只能返回一个值,可以是任何类型. 因此,我们可以“返回一个 tuple类型,来间接达到返回多个值 ”. 例:   x 除以 y 的余数与商的函数 def    F1 ( x, ...

  6. 安装TDM-GCC

    TDM-GCC是一组免费的编译器套件,有32位和64位两种版本.其中64位版既可以编译生成64位的可执行文件,又可以编译生成32位的可执行文件.从TDM-GCC的官网可以下载到相应的安装包,安装完成后 ...

  7. WebService使用的一些总结

    什么是WebService: 这个不用我在这里废话,网上的资料一搜一大把,如果你没有接触过这方面的知识,你可以先去网上查一下.这里我只想说一下我印象比较深刻的几点: WebService是基于soap ...

  8. 关于521(nyoj)

    关于521 点击这里 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览网页的流年忽然看到了网上有 ...

  9. MYSQL 插入二进制数的 2 种方法。

    方法 1.insert into TableName set column =''; 方法 2.insert into TableName .... values(.....); ---------- ...

  10. asp.net 获取当月的第一天和最后一天示例

    DateTime now = DateTime.Now; DateTime d1 = ); DateTime d2 = d1.AddMonths().AddDays(-); d1是本月的第一天,d2本 ...