cstriker1407的笔记本

好记性不如铅笔头

html, web, 编程

html学习备注

已发表 通过 cstriker1407 在 2014年2月10日 0 评论

阅读下个 →

最近想自学一下web开发中需要的各种基础知识，就开始在【 W3school 】上学习各种教程，这里备注下最基本的html笔记。

备注：

部分笔记内容来自【 W3school 】网站，版权归原作者所有。

CONTENTS

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

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

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
HTML 文档是由 HTML 元素定义的。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
始终为属性值加引号
HTML 提示：使用小写属性
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

空行和空格

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

实例代码：

<!DOCTYPE html>
<html>
	<body>
		this is body begin;
	
		<!--注释：各种标题-->	
		<h1>this is H1</h1>
		<h2>this is H2</h2>
		<h3 align="center">this is H3</h3>
		<h6>this is H6</h6>
		
		<!--注释：段落-->			
		<p>this is paragraph</p>
		
		<!--注释：回车换行-->		
		<br/>
		<!--注释：超链接-->
		<a href="http://116.62.110.235/blog">this ia a link</a>
		<br/>
		<a href="http://116.62.110.235/blog"> <img src="http://www.baidu.com/img/bdlogo.gif" /></a>
		<br/>
		<!--注释：使用blank可以在新窗口中打开-->		
		<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

		<!--注释：锚点-->		
		<a name="tips">基本的注意事项 - 有用的提示</a>
		<a href="#tips">有用的提示</a>

		<br/>		
		<!--注释：图片-->
		<img src="http://www.baidu.com/img/bdlogo.gif"/>
		<!--注释：水平线-->
		<hr />

		<!--注释：文字效果-->
		<b>This text is bold</b> <strong>This text is strong</strong><br/>
		
		<p>pre 标签很适合显示计算机代码：</p>
		<pre>
			for i = 1 to 10
			     print i
			next i
		</pre>
				
		<br/>	
		<!--注释：表格-->
		<table border="2">
			<tr>
				<th>title A</th><!-- 表头 -->
				<th>title B</th>
			</tr>
			<tr>
				<td>cell 1,1</td>
				<td>cell 1,2</td>
			</tr>
			<tr>
				<td>cell 2,1</td>
				<td>cell 2,2</td>
			</tr>
			<tr>
				<td>&nbsp;</td><!-- 空格，占位 -->
				<td>cell 3,2</td>
			</tr>
		</table>
		
		<table border="1">
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th>电话</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <th>电话</th>
		  <td>555 77 855</td>
		</tr>
		</table>

		<table border="1">
		<tr>
		  <th>姓名</th>
		  <th colspan="2">电话</th>
		</tr>
		<tr>
		  <td>Bill Gates</td>
		  <td>555 77 854</td>
		  <td>555 77 855</td>
		</tr>
		</table>
		
		<table border="1">
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th rowspan="2">电话</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <td>555 77 855</td>
		</tr>
		</table>
		
<!--注释：列表-->		
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<ol>
  <li>牛奶</li>
  <ul>
  	<li>蒙牛</li>
  	<li>伊利</li>
  </ul>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
		
<!--注释：表单-->			
<form>
	user:
	<input type="text" name="user"/>
	<br/>
	passwd:
	<input type="password" name="passwd" />
	<br/>
	<input type="radio" name="sex" value="male" /> Male
	<br />
	<input type="radio" name="sex" value="female" /> Female
	<br />
	<input type="checkbox" name="bike" />
	I have a bike
	<br />
	<input type="checkbox" name="car" />
	I have a car
</form>
		
<!--注释：框-->
<fieldset>
	<legend>title</legend>
	HelloFieldSet
	</fieldset>

<!--注释：内联网页-->
<iframe src="http://116.62.110.235/blog" width="200" height="200"></iframe>

</body>
</html>

 实例效果：

this is body begin;

this is H1

this is H2

this is H3

this is H6

this is paragraph


this ia a link

Visit W3School! 基本的注意事项 – 有用的提示 有用的提示

This text is bold This text is strong

pre 标签很适合显示计算机代码： 

			for i = 1 to 10
			     print i
			next i

title A title B
cell 1,1 cell 1,2
cell 2,1 cell 2,2
  cell 3,2
姓名 Bill Gates
电话 555 77 854
电话 555 77 855
姓名 电话
Bill Gates 555 77 854 555 77 855
姓名 Bill Gates
电话 555 77 854
555 77 855

  • 咖啡
  • 茶
  • 牛奶
  1. 牛奶
    • 蒙牛
    • 伊利
  2. 茶
  1. 咖啡
  2. 牛奶
  3. 茶

user:
passwd:
Male
Female
I have a bike
I have a cartitleHelloFieldSet

cstriker1407

阅读下个 →

发表评论

5 × 2 =

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

2024年 4月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
2930  

Contents