超文本标记语言：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. C# 之 抽象类与接口

    抽象类 C#同意把类和方法声明为abstract,即抽象类和抽象方法.抽象类通常代表一个抽象概念,它提供一个继承的出发点,当设计一个新的对象类时,一定是用来继承的,所以,在一个以继承关系形成的等级结构 ...

  2. Android系统Surface机制的SurfaceFlinger服务对帧缓冲区（Frame Buffer）的管理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8046659 在前文中,我们分析了Surface ...

  3. Java Junit4测试功能

    作为一个java新手,有些东西有必要记下来,以便以后方便查看. 为了让自己有养成良好的习惯,新建一个测试的文件夹:test在项目上右击→New→Folder.新建一个test文件夹. 接下来要在你需要 ...

  4. sql server保留小数解决方法

    在数据库中,我们有时会用到小数,怎样在数据库中转化小数呢,下面是一些常用的方法. 1.使用Round(字段名/数字,小数保留位数)方法,如下所示: select Round(3.333,2) 结果如下 ...

  5. Crystal Report分組中的序號重新遞增

    客戶要批次列印發票,也就是報表需要按照發票號碼(INV_NO)進行分組,每個發票里還有明細的item,之前因為直接抓RecordNumber,所以該欄位只能從1開始計數,遇到新的發票發號不會重新從1開 ...

  6. IOS创建单例的两种方法

    1.0  苹果官方写法:  static AccountManager *DefaultManager = nil; + (AccountManager *)defaultManager { if ( ...

  7. 转：C#整数三种强制类型转换int、Convert.ToInt32（）、int.Parse()的区别

    1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...

  8. java的clone

    做项目时有时可能会遇到需要克隆对象的时候,因为有时候对象是直接从别的类get到的,那样引用的是一个对象,修改的话会将原先的对象也修改了. java的浅克隆,十分简单.但是只会克隆基本的数据类型,当涉及 ...

  9. C# Winform程序本地化应用

    1. 创建一个WinForm应用程序 – “WindowsFormsLocalizationTest”. 2. 在主窗体属性栏里,把Localizable属性设置成”True”. 3. 添加两个But ...

  10. php isset — 检测变量是否设置 foreach循环运用

    例子 $a = 336 ; $b = 33 ; function large($x,$y){ if((!isset($x))||(!isset($y))){ // echo "this fu ...