超文本标记语言：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. Ubuntu14.04搭建安装svnserver

    前两天,公司准备搭建一个svnserver,供大家使用.于是.就先装了一个Ubuntu系统,然后搭建了svnserver的环境.以下把svn搭建的详细过程描写叙述下: 1.安装svn sudo apt ...

  2. Javascript进阶篇——( 事件响应)笔记整理

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 鼠标单击事件(on ...

  3. CAS SSO

    1.      CAS 简介 1.1.  What is CAS ? CAS ( Central Authentication Service ) 是 Yale 大学发起的一个企业级的.开源的项目,旨 ...

  4. 将json格式日期(毫秒数)转成日常日期格式和日常格式时间对比

    第一:是把生成的Json格式的时间转换,注意要看清楚时间的格式 function (cellval) { var date = new Date(parseInt(cellval.replace(&q ...

  5. Email Cover Letter Format

    http://jobsearch.about.com/od/sampleletters/ig/Sample-Letter-Formats/Email-Message-Format.htm   Copy ...

  6. Spring 注入数据源

    一.在项目中添加dataSource所用到的包 dbcp数据源所需包:     commons-dbcp.jar     commons-pool.jar C3P0数据源所需包:     c3p0-0 ...

  7. error LNK2019: 无法解析的外部符号 "public:

    错误 1 error LNK2019: 无法解析的外部符号 "public: __thiscall test::test(void)" (??0test@@QAE@XZ),该符号在 ...

  8. linux网络编程：select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET（转）

    从别人的博客中转载过来了这一篇文章,经过重新编辑排版之后展现于此,做一个知识点保存与学习. select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复 ...

  9. safari 在 iPad Portrait 模式默认设置980px宽度

    最近在做网站兼容性时发现 safari 在 iPad Portrait 模式,默认为html.body标签设置了980px宽度,导致页面被纵向截断,解决方法为在页面head区插入以下代码即可完美解决. ...

  10. 在Windows XP下手动安装Apache+MySQL+PHP环境 要点

    在整个wamp环境搭建中,本质的工作如下: 1,配置系统对php中dll文件能默认处于调用状态.在windos下,对dll文件系统默认处于调用状态的,有两种采用的方式.第一种是:把需要调用dll文件复 ...