html

最新推荐文章于 2024-05-17 17:22:48 发布

xiongdongyang2012

最新推荐文章于 2024-05-17 17:22:48 发布

阅读量223

点赞数

分类专栏： web 文章标签： input html 浏览器 stylesheet border 服务器

本文链接：https://blog.csdn.net/xiongdongyang2012/article/details/6764977

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html(css)
1、html基础
(1)什么是html(hypertext markup language)?
制作网页的标记语言。
特点：
  a,以.html或.htm结尾来保存。
  b,由浏览器解释执行。
  c,大小写不敏感
  d,容错性好
(2)w3c推荐的网页设计标准
  数据与结构: html文件。
  外观:样式文件(css文件)。
  行为：ECMAscript文件(javascript文件)。
(3)主要的浏览器
  ie,firefox,chrome,safari,opera
(4)html文件的基本结构

  <html>
   <head>
    <title>标题</title>
    <!-- http-equiv属性，用于模拟http消息头  -->
    <!--content-type的作用，是告诉浏览器返回的内容的类型及编码，浏览器会按指定的编码去显示页面-->
    <meta http-equiv="content-type" 
    content="text/html;charset=gbk">
    <!--refresh:刷新-->
    <meta http-equiv="refresh" 
    content="3">
    <!--link 引入外部的样式文件-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--script 引入外部的脚本文件-->
    <script type="text/javascript" src="myjs.js" >
    </script>
   </head>
   <body>
   </body>
  </html>

2、主要标记
(1)链接
a,基本用法

<a href="html02.html" target="">clickMe</a>

  href:指定点击链接之后，跳转的地址。
  target:
    "_self":在当前窗口中打开。
    "_blank":在新的窗口中打开。
  b,使用图形作为链接

<a href="">
   <img src="" width="" height="" border=""/>
</a>

  其中，img标记，src指定图片的地址（地址不一定
  是一张图片，可能是一个程序的地址，由程序来
  生成相应的图片）。
  c,使用热点(使用图形的某个区域作为链接)
  step1 使用map标记定义热点

<map name="Map">
    <area shape="rect" 
    coords="407,20,560,77" href="qy.html">
    <area shape="rect" coords="580,22,734,76" 
    href="gr.html">
</map>

step2 在图形标记当中，使用热点来划分区域。

 <img src="index04.jpg" width="772" height="357" border="0" usemap="#Map">

d,使用锚点(在页面内部跳转)
step1 定义一个锚点

  <a name="top">top info...</a>

step2 使用锚点来跳转

  <a href="#top">to top</a>

e,发送邮件

  <a href="mailto:haha@126.com?subject=hello">给我发邮件</a>

f,链接的伪样式
(2)表格
a,基本用法

  <table border="1" width="60%或者300"
  cellpadding="0" cellspacing="0">
   <tr>
    <td></td>
   </tr>
  </table>

  cellpadding:单元格内部的数据与单元格之间的空隙。
  cellspacing:单元格之间的空隙。
  b,居中
   水平居中: align(left,right,center)
   垂直居中:valign(top,middle,bottom)
  c,单元格的合并
   colspan:水平方向合并
   rowspan：垂直方向合并
  d,表格可以嵌套
   td的内容又是一个表格
  e,表格的完整结构

  <table>
   <caption>标题</caption>
   <thead></thead>
   <tbody></tbody>
   <tfoot></tfoot>
  </table>

  thead,tfoot:出现0/1次。
  tbody:出现1次或多次
  习惯上先写thead,然后是tfoot,最后是tbody。
(3)表单
  a,什么表单
  用于收集用户的数据，并提交给服务器来处理。
  b,表单属性

  <form action="" method="">
  </form>

  action:服务器端的一个程序的地址，
  用于处理表单数据。
  method:表单提交的方式。
  c,常见表单元素
   input标记:
   1)文本输入框:

<input type="text" name="" value=""/>

   其中name决定了浏览器是否将文本输入的内容提交
   给服务器。value设置缺省值。
   2)提交按钮:

   <input type="submit" value="确认"/>

3)重置按钮:

   <input type="reset" value="清空"/>

4)密码输入框:

   <input type="password" name="pwd"/>

5)单选框:

   <input type="radio" name="gendar" value="m"
   checked="checked"/>

其中，checked设置缺省值。
6)多选框:

   <input type="checkbox" name="interest" 
   value="fishing" checked="checked"/>

7)上传文件:

   <input type="file" name="file1"/>

8)隐藏域:

   <input type="hidden" name="userId" value="1"/>

非input标记
1)多行文本输入框:

   <textarea name="desc" rows="5" cols="20"></textarea>

2)下拉列表

   <select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="wh">武汉</option>
   </select>

可以给select添加一个"multiple=multiple",
此时，下拉列表可以当作多选框去用。
(4)列表

<!--无序列表-->
  <ul>
   <li>item1</li>
   <li>item2</li>
  </ul>
  <!--有序列表-->
  <ol>
   <li>item1</li>
   <li>item2</li>
  </ol>
  <!--列表可以嵌套-->
  <ul>
   <li>menu1</li>
   <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
   </ul>
  </ul>

(5)框架
  将一个窗口划分成多个子窗口。
  iframe:
   可以与body同时出现。
   作用是，将一个窗口嵌套到父窗口当中。
  frameset:
   不能够与body同时出现。
   frameset可以嵌套。
  案例：

<html>
	<head>
		<title>
		表单示例
		</title>
		<meta http-equiv="content-type" content="text/html;charset=gbk">
	</head>
	<body bgColor="#ffffcc" Text="#000099" ">
		<form action="">
		<B><h2 align="left">证券调查示例</h2></B>
		<p><b>投资经验</b></p>
			<input type="radio" name="result_radiobutton-3" value="radio-0">新手
			<input type="radio" name="result_radiobutton-3" value="radio-1">中级
			<input type="radio" name="result_radiobutton-3" value="radio-2">专家
		<p><b>你购买股票的方式</b></p>
			<input type="checkbox" name="result_checkbox-3" value="checkbox-0">股票
			<input type="checkbox" name="result_checkbox-3" value="checkbox-1">期权
			<input type="checkbox" name="result_checkbox-3" value="checkbox-2">互惠基金
		<p>
			你购买股票的方式为？
			<select name="stock">
				<option value="online transaction ">网上交易</option>
				<option value="phone transaction ">电话交易</option>
				<option value="broker">经纪人代表</option>
				<option value="else">其他</option>
			</select>
		</p>
		<p>
		今年选择什么证券？<input type="text" name="" value=""/>
		</p>
		<p>
		有对其他投资者的建议吗？
		<textarea name="desc" rows="2" cols="20"></textarea>
		</p>
		<p>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/>
		</p>
		</form>
	</body>
</html>

xiongdongyang2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html

html(css)1、html基础 (1)什么是html(hypertext markup language)? 制作网页的标记语言。特点： a,以.html或.htm结尾来保存。 b,由浏览器解释执行。 c,大小写不敏感 d,容错性好
复制链接

扫一扫

专栏目录