超文本标记语言：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. Hyperion Essbase BusinessRule 函数学习--2

    @AVG Returns the average of all values in expList. [返回表达式列表的平均值] Syntax @AVG (SKIPNONE | SKIPMISSING ...

  2. Hacker（三）之黑客定位目标---IP

    IP即Internet Protocol的简称,中文简称"网协",是为计算机网络相互连接进行通信而设计的协议.无论何种操作系统,只要遵守IP协议就可以与Internet互联互通. ...

  3. 【巧妙算法系列】【Uva 11464】 - Even Parity 偶数矩阵

    偶数矩阵(Even Parity, UVa 11464) 给你一个n×n的01矩阵(每个元素非0即1),你的任务是把尽量少的0变成1,使得每个元素的上.下.左.右的元素(如果存在的话)之和均为偶数.比 ...

  4. zabbix监控代理zabbix-proxy

    新公司监控用的zabbix,其中用到了zabbix-proxy,原先没有尝试弄过,现在先提前安装看看,以便后续使用查阅. Zabbix-proxy 是一个监控代理服务器,它收集监控到的数据,先存放在缓 ...

  5. WdatePicker日历控件使用方法（转）

    转自:http://www.cnblogs.com/weixing/archive/2011/08/15/2139431.html WdatePicker日历控件使用方法   1. 跨无限级框架显示 ...

  6. oracle函数trunc的使用

    1.日期比较时精确到日,可以使用 TRUNC(sysdate,'dd')函数.函数支持格式有:yyyy MM  dd  hh Mi可以用   select TRUNC(sysdate,'yyyy') ...

  7. mysql查询优化技巧

    索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存)等等.这里记录的优化技巧更适合开发人员,都是从网络上搜集和整理的,主要是查询语句上的优化,其他层面上 ...

  8. Python爬虫实战（4）：豆瓣小组话题数据采集—动态网页

    1, 引言 注释:上一篇<Python爬虫实战(3):安居客房产经纪人信息采集>,访问的网页是静态网页,有朋友模仿那个实战来采集动态加载豆瓣小组的网页,结果不成功.本篇是针对动态网页的数据 ...

  9. 初识scrapy，美空网图片爬取实战

          这俩天研究了下scrapy爬虫框架,遂准备写个爬虫练练手.平时做的较多的事情是浏览图片,对,没错,就是那种艺术照,我骄傲的认为,多看美照一定能提高审美,并且成为一个优雅的程序员.O(∩_∩ ...

  10. lda模型的python实现

    LDA(Latent Dirichlet Allocation)是一种文档主题生成模型,最近看了点资料,准备使用python实现一下.至于数学模型相关知识,某度一大堆,这里也给出之前参考过的一个挺详细 ...