html入门的一些东西

##########################################HTML介绍##########################################
HTML文件是什么？
HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。
---------------------------------------
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
---------------------------------------
HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。
为什么使用小写标签？
HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？
假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。
标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：
<body bgcolor="red">
标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。
属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
##########################################HTML介绍##########################################
##########################################HTML基本标签##########################################
----------------------------------------------------------
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
----------------------------------------------------------
段落
<p> </p> --> HTML自动在一个段落前后各添加一个空行。
标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
----------------------------------
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
----------------------------------
换行<br>
当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<p>This <br> is a para<br>graph with line breaks</p>
<br>标签是一个空标签，它没有结束标记。
HTML中的注释
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。
注意：你需要在左括号“<”后面跟一个感叹号，右括号不用。
基本注意点——有用的技巧:
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。
HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。
使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）
你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。
HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。
使用水平线（<hr>标签）来分隔
------------------------------------------------------------
<html>
<body bgcolor="blue">
<hr>
<center><p>This is a test page <br>This is a test page</p>
<hr>
</body>
</html>
------------------------------------------------------------
-----------------------------------------
<html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em> <! -- 强调 -->
This text is emphasized
</em>
<br>
<i> <! -- 斜体 -->
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub> <! -- 下标 -->
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup> <! -- 上标 -->
</body>
</html>
-----------------------------------------
-----------------------------------------
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
----------------------------------------
##########################################HTML基本标签##########################################
##########################################HTML实体##########################################
有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
想要在HTML中显示一个小于号“<”，需要用到字符实体。
一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）
想要在HTML文档中显示一个小于号，我们必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
注意：实体名是大小写敏感的。
-------------------------------------------
<html>
<body>
<p>This is a character entity: {</p>
<p>
</body>
</html>
##########################################HTML实体##########################################
##########################################HTML链接##########################################
-----------------------------------------------------------
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
<! -- 创建链接其中<a href="http://www.microsoft.com/" target="_blank">
<! -- 以上表示在新标签打开链接，不加的话会在当前标签覆盖原网页打开 -->
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>
-----------------------------------------------------------
------------------------------------------
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
------------------------------------------
##########################################HTML链接##########################################
##########################################HTML框架##########################################
------------------------------------------
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 这个例子说明了如何创建一个有三个页面的垂直分栏。src=填网页名称 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
------------------------------------------
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 这个例子说明了如何创建一个有三个页面的水平分栏。src=填网页名称 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
<frame>标签定义了每个框架中放入什么文件
基本注意点——有用的技巧
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。
##########################################HTML框架##########################################
##########################################HTML表格##########################################
<tr> 标签定义 HTML 表格中的行。
--------------------------------------
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-------------------------------------
##########################################HTML表格##########################################

转载于:https://blog.51cto.com/kumu1988/1086038

html入门的一些东西相关推荐

HTML+CSS+JavaScript做的音乐播放器，就当是入门的小东西吧～
疯了,因为有.mp3文件搞得项目太大,没法打包上传,懒的去删了,直接上代码- music.html <!DOCTYPE HTML> <html><head> &l ...
web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
React 超详细入门教程
文章目录一,React简介 1.什么是React 2.React工作原理 3.React历史 4.React的特点 5. React 高效的原因 6.React 官方网站二,React基本使用 1 ...
51单片机之入门准备
今天我们来聊聊51入门. 一环境准备软件准备: 第一个是烧写工具,我已经上传了:http://download.csdn.net/detail/sum_tw/9762381 第二个是编写工具,我已 ...
当单片机遇到状态机入门QP
当单片机遇到状态机前言前些日子在微信上看到李肖遥的公众号,里面系统讲述了QP框架,我很有感触.我用QP框架很多年了,一开始是使用QM和QPC++,到后来抛弃了QM,直接使用QPC裸写程序,到后来自 ...
SharePoint 2016 入门视频教程
之前一直有朋友让自己录一些SharePoint的入门视频,之前没有太多时间,一个巧合的机会收到CSDN学院的邮件,可以在CSDN上发布视频教程,自己就录了一些.说起录视频也是蛮辛苦的,每天下班吃完饭要 ...
【原创】分享一些机器学习和深度学习的学习资料
如果你还在苦苦寻找机器学习和深度学习入门资料的话,或许可以看看本文我的一些推荐,这些材料我自己都学过一遍,分享一下点评,希望对你有帮助.注意,本文只是点评这些资源,不提供任何资源的盗版下载,所有资源我 ...
python爬虫动态加载页面_python3的爬虫笔记8——动态加载页面爬虫
其实大部分主流网站都不是静态的html,html和Javascript相结合已经是大势所趋. 本篇以花瓣网主页为例子. 花瓣网主页,右键查看网页源代码,获得的页面是这样的: 如果还是用之前静态页面的那 ...
计算机进阶操作,新手进阶Win7系统操作使用手册
Win7旗舰版用户会面临一个困惑,新的操作系统有些功能不是很明白,操作起来会觉得很迷糊.这时候就需要有个叫入门教程的东西来帮助你快速从 Win7旗舰版菜鸟升级到高手,如果翻一本又厚又繁琐的教程书看上半 ...
CSS清除默认样式，面试篇
前言过完年了,准备实习的你是已经在实习了,还是已经辞职回家过年,准备年后重新找工作呢,又或者是准备2021年春招? 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢? 学习建 ...

html入门的一些东西

html入门的一些东西相关推荐

最新文章

热门文章