一、HTML 标签

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

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

•HTML 标签通常是成对出现的,比如 <b> 和 </b>

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

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

•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>

<b>字体加粗</b>
    <i>倾斜</i>
    <em>倾斜</em><!--更容易搜索到-->
    <u>下划线</u><br>
    <strong>字体加粗,强调语气</strong>
    <center>居中</center>
     <br/>换行
    &nbsp; 空格
    <center>居中</center>
    <!--我是标注标签-->
  ②内容标签
  <h1>--<h6> 标题标签,其中好h1的字体最大,

  <p>段落标签</p>
    <div> 内容容器,网页布局用</div>

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

 

  ③常用标签:
  超链接标签:<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之标签的更多相关文章

  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. Android Studio 解决方法No JVM installation found. Please install a 64-bit JDK.

    ————————— Error launching Android Studio ————————— No JVM installation found. Please install a 64-bi ...

  2. Unity3D移植到自己的Android程序

    用Unity3D开发需要把动画效果移植到现有的APP上面.Unity for Android 比较特殊,Unity for IOS 打包是将XCODE工程直接交给开发者,开发者可以在工程的基础上继续添 ...

  3. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  4. Nuget升级问题

    想在项目中通过“Add Library Package Reference”添加Moq,结果出现错误提示说Nuget版本太低. 要升级Nuget需要先卸载原来的Nuget. 1.在控制面板,卸载程序里 ...

  5. 基于JDK 8的Dubbo Admin

    在使用Dubbo  Admin的时候,一直报错,无法启动,因为Dubbo Admin使用的各种库相对是比较旧的,在JDK 8下,有些小问题 具体解决过程参考的以下链接 https://github.c ...

  6. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  7. WL(Wear leveling)磨损平衡

    前面说过,闪存寿命是以P/E次数来计算的,而WL就是确保闪存内每个块被写入的次数相等的一种机制.若没有这个机制,SSD内的闪存颗粒就无法在同一时间内挂掉,那对用户来说就是灾难.       会出现这种 ...

  8. highlight a DOM element on mouse over, like inspect does

    highlight a DOM element on mouse over, like inspect does highlight a DOM element on mouse over, like ...

  9. javascript - Show mouse cursor in phantom.js - Stack Overflow

    javascript - Show mouse cursor in phantom.js - Stack Overflow Show mouse cursor in phantom.js

  10. GLView基本分析

    GLView是cocos2d-x基于OpenGL ES的调用封装UI库. OpenGL本身是跨平台的计算机图形实现API,在每一个平台的详细实现是不一样.所以每次使用之前先要初始化,去设置平台相关的信 ...