HTML实战详解
1. 互联网的基本概念
- internet： 中文译为因特网，又叫做国际互联网，是世界上最大的计算机网络。
- www(World Wide Web)： 叫做环球信息网或万维网，提供信息浏览服务。
它由两部分组成：服务端Server（网页的提供者）和客户端Client（网页的接受者）。 - HyperText： 即“超文本”，就是具有超链接功能的文件。
- Http(HyperText Transfer Protocol)： 即“超文本传输协议”，就是计算机通信标准。
另外还有：ftp 文件传输协议；file 本地文件传输协议； telnet 远程登录服务协议。 - URL(Uniform Resource Locator)： “统一资源定位器”，用于指定要取得Internet上资源的位置与方式。
www.baidu.com就是一个URL地址
2. 网页设计的基本概念
-
基本概念
- 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。
- 网页（英文：Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。
- 网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序。网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是万维网中的一“页”，通常是HTML格式（文件扩展名为.html或.htm）。
- 网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。
-
超文本标记语言不是编程语言，是一种描述性的标记语言 。
-
网页的分类
- 静态网页：在不维护的情况下，这个网页无论在何时何地都可以被浏览，都将显示相同的内容和画面。对用户来说，只能观看，不能和网页进行交流。由html和css编写。
- 动态网页：是指网页可以实时的发生变化，网站根据用户提交的信息响应用户的要求， 可以根据用户的操作而发生相应的变化，虽然存在着一定的交换，但是功能有限。另一方面，网站也可以自动收集用户的浏览信息，从而自动的为用户提供更好的服务，如欢迎信息显示等。这是由其他语言配合html和css完成的。
3. HTML
- HTML的概念
全称为HyperText Mackeup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体颜色，大小等。 - 基本格式
<html>
<head><title></title></head>
<body></body>
</html>
通过观察格式，发现html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
注意：
- html就是超文本标记语言的简写，是最基础的网页语言。
- html是通过标签来定义的语言，代码都是由标签所组成。
- html代码不用区分大小写。
对格式的解释：
- html：放在html文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的html标记时也一样会进行解析，浏览器内置了html语言的解析器.。
- head：头标记，放置关于此html文件的信息，如提供索引，定义css等。
- title：标题标记，包含在head标记内，它的作用是设定网页的标题。 4. body：主体标记，网页所需要显示的内容都放在这个标记内。
书写规范
- 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
- 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
- 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号，或公司规定的书写规范。
4. 常见的HTML标签
- 注释标签：<!-- -->
内部的代码不被浏览器解析，但是在网页源代码中可以看到被注释的内容。 - 标题标签：<hx>
hx的取值是从h1-h6。字体从大到小，字体加粗，自动换行 - 文字粗体标签：<b>
- 文字斜体标签：<i>
- 下划线标签：<u>
- 换行标签：<br>
换行标签是单个使用的标记 - 段落标签：<p>
段落标签除换行外，还会增加一行空白 - 空格标签：
5. 字体标签
作为一个页面来说，最常见的元素是：文字和图片。文字：默认是从左到右,从上到下显示。
- font： 字体标签
我们的标签除了告诉你，在标签对里面是什么，还可以通过给标签添加属性来控制内容的显示。
使用的格式是：<标签名 属性1=“属性值1” 属性2=“属性值2” 属性3=“属性值3” …>内容</标签名>
注意： 属性值可以是""，也可以是’’，也可以不写引号。但是，推荐使用""。 - 属性：
- color： 颜色
- size： 大小，值得取值范围是1-7
- face： 字体标签 可以同时指定多个字体，如果都没有满足的，就采用默认字体。
- <hr>： 水平分割线
- 颜色的组成： 三原色 rgb
每一种基本颜色的范围是从0-255。
为了表示数据的方便，就采用十六进制表示数据。范围是：00-ff
所以，颜色的表示就是:#rrggbb
红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
黑色：#000000
白色：#ffffff
6. 列表标签
- 文字列表标签：
-
ol：有序列表
- 属性：
- start 从?开始,默认是1。
- type 类型。A,a,I,i,1 默认是数字1
- 子标签：li
- 属性：
-
ul：无序列表
- 属性：
- type 空心圆circle 、实心圆disc 、实心方块square ，默认disc
- 子标签：li
- 属性：
-
7. 图片标签
- 图片标签：img
- 属性：
- src：图片的位置
- height：高度
- width：宽度
- alt：当图片不存在的时候，给出的提示
- title：真的图片你把鼠标至于上面给出的提示信息
8. 超链接标签
- 超链接标签：a
- 属性：
- href：提示我们链接的地址
- target：打开方式 _blank 在一个新的页面打开
地址栏：D:\20130720\day29\code\test\www.baidu.com - 注意：如果做超链接操作的时候，你没有给出href这个属性的时候，你采用的是什么类型的协议？
答：默认采用的是文件解析协议。当需要使用网址的时候，需要自己加上http协议。
- 属性：
- 锚链接： 定义一个锚点，然后在和超链接结合使用，使用a标签定义锚点。
- 定义锚点：<a name=“锚点名”> </a>
- 使用锚点：<a href="#锚点名">返回xxx</a>
9. 表格标签
-
表格标签：table
- 属性：
- border：表格的边框，默认是0。
- width：表格的宽度，既可以给像素,还可以给百分比。
- height：表格的高度。
- align：水平位置 left, center, right。
- 子标签：
- caption：表格的标题
- tr：表格的行标签
- 属性：
- 子标签：
- th：标题列标签 加粗并居中
- td：每一行的列标签，单元格，默认是居左
- 属性：
-
表格边框的设置
- border：表格的外边框粗细
- cellspacing：表格的内边框粗细，单元格直接的间距
- cellpadding：设置文字到单元格的距离
-
表格相关颜色的设置
- bordercolor：边框颜色
- bgcolor：背景色
-
表格内容的位置设置
- align：文字的水平位置 left,center,right
- valign：文字的垂直位置 top,middle,bottom
-
表格中单元格的合并
- colspan：列合并
- rowspan：行合并
10. 表单标签
- 表单标签：form
-
属性：
- action:表单提交的目的地，默认是当前页。html,jsp,servlet,.do,.action
- method:提交方式 post,get，推荐使用post。
-
子标签：input
-
属性：
- type 表单元素的类型，默认的是文本框类型。
- type=“text” 表示这是一个文本框。
- name=“username” 将来用于服务器取值使用 。
- id=“username” 将来用于js获取值使用。
- size=“40” 用于控制文本框的长度，能存储的字符的个数。
- value=“请在这里输入用户名” 是文本框的默认值，一般用于提示。
- readonly=“readonly” 是标记属性，告诉文本框我是只读的。本身没有值，但是为了符合新的规范，属性必须有值，所以，我们就把它的值和属性设置为一样的。可以通过表单提交获得到值。
- disabled=”disabled” 把当前文本框变成灰色，不能修改只能看，不能通过表单来获得到值的。
-
隐藏域：
- type=”hidden”, 要设置name和value。
-
密码框：
- type=“password” 表示这是一个密码框。
- name=“password” 将来用于服务器取值使用 。
- id=“password” 将来用于js获取值使用。
- size=“40” 用于控制密码框的长度。
- value=“admin” 默认密码。
- readonly=“readonly” 是标记属性。
-
单选框：
- type=“radio” 表示这是一个单选框。
- name=“sex” 将来用于服务器取值使用。
- 注意：如果多个单选按钮时互斥关系，那么，就必须把这多个按钮看做一个按钮组。一个按钮组的名字必须是一致的。
- id=“man” 将来用于js获取值使用。
- value=“男” 将来服务器真正获取到的值。
- checked=“checked” 是标记属性。
-
复选框：
- type=“checkbox” 表示这是一个复选框。
- name=“likes” 将来用于服务器取值使用。
- 注意：这里的name如果不一样，那么，有多少个复选框，将来服务器就要获取多少次值。然后判断值是否是null,不是null才把值给存储起来。如果这里的name值一样，在服务器只需要获取一次即可，这次获取的返回值是一个字符串数组，把所有选中的都直接包含了。
String getValue(String name) //根据名字获取单个值。
String[] getValues(String name) //根据名字获取数组。 - id=“sleep” 将来用于js获取值使用。
- value=“睡觉” 将来服务器真正获取到的值。
- checked=“checked” 是标记属性。
-
文件框：
- type=“file” 表示这是一个文件框。
- name=“file” 将来用于服务器取值使用。
- id=“file” 将来用于js获取值使用。
-
按钮：
- type=“button” 表示这是一个按钮。
- type=“submit” 表示这是一个提交按钮，内置了js事件 。
- type=“reset” 表示这是一个重置按钮，内置了js事件。
- 注意：下拉框和文本域不是input的type属性能够决定的。
-
-
select 标签
- name=“province” 将来用于服务器取值使用 。
- id=“province” 将来用于js获取值使用。
- 子标签：option 标签
- value=“湖北省” 服务器实际获取的值。
- selected=“selected” 默认选中项。
- multiple：把select标签展开，可以多选。
- size=“6”：设置select展开的行数。
-
textarea 标签
- cols=“40” 列数。
- rows=“10” 行数。
- name=“myself” 将来用于服务器取值使用 。
- id=“myself” 将来用于js获取值使用。
- 不具有value的属性，值写在元素中间。
-
11. 框架集标签
body和框架集标签不同时使用。
- 框架集标签：frameset
- 属性：
- rows：行分割。
- cols：列分割。
- 子标签：frame。
- 属性 ：
- src：指定要嵌入的页面。
- noresize=“noresize”：可以阻止border拖拽。
- name：用于指定展示的内容所在的frame。
- 属性 ：
- 属性：
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
