HTML代码示例.docx

1、HTML代码示例HTML代码示例目录HTML代码示例 1目录 1HTML文本格式示例 3一个非常简单的HTML文件 3HTML简单段落 3在HTML写多个段落 4在HTML里如何换行 5HTML正文标题 5HTML居中显示的标题 6在HTML文件里加一条横线(horizontal rule) 6HTML文件的代码注释 7HTML常用格式Tag 8HTML预格式文本(preformatted text) 9HTML不同计算机输出的Tag 10HTML里加入地址 11HTML里表示删除插入的Tag 11HTML超链接示例 12如何创建HTML超链接(hyperlinks) 12将图片作为一个超链接

2、 13在HTML文件里跳转 13在新窗口打开一个链接 16链接到一个邮箱地址 17HTML表格(Table)示例 18HTML简单表格 18没有边界的表格 20有边界的表格 21HTML表格的表头 23表格空单元格 25带标题的表格 27包含多行或多列的表格单元格 28一个表格单元格里的内容 29表格的单元格内容和单元格边界之间的距离(CellPadding) 31表格中单元格之间的距离(Cellspacing) 33给表格加背景颜色或者背景图片 35表格单元格对齐方式(align) 36表格的单元格背景颜色和背景图片 38HTML框架(Frame)示例 39列分的框架(Frame, cols

3、) 39行分的框架(Frame, rows) 39既有行分又有列分的框架(Frame, rows, cols) 40用框架(Frame)导航 40使用内嵌框架(IFrame) 41如何固定框架(Frame)大小 41HTML列表(List)示例 42不排序列表(Unordered List) 42排序列表(ordered list) 42不排序列表的类型(Type)设置 43嵌套的列表(nested list) 44定义列表(definition list) 45HTML不同类型(Type)的排序列表 46HTML表单(Form)示例 48HTML表单控件-单行文本输入框 48HTML表单控件

4、-密码输入框 48HTML表单控件-复选框(checkbox) 49HTML表单控件-复选框(checkbox)缺省已选(checked) 50HTML表单控件-单选框(radio) 50HTML表单控件-单选框(radio)缺省已选(checked) 51HTML表单控件(Form Control)-下拉框(select)单选 52HTML表单控件-下拉框(select)多选(multiple) 52HTML表单控件-下拉框多选-下拉框设置(size) 53HTML表单控件-多行输入框(textarea) 54HTML表单控件-图片提交(input type=image) 55HTML图片(

5、Image)示例 55在HTML里插入图片 55HTML里图片的对齐方式(Align) 56HTML的图片大小(Height,Width) 56HTML图片的说明(Alt属性) 57HTML字体(font)示例 57HTML字体大小(font size) 57HTML字体颜色(font color) 58HTML字体风格(font face) 58HTML网页背景颜色和背景图片示例 59HTML背景颜色 59HTML里加背景图片 59HTML头部信息(Head)示例 60利用Meta的Refresh自动跳转到指定页面 60HTML文本格式示例一个非常简单的HTML文件这是一个非常简单的HTML

6、。HTML简单段落这是第一段。这是第二段。这是第三段。在HTML里，用p来定义段落。在HTML写多个段落这一段在源代码里包含很多分行，但是浏览器忽略这些分行。这一段在浏览器里包含很多空格，但是浏览器忽略多余空格。你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。在HTML里如何换行要在一段里换行请使用br这个Tag。HTML正文标题这是1号标题这是2号标题这是3号标题这是4号标题这是5号标题这是6号标题HTML居中显示的标题这是标题上面的标题是居中显示的。在HTML文件里加一条横线(horizontal rule)用hr这个Tag可以在HTML文件里加

7、一条横线。村妇想像皇宫的生活：皇后得用金扁担挑水吧。问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！HTML文件的代码注释代码注释是不会显示在网页里的。HTML常用格式Tag粗体用b表示。斜体用i表示。芙蓉姐姐这个词当中划线表示删除。想唱就唱这个词下划线插入。X2其中的2是下标X2其中的2是上标好好学习，天天向上。这句话缩进表示引用这是预设(preformatted)文本.在pre这个tag里的文本 保留空格和分行。call getOrders用code显示计算机代码，code

8、里显示的字符是等宽字符。HTML预格式文本(preformatted text)这是预格式(preformatted)文本浏览器会保留pre里面的空格和分行。pre用来表示计算机代码，效果很好。看如下代码显示：for i = 1 to 10print inext iHTML不同计算机输出的Tag计算机代码 Computer code键盘键入 Keyboard input电报文本 Teletype text示例文本 Sample text计算机变量 Computer variable注:以上这些Tag都可以用来显示计算机程序代码。HTML里加入地址上海站长网 站长学院路1000号站长网 站长学院

9、大楼101室邮编:200000HTML里表示删除插入的Tag我要删除插入文字。还可以使用strike表示删除，效果和del一样。但是HTML国际标准推荐使用del，不再建议使用strike。HTML超链接示例如何创建HTML超链接(hyperlinks)这是一个链接站长网 站长学院站点链接将图片作为一个超链接你可以将一张图片作为一个链接，点击这个图片。在HTML文件里跳转参见第六章第1章这是站长网 站长学院 网页教程与代码的中文站点。第2章这是站长网 站长学院 网页教程与代码的中文站点。第3章这是站长网 站长学院 网页教程与代码的中文站点。第4章这是站长网 站长学院 网页教程与代码的中文站点。

10、第5章这是站长网 站长学院 网页教程与代码的中文站点。第6章这是站长网 站长学院 网页教程与代码的中文站点。第7章这是站长网 站长学院 网页教程与代码的中文站点。第8章这是站长网 站长学院 网页教程与代码的中文站点。第9章这是站长网 站长学院 网页教程与代码的中文站点。第10章这是站长网 站长学院 网页教程与代码的中文站点。第11章这是站长网 站长学院 网页教程与代码的中文站点。第12章这是站长网 站长学院 网页教程与代码的中文站点。第13章这是站长网 站长学院 网页教程与代码的中文站点。第14章这是站长网 站长学院 网页教程与代码的中文站点。第15章这是站长网 站长学院 网页教程与代码的中文

11、站点。第16章这是站长网 站长学院 网页教程与代码的中文站点。第17章这是站长网 站长学院 网页教程与代码的中文站点。在新窗口打开一个链接一则笑话如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。链接到一个邮箱地址这是一个最简单的邮箱地址的链接：给新浪网站发信这个邮箱地址的链接写了subject内容：给新浪网站发信这个邮箱地址链接写了to, cc, bcc, subject, body的内容：写信给新浪注:空格请用%20表示。HTML表格(Table)示例HTML简单表格表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开

12、始要用td。只有一行(Row)一列(Column)的表格100一行三列的表格100200300两行三列的表格100200300400500600没有边界的表格缺省情况下，表格没有边界。100200300400500600表格Border设为0，也不显示边界：100200300400500600有边界的表格表格的边界值设为1：第一行第二行表格的边界值设为8，边界更粗：第一行第二行表格的边界值设为15，边界更粗：第一行第二行HTML表格的表头有表头的表格：姓名电话传真Bill Gates555 77 854555 77 855竖直方向的表头：姓名Bill Gates电话555 77 854传真55

13、5 77 855表格空单元格Some textSome textSome text上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。Some textSome text Some text上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。带标题的表格这个表格有标题：表格标题100200300400500600包含多行或多列的表格单元格用colpsan属性，设置包含多列的单元格：姓名联系方式Bill Gates555 77 854555 77 855用rowspan这个属性，设置包含多行的单元格：姓名Bill Gates联系方式555 77 854555 77 855一个表格单元格里的内容这是一段这是另外一段。这个单元格里包含了一个表格：ABCD这个单元格里包含了一个图片：HELLO表格的单元格内容和单元格边界之间的距离(CellPadding)没有cellpadding的表格：FirstRowSecondRow设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。以下是设置了cellpadding属性的表格：第一行第二