html入门

head标签

title标签

        指定文档标题。

base标签

        指定当前页面基本链接。通常情况下,浏览器会从当面页面的Url中提取相应元素来填充相对url中的空白,但使用<base>后,浏览器会使用<base>标签中指定的href值与相对url拼接后组成绝对url,再进行访问。如

<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
        此时<img>链接的图片地址就是http://www.w3school.com.cn/i/eg_smile.gif。

        base中还可以指定target属性(属性值与<a>标签中的target属性值一样),此时所有的超链接处都会按该target指定的值进行操作,即使<a>标签自己也指定了target属性。上面点击W3School时,便会在一个新的界面中打开链接。

meta标签

        提供有关页面的元信息(总是以键值对的形式出现),它必须永远处于<head>标签内部。

        content属性是必须具备的,它用于指定元信息中的值。它始终和name,http-equiv一起使用。

        http-equiv:用于指定键值对中的键,浏览器会把对应的值关联到http头部。因此,如果想要使它对应的content有意义,浏览器必须支持http-equiv定义的头部名称。

        name,类似于http-equiv,但不会将值关联到http头部,并且它的值可以任意指定。

script标签

        用于定义客户端脚本。既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必须通过type指定脚本的MIME类型。如

<script type="text/javascript">
document.write("Hello World!")
</script>

        上述代码定义了js脚本。可以将type的值换成text/vbscript,就代码这个脚本是VBScript。

link标签

        用于链接外部样式表(即css文件)。只存在于head标签中。

        type:规定被链接文档的 MIME 类型。由于是用于链接外部样式表,因此一般为text/css。

      href:外部链接的路径。

      rel:当前文档与被链接文档之间的关系。其中属性值stylesheet指的是文档的外部样式表。

样式

      外部样式表:将样式抽取成一个单独的css文件,通过link标签引入到当前的文档中:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
      内部样式表:当某个文档需要单独的样式时,可以在head标签中通过style标签定义内部样式表
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
      内联样式:当某个标签需要特殊的样式时,就可以为该标签使用内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

a标签  

        超链接标签,除了可以链接到指定的网址外,还可以在当前页面实现跳转效果。首先通过name属性指定一个锚点,然后在别的a标签中通过href属性引用这个锚点名,如下,注意一定要加#

<html>
<body>
<p>
<!-指定链接到的位置->
<a href="#C4">查看 Chapter ddd4。</a>
</p>
<!-定义到链接位置->
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
        a标签中间也可以添加<img>标签,这样点击图片时就可以跳转到相应的界面。

        如果要在一个新的窗口打开超链接的界面,只需要配置target属性的值为"_blank"即可。

pre标签

        html源码中的空格和换行都会被替换成一个空格,而pre标签包裹的内容却不会出现这种情况。被包围在pre标签中的文本通常会保留空格和换行符。它的一个很常见的应用就是在页面中显示源码(如html源码,java源码等)。如

<pre>
for i = 1 to 10
     print i
next i
</pre>

img标签

        通过src属性指定图片的路径,./当前文档所在的目录,../表示上一级目录,可以多次使用。如文档在d:/html/demo文件夹下,那么./就指d:/html/demo文件夹,而../指d:/html文件夹,../../表示d:/

        可以使用align属性定义图片在文本中的位置:bottom图片文本底部对齐;top:图片文本顶部对齐;middle:图片文本居中对齐。

        通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。

   alt属性表示图片加载错误时显示的文字,title表示鼠标放上去时的提示文字。

map标签

        定义一个区域,在该区域内图像可点击。id,name两者的值经常相同,都是为map定义一个独一无二的名,通常为了兼容浏览器,需要定义id和name两个属性。在img标签中使用usemap属性将map标签与img标签关联。

        在map标签内部,通过area标签定义一个区域,它只能出现在map标签内部。shape属性规定了区域的形状,coords规定了区域的坐标(shape为rect是,坐标依次为左上,右下的x,y轴值,shape为circle时,坐标为依次为圆心的x,y轴值和半径值),href要链接到的url,alt鼠标悬停时的提示文字。如

	<img src="./bg.png" usemap="#map"/>
	<map id="map" name="map">
		<area shape="circle" coords="100,100,50" href="http://www.baidu.com/" alt="百度一下" />
	</map>
        在img标签中通过usemap引用定义的区域,在引用的id前一定要加#

table标签

        定义表格。表格的每一行通过<tr>标签定义,每一行中的每一个单元格通过<td>或<th>标签定义,其中th用于定义表头单元格,而td用于定义普通单元格。

常用属性

        border:表格的外边框的宽度

        cellpadding:每一个单元格中文字与边框的距离

        cellspacing:两个单元格之间的距离。

        frame:规定外侧边框哪个位置可见。void:都不可见;lhs:左边框可见;rhs:右边框可见;above:上边框可见;below:下边框可见;hsides:上下边框可见;vsides:左右边框可见;box:都可见。

form标签

        为用户输入创建html表单(表单为了使用户输入某些内容,并将内容传送到服务器进行处理),里面可以包含<input>,<textarea>等标签。注意:它只是创建表单,并不代表它本身能接收文件的输出,内部包含的input标签才能接收文件的输入。

<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>

input标签

type属性        

        通过属性type指定它的类型,

        text:纯文本;

        password:密码;

        file:文件,可用于上传。

        radio:单选按钮,此时name属性值相同的认为是一组,同一组中只能选一个。

        checkbox:多选。

        checked:值只有一个“checked”,指定在界面加载时预先选中。

        submit:提交按钮。value属性的值便是展示到界面上的内容。

        button:简单的按钮。value属性的值便是展示到界面上的内容。

        reset:重置按钮,value属性的值便是展示到界面上的内容。它会重置该表单(一个form内的)中的所有数据。

name与value属性

        除type="submit","button"等值外,name与value都是提交到服务器的key,value值。如<input type="radio" name="Sex1" value="2">,假设用户选择该选项,并且提交到服务器,那么服务器接收到的键值对的key值便是Sex1,value值便是2。

        在type为text时,可以通过value值设置默认值。

label标签

        在单选或者多选input时,用户必须点中相应的图标才选中,点击文字是没有效果的。而label标签就是为了解决该问题的。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上

        它的for属性的值必须与相关联的标签的id值相同。如

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
        当用户点击Female文字时,就相当于点击了第二个input标签。

        注意:label标签是可以跨表单的。也就是说,在一个form中的label的for属性值可以是另一个form中定义的id。

select标签

        下拉列表。每一个下拉选项都是通过<option>标签定义的。在提交到服务器的键值对中,key值由select标签的name属性决定,value由option标签的value属性决定。

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
        此时提交到服务器中,服务器收到的key-value分别为cars和fiat。

        可通过multiple="multiple"设置成多选 ,也可通过设置size的值指定一屏显示几个选项。

option与optgroup

        option标签定义下拉列表中的一个选项(一个条目),它位于select标签内部。属性selected="selected"规定了在首次显示时该选项处于选中状态,value值定义送往服务器的选项值。

      optgroup用于定义组合选项,它的label属性规定了该组的名称。如

  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>

iframe标签

        将另一个文档的内容包含在本文档中,相当于android的include,又称内联框架。通过src属性指定另一个文档的Url。scrolling规定是否在iframe中显示滚动条(yes,no,auto三个值);将frameborder属性置为0,可删除框架的边框。
<iframe src="http://www.baidu.com/"></iframe>

frame与frameset

        frameset标签可以定义一个框架集(即内容可以包含多个frame标签),不能与body标签同时使用。每一个框架中都可以定义独立的文档,通过src标签引入即可
        它有一个必需的属性:rows或者cols。rows指行,即定义从上往下排列的框架。cols指列,即定义从左往右排列的框架。
      rows和cols规定了每一个frame所占有的大小,可以写成固定的尺寸,也可以按比例进行分割。如
<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

        通过frameset可以实现左边列表,右边详情的界面。只需要将列表定义在一个frame中,详情定义在一个frame中。如下:

		<frameset cols="30%,*">
			<frame src="bottom_left.html"/>
			<frame src="bottom_right.html" name="bottom_right_container"/>
		</frameset>
        在点击bottom_left.html中的每一个item时,都会切换到对应的html页面中,但新出现的html界面,并不会直接展示在详情的frame中。为此,需要在bottom_left的列表项中加上 target属性,其值为详情frame的name属性值。如下:

	<a href="bottom_right.html" target="bottom_right_container">右边第一页</a>
	<a href="bottom_right2.html" target="bottom_right_container">右边第二页</a>

bdo标签

        用于改变默认的文本显示方向。用属性dir定义文字方向:ltr(left to right)和rtl(right to left)。
<bdo dir="rtl">
Here is some Hebrew text
</bdo>

del与ins标签

        del用来显示删除文本(文本中有一条中划线),ins用来显示插入文本(文本下有一条下划线)。如
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值