码迷,mamicode.com
首页 > Web开发 > 详细

前端基础之 html

时间:2017-11-03 00:16:03      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:有用   描述   老男孩培训   行内元素   简单   有序列表   结束   计算机   属性   

---恢复内容开始---

web服务本质

html

定义

  超文本标记语言。是通过标签语言来标记要显示的网页中的各个部分。一套浏览器认识的规则。

结构

  1.<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML文档

在它们之间是文档的头部<head>和主体<body>.

  2.它们之间的内容不会在浏览器的文档窗口显示,但是期间的元素有特殊重要的意义。

  3.<title></title> 定义网页标题,在浏览器标题栏显示 

  4.<body></body> 之间的文本是可见的网页主体内容 

html标签格式

  1.由尖括号包围的关键词

  2.通常是成对出现的(双边标记),比如<div>和</div> 

  3.标签不区分大小写 

  4.标签分为开始和结束两部分标签之间的内容我们叫做标签体<a> </a>。有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签。<br/><hr/><img/>

  5.标签可以嵌套但是不能交叉嵌套;

标签的语法

  <标签名 属性1=‘属性值1’属性2=‘属性值2’……>内容部分</标签名>

  <标签名 属性1=‘属性值1’属性2=‘属性值2’……/>

常用标签

1.<!DOCTYPE>标签

  声明位于文档中的最前面的位置,处于<html> 标签之前。此标签可告知浏览器文档使用哪种 HTML或XHTML规范

  1.BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。

  2.CSS1Compat: 标准模式,浏览器使用W3C的标准解析渲染页面

2.<head>内常用标签 头部

    <meta>标签位于文档的头部,不包含任何内容,提供的信息是用户不可见的

    meta 标签共有两个属性,它们分别是http-equiv 属性和 name 属性,不同的属性有不同的参数值,这些不同的参数值实现了不同的网页功能。

    name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索收获机器人查找信息和分类信息用的。

 

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
 
<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
   http-equiv 属性:相当于http 的文件头作用,它可以向浏览器传回一些有用的信息以帮助正确地显示网页内容与之相对的属性值为content,content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
 

 

3.<body>内常用标签  主体

    <hn>: n 的取值范围是1-6 ; 从大到小。用来表示标题

    <p> : 段落标签。包裹的内容被换行。并且也上下内容之间有一行空白

    <b> <strong> :加粗标签

    <em>: 文字变成斜体

    <sup> 和 <sub> :上角标 和 下角标

    <br> : 换行

    <hr> : 水平线

    特殊字符:&lt; &gt; &quot; &copy; &reg;

          

4.<div>和<span>

   <div></div> 只是一个块级元素,并无实际意义 主要通过CSS 样式为其赋予不同的表现

   <span></span> 为内联行(行内元素),同上。

5.<img>

    src: 要显示图片的路径

    alt: 图片没有加载成功时的提示

    title : 鼠标悬浮时的提示信息

    width : 图片的宽

    height :图片的高

列表标签

  无序列表<ul> :[type属性:disc(实心圆点)(默认). circle(空心圆圈).square(实心方块)]    

 

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol>

 

  有序列表<ol>

 

  <li> :列表中的每一项

  <dl> :定义列表

  <dt> : 列表标题

  <dd> : 列表项

 

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

 

表格标签

<table>
         <tr>
                <td>标题</td>
                <td>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

 

 <tr> :table row

 <th> :table head cell

 <td>: table data cell

  border :表格边框

  cellpadding : 内边距

  cellspacing: 外边距

  width :像素百分比。

  rowspan :单元格竖跨多少行

  colspan : 单元格横跨多少列(即合并单元格)  

 

 

 

---恢复内容结束---

前端基础之 html

标签:有用   描述   老男孩培训   行内元素   简单   有序列表   结束   计算机   属性   

原文地址:http://www.cnblogs.com/tianjianng/p/7775101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!