HTML之标签

一、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

•HTML 标签是由尖括号包围的关键词，比如 <html>

•HTML 标签通常是成对出现的，比如 和

•标签对中的第一个标签是开始标签，第二个标签是结束标签

•开始和结束标签也被称为开放标签和闭合标签

•HTML 文档描述网页

•HTML 文档包含 HTML 标签和纯文本

•HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

综上所述。网站是由网页构成的，网页是由HTML（网页）元素构成的。HTML元素是由HTML标签描述的。HTML标签通常成对儿出现。开始元素内容结束。

二、HTML 元素语法

•HTML 元素以开始标签起始

•HTML 元素以结束标签终止

•元素的内容是开始标签与结束标签之间的内容

•某些 HTML 元素具有空内容（empty content）

•空元素在开始标签中进行关闭（以开始标签的结束而结束）

三、HTML框架标签

<body>的几个属性：bgcolor背景色 background背景图片 text文本颜色

四、HTML基本标签

①格式标签

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

字体加粗
倾斜
倾斜
下划线 
字体加粗，强调语气
<center>居中</center>
 换行
  空格
<center>居中</center>

　　②内容标签
　　<h1>--<h6> 标题标签，其中好h1的字体最大，

　 <p>段落标签</p>

    <div> 内容容器，网页布局用</div>

内容容器，区别在与DIV默认占一行,默认用多大空间占多大空间
<ul>无序列表里面的每一项用<li></li>
<ol>有序列表里面的每一项用<li></li>

③常用标签：
　　超链接标签：<a href="http://www.baidu.com">这是一个超链接</a>
　　路径问题：手写路径怎么写
以该网页所在的位置为基础，如果找它的父级文件夹用../ 如果找它的子级文件夹用/ 直到找到图片为止

④ <a>标签中taget的属性：

_parent在父页面打开

_blank在新页面打开

_self在自身页面打开

_top在当前页面打开

⑤ 图片标签
<img src="show.jpg" alt="雕金玫瑰" width="300" height="200" /> <!--高度和宽度设置一个即可，因为图片会按照比例缩放，alt是在图片无法加载时，显示的文字，还可帮助搜索引擎搜索到-->

注：有序列表与无序列表
1、有序列表（显示1、2、3、。。。）
<ol type="1"><!--从1这个序号开始,type后可以填数字、字母，写几从几开始-->

<li>路飞</li>

<li>娜美</li>

<li>山治</li>

</ol>

2.无序列表、无序列表（每列前显示一个黑点）

<ul>

  <li>山治</li>

  <li>路飞</li>

  <li>乌索普</li>

</ul>

五、建立锚点

.设置锚点，在要设置锚点的地方加一个a标签<a name="md"></a> #是本页面意思

.设置跳转，在要跳转的地方加一个A标签<a href="#锚点名"></a>
3.设置跳转另一个页面，<a href="跳转页面的属性.html+#+name名"></a>

HTML之标签的更多相关文章

a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误这 ...
【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
最新去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

js 调用 android 安卓代码
说明一下注意版本问题,不加没效果的 @JavascriptInterface //sdk17版本以上加上注解 //Html调用此方法传递数据 public void show() { Toast.ma ...
zoj 2589 Matrix Searching 二维线段树
题目链接给一个n*n的矩阵, 给q个查询, 每次给出x1, y1, x2, y2, 求这个矩阵中的最小值. 代码基本上和上一题相同... #include<bits/stdc++.h> ...
在FL2440上使用kei MDK 调试程序（J-link）
<一>新建一个工程单击Project ->New µVision Project...菜单项 <二>选择CPU 这里我们选择三星的2440A 点击OK后会提示你是否添加 ...
关于BFC
参考 http://www.html-js.com/article/1866(很棒! 还有栗子) http://www.cnblogs.com/lhb25/p/inside-block-format ...
NET Core MVC 在linux上的创建及发布
NET Core MVC 在linux上的创建及发布前言 ASP.NET core转眼都发布半月多了,社区最近也是非常活跃,虽然最近从事python工作,但也一直对.NET念念不忘,看过了园区大神们 ...
mysql 函数执行权限
mysql> show grants for query_all@'115.236.1x0.x'; +---------------------------------------------- ...
两个textarea 同时变化高度
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
在Mac pro上如何配置adb命令？
在Mac pro上如何将Android SDK的adb命令添加到环境变量中,这里将进行说明! 方法/步骤 1 启动终端,可以在Spotlight中搜索“终端” 2 进入当前用户的HOME目录,命令如下 ...
C++ STL中map存储方式——SAP电面（4）
map存储方式一般是平衡二叉树红黑树
createNewFile创建空文件夹与createTempFile创建临时文件夹
创建要注意的地方如下: <pre name="code" class="java"> File类的createNewFile根据抽象路径创建一个新的 ...

HTML之标签

HTML之标签的更多相关文章

随机推荐

热门专题