html基础

------------- 《HTML&CSS设计与构建网站》 -----------------

1. 页面结构

网页访问机制

User通过Internet服务提供商（ISP），通过域名访问网站。
计算机连接到DNS的服务网络
DNS服务器返回相应网页的托管Web服务器的IP

基本概念

HTML页面是文本文档。
标签通常成对使用。
起始标签可以附带特性。

结构代码



    This is the Title of the Page


    This is the Body of the Page
    Anything within the body of a web page is displayed in the main browser window.
    Es espanol.

2. 文本

语义化标记：不影响网页结构，但是为页面添加额外信息，使描述更加准确

example

Text The Story in the Book Chapter 1 Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of Nature, New Scientist, and all the other scientific journals her work had appeared in, was a well thumbed copy of On The Road. It had been Molly's favourite book since college, and the longer she spent in these four walls the more she felt she needed to be free. She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that Work is the refuge of people who have nothing better to do. Although many considered her pioneering work, unraveling the secrets of the llama DNA, to be an outstanding achievement, Molly did think she had something better to do.

3. 列表

列表注意有序列表，无序列表和定义列表的使用。

Lists Scrambled Eggs Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs. Ingredients 2 eggs 1tbs butter 2tbs cream Method Melt butter in a frying pan over a medium heat Gently mix the eggs and cream in a bowl Once butter has melted add cream and eggs Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette) When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)

4. 表格

注意

rowspan,colspan特性用于跨行或者跨列的表示

长表格可以利用

example

Tables Home starter hosting Premium business hosting Disk space 250mb 1gb Bandwidth 5gb per month 50gb per month Email accounts 3 10 Server Shared VPS Support Email Telephone and email Setup Free Free FTP accounts 1 5 Sign up now and save 10%!

5. 链接

用法

页面跳转
在新页面打开的跳转
链接到当前页面的特定位置
邮件

example

Links Film Folk Festival DiaryHere are some of the film festivals we will be attending this year. Please contact us if you would like more information. January Sundance Film Festival Park City, Utah, USA 20 - 30 January 2011 February Tropfest Sydney, Australia 20 February 2011 March South by Southwest Austin, Texas, USA 11 - 20 March 2011 April London Independent Film Festival London, UK 15 - 24 April 2011 May Cannes International Film Festival Cannes, France 11 - 22 May 2011 June Sydney Film Festival Sydney, Australia 8 - 19 June 2011 July Melbourne International Film Festival Melbourne, Victoria, Australia 22 July - 7 August 2011 August New Zealand International Film Festival Dunedin, New Zealand 4 - 25 August 2011 September Venice Film Festival Venice, Italy 31 August - 10 September 2011 October London Film Festival London, UK 12 - 27 October 2011 November International Documentary Film Festival Amsterdam (IDFA) Amsterdam, Netherlands 16 - 27 November 2011 December Whistler Film Festival Whistler, BC, Canada 30 November - 4 December 2011 About Film Folk Top of page

6. 图片

img：包含src和alt属性，可以指定宽度和高度。

figure：结合figcaption，可以引入相关的图片说明，增加代码的可读性。

图片映射

7. 表单

action为一个url，用来接收表单提交时的信息

method为post或者get（get通常用于搜索的情况）
-

type属性：表单控件的类型

text：单行文本框。可以设置最大长度。

password：与text类似，但是字符会被隐藏。

textarea：多行文本框，可以用cols和rows来设置文本框的尺寸。与其他input元素不同，textarea不是空元素。

radio：单选，必须包含name，value属性，可以添加checked属性。并且一旦选中之后，不能取消选中，只能选择其他选项。

checkbox：多选，其他基本同radio。

select：包含2个或以上的

file：上传文件。此时method必须时post。

submit：用于提交表单。value属性用于控制显示的文字。

image：可以用图片作为提交按钮，最好结合button使用

email，time，url：提供特殊显示或输入格式验证。

search：搜索框，部分浏览器支持特殊显示，并且可以通过placeholder来增加默认显示文字。

hidden：可以用于传递不被用户所见的参数。

required：表单验证通常需要通过js来实现，不过在空间中添加required可以一定程度时完成空选提示。

label：label可以将文本和表单输入框都包含进去，也可以与表单控件分开来，通过for属性来关联所在的控件。

fieldset+legend：fieldset通常默认样式是有border的，而legend则是名字，可能使得整个表单更加清晰。

8. Flash，视频，音频

9. 其他

DOCTYPE
由于HTML存在多个版本，每个网页在开头用DOCTYPE声明来告诉浏览器使用的版本，同时可以帮助浏览器正确的渲染页面。

HTML中的注释

页面信息meta
通常包含在内部，对用户不可见，用于携带信息。最常用的特性是name和content。description，keywords，robots用于控制搜索引擎相关的搜索设置，而pragma用于防治浏览器对页面进行缓存。expire可以指定页面的国企时间，必须按照指定格式。

Information About Your Pages

iframe内联框架
在页面中内嵌另一个网页，最常用的是内嵌地图。

div，id，span
div常用语将块级元素聚合，而span可以将内联元素聚合。块级元素和内联元素的区别

	Home starter hosting	Premium business hosting
Disk space	250mb	1gb
Bandwidth	5gb per month	50gb per month
Email accounts	3	10
Server	Shared	VPS
Support	Email	Telephone and email
Setup	Free	Free
FTP accounts	1	5
	Sign up now and save 10%!

html基础

1. 页面结构

网页访问机制

基本概念

结构代码

This is the Body of the Page

2. 文本

标签

example

The Story in the Book

Chapter 1

3. 列表

Scrambled Eggs

Ingredients

Method

4. 表格

注意

example

5. 链接

用法

example

Film Folk

Festival Diary

January

February

March

April

May

June

July

August

September

October

November

December

6. 图片

7. 表单

8. Flash，视频，音频

9. 其他

你可能感兴趣的:(html基础)