前端学习 第四弹: HTML(一)

元素分类:块元素 内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>, <p>, <ul>, <table>,<div>

内联元素在显示时通常不会以新行开始。

例子:<b>, <td>, <a>, <img>,<span>

段落    HTML中的段落靠<p>来划分    p是块级元素

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

<p>This is<br />a para<br />graph with line breaks</p>

style 属性用于改变 HTML 元素的样式。

background-color       背景颜色

  <body style="background-color:yellow">

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

  <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

text-align 属性规定了元素中文本的水平对齐方式

  <h1 style="text-align:center">This is a heading</h1>

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

tr(table row)是一行 td(table data cell)是一列/单元

这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。  <td>&nbsp;</td>

列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

框架frame

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame)

Frame 标签定义了放置在每个框架中的 HTML 文档。

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

iframe 用于在网页内显示网页

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" name="iframe_a"></iframe>

  长200 宽200 去除边框

iframe可以作为连接的目标  <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

												

前端学习 第四弹: HTML(一)的更多相关文章

  1. 前端学习 第七弹: Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  2. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  3. 前端学习 第五弹: CSS (一)

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  4. 前端学习 第三弹: JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  5. 前端学习(四):body标签(二)

    进击のpython ***** 前端学习--body标签 接着上一节,我们看一下还有没有什么网址 果不其然,在看到新闻类的网址的时候 我们发现还有许多的不一样的东西! 使用ul,添加新闻信息列表 这个 ...

  6. Python3 学习第四弹:编码问题(转载)

    关于python的编码问题一直以来不得解,终于在今天从这篇博文中明白了. 原文地址: http://nedbatchelder.com/text/unipain.html 译文地址:http://py ...

  7. css学习の第一四弹—代码格式简写归纳

    一.代码简写方式归纳 >>1.盒模型代码简写: 外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左 1.如果t ...

  8. 前端学习(十四)js回顾和定时器(笔记)

    回顾知识点:    作用域:        1.全局变量:在任何位置都可以使用的变量        2.局部变量:只能在函数内部使用的变量        3.闭包:子函数可以使用父函数的局部变量 -- ...

  9. web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. eclipse 导入工程报错Unable to execute dex: Multiple dex files define Landroid/annotation/SuppressLint

    对策: 检查libs 是否有重复加载的.

  2. CenOS 6.5下安装docker(转)

    2014-12-15 10:23 blessed24 To be Done的博客 字号:T | T 最近在自己的centos上搭建了一个Docker,顺便将一些常用操作记录下. AD:51CTO网+ ...

  3. 解决maven创建web项目卡死在generator插件(转)

    如下图所示:在Properties中添加一个参数archetypeCatalog=internal,不加这个参数,在maven生成骨架的时候将会非常慢,有时候会直接卡住. 理由 archetypeCa ...

  4. ie7 用 clearfix 清除浮动时遇到的问题

    <!doctype html> <html> <head> <style> .fr{float:right;display:inline} li{bor ...

  5. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  6. 类似qq的左滑菜单栏简单实现

    代码托管到了Github https://github.com/cyuanyang/YYSlideView 主演实现代码: 1.滑动的viewController的初始化主要view -(instan ...

  7. mvc 导出excel

    #region 导出new方法 [NonAction] protected string RenderViewToString(Controller controller, string viewNa ...

  8. node_modules\typescript\lib 未指向有效的 tsserver 安装 将禁用TypeScript 语言功能

    Ionic2 项目中经常遇到这个问题 每次都找半天无果. 简单记录一下  粗暴的解决办法: 卸载ts并从新安装即可 //卸载typescript npm uninstall typescript // ...

  9. C语言程序设计第11次作业

    一.本次课主要内容: 本章主要介绍指针相关的基础知识,本节课的主要如下 (1)通过示例"密码开锁"引入指针的概念和主要知识点,分析了密码开锁的过程来说明变量.内存单元和地址之间的关 ...

  10. iOS系统tabbar图标出现重影问题

    大家在自定义tabbar的时候会将系统的tabbar干掉,然后放上自已自定义的tabbar(含有想要的Button)对不对,具体代码如下: /** * 添加自定义的tabBar */ -(void)a ...