HTML学习笔记(1)

原创 2016年06月01日 11:23:50
本次学习是通过W3School网站学习

标题 :     <h1></h1>  h1到h6字体越来越小  

                  <hr />水平线


段落 :     <p></p>

                  <br /> 换行


格式化:

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式(style)代替。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域(块级)。
<span> 定义文档中的行内的小块或区域。
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。_blank是打开新的一个页面。

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

例子:

<a name="tips">xxxx</a>
<a href="#tips">1111</a>
点击1111就会返回xxxx处。


添加图像的方法见http://www.w3school.com.cn/html/html_images.asp的各个例子。


HTML表格

表格标签

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

更多的例子见http://www.w3school.com.cn/html/html_tables.asp


HTML列表

列表标签

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。
更多的例子见http://www.w3school.com.cn/html/html_lists.asp


HTML 分组标签

标签 描述
<div> 定义文档中的分区或节(division/section)。
<span> 定义 span,用来组合文档中的行内元素。

表单标签

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<isindex> 已废弃。由 <input> 代替。
更多的例子见http://www.w3school.com.cn/html/html_forms.asp


框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面
框架结构标签(<frameset>)
  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame)

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

更多的例子见http://www.w3school.com.cn/html/html_frames.asp



xxx

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014年10月02日 00:28
  • 4550

OpenCV学习笔记大集锦

转载自: OpenCV学习笔记大集锦 – 视觉机器人 http://www.cvrobot.net/collect-opencv-resource-learn-study-note-chinese...
  • qq_26898461
  • qq_26898461
  • 2016年01月06日 09:49
  • 1431

html学习笔记(1)

1、html:超文本标记语言,标记:就是用来描述网页内容的一些特定符号,不是编程语言,而是一种描述性的标记语言。 2、制作html网页文件     *** 裸奔(只有内容,没有修饰)      a、新...
  • hanbo622
  • hanbo622
  • 2015年04月12日 17:57
  • 4479

myBatis学习笔记(1)——快速入门

在项目中使用myBatis 导入jar包 在src下创建配置文件
  • u010837612
  • u010837612
  • 2015年05月12日 11:06
  • 944

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才...
  • qq_36368586
  • qq_36368586
  • 2016年11月20日 16:53
  • 4003

HTML 学习笔记1 ——html样式

学习链接:w3school HTML 样式 style 属性淘汰了“旧的” bgcolor 属性。 style 属性淘汰了旧的 标签。 style 属性淘汰了旧的 "align" 属...
  • wzgbgz
  • wzgbgz
  • 2017年10月18日 09:53
  • 79

Html学习笔记(1)-Html初步

Html学习笔记(1)-Html初步标签(空格分隔): html primer web 1.Html和CSS的关系HTML,CSS,JavaScript三门语言为web前端必备语言,一下就是他们的作用...
  • SkyeyesXY
  • SkyeyesXY
  • 2016年03月09日 19:25
  • 168

【机器学习-斯坦福】学习笔记1 - 机器学习的动机与应用

开始看Andrew Ng的经典课程机器学习,随堂做的学习笔记 机器学习的动机与应用 工具:需正版:Matlab,免费:Octave   定义(Arthur Samuel 1959): 在不直接针对问题...
  • maverick1990
  • maverick1990
  • 2013年08月29日 17:23
  • 16646

FPGA笔记(四)

FPGA笔记(四) 又到了周末,今天晚上感觉还有些状态,这几天状态都不好,也没有好好学习!这可是不行的,要好好努力!加油!Rome is not built in one day! 今天在看消抖的列子...
  • Struggle_For_M
  • Struggle_For_M
  • 2016年05月29日 21:24
  • 540

HTML学习笔记<1>

定义html文档 定义可见内容, bgcolor定义背景颜色 ~定义标题, align="center"属性居中 定义段落 定义网址链接,href属性接上网址 定义图像 换行 水平线 ...
  • hudsukd
  • hudsukd
  • 2016年02月04日 16:18
  • 41
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML学习笔记(1)
举报原因:
原因补充:

(最多只允许输入30个字)