html基础学习

html的主体结构


代码分为三部分

<html>

<head></head>

<body></body>

</html>


一    <head>中可以放置的标签

1.<title></title>只能有一个,定义网页标题,显示在浏览器的标题栏

          <title>csdn博客</title>

2.<base/>  只能有一个,是基底网址标记,用于设定浏览器中文件的绝对路径,网页中的文件只需要写相对路径即可

          <base href="C:/Users/fortune/Desktop/学习/"/>

3.<meat>  可以有多个,有  <meta http-equiv=""  Content="">  或 <meta name=""  Content="">  两种形式

          

3.1<meta http-equiv=""  Content="">

http-equiv  :用于在html文档中模拟http协议的响应消息头,例如告诉浏览器使用什么样的字符集显示网页内容

属性有: 

Content-Type          字符集类型

Refresh                   刷新

 Expires                  用于设定网页的过期时间,一旦过期就必须从服务器上重新加载

Windos-Target    

Pragma   

Page-Entenr        设定计入和离开页面是的特殊效果

应用

<Meta  http-equiv="Content-Type" Content="text/html;charset=utf-8">  //设置字符集 为 utf-8

<Meta  http-equiv=“Refresh” Content="5">


3.2 <Meta name=""   Content="">
name:用于在网页中加入一些关于网页的描述信息,网页的关键字,网页描述信息
属性有:
keywords                      网页的关键字
description                   网页的描述
robots                           是否允许搜索引擎、是否运行在当前网页访问其它网页的链接    (index/noindex      follow/nofollow    all/none)
author                           作者
copyright       版本

4.<link>可以有多个,用于设置外部文件的链接,用于确定 本页面和其它文档之间的关系

          <link  ref="stylesheet" type="text/css" href="test.css">


5.<style>

6.<script>


二.<body>中放置所以网页显示的内容,包括的属性如下:

Text

Bgcolor

Background

Link

Alink            设置活动链接的状态(当链接被点击时,该链接就处于活动状态

Vlink            设置访问过的链接

topmargin    设置到顶端的距离,指的是容器和容器之间的距离

leftmargin    

id

name

class

style

其中  id、那么、class、style 是通用属性,即所有的元素都可以使用,其余的则为 body自己使用的属性,但这些属性都可以通过css来实现


三.html常用标签

<br>    换行

<p>   段落(即换行后再插入空行)

<center>  居中

<pre>  保留文字在源代码中的格式

<ul><li>   无序列表

<ol><li>   有序列表

<hr> 水平分隔线


四.文本标签

<h1><h2>....  标题

<b>   粗体

<i>    斜体

<u>  下划线

<sub>下浮内容

<sup>上浮内容

<font>    字体

<tt>      打印机的字体

<cite>    输出引证举例的斜体字

<em>     输出强调的斜体字

<strong>  输出强调的粗体字

<small>  输出小型字体

<big>  输出大型字体


五.超链接标签

<a href="URL">XX</a>  URL 可以是绝对路径或相对路径

设定打开链接窗口的方式

<a href="URL"  target="_self/_blank/_parent/_top">


六.设定锚点

<a href="#锚点名称">XX</a>

例如:点选“第一段”则显示 “adfajks”

<a  name="#one">第一段</a>

<a  name="#one">第二段</a>


<a name="one">adfajks</a>


七.图像超链接<img>

<img>属性有

src  图片位置

border   边框

alt      a. mouseover时有黄色小图标  b.若图像不存在,则出现它指定的文字  c.搜索引擎可以通过此文字来搜索

width   宽度

heiht   高度

应用:用图片做链接

<a  href="http://www.baidu.com"><img src="c:\\img\\logo.jpg"></a>


八.图像地图

把一张图片分为多个区域,然后在每个区域设定链接,在<img>中使用 usermap 属性来使用热点


<map> 定义热点区域

<area>指定每个人多区域  ,area 中的属性有  shape(指定形状)、coords(指定形状的位置确定形状)、href(指定链接的位置)


应用:

<img  src="logo.jpg" usemap="#mymap" border="0"/>

<map  name="mymap">

<area  shape="rect/circle/poly" coords="x,y,x,y/  x,y,r,/ x,y,x,y,...x,y"  href="http://www.baidu.com" target="_blank">

</map>


九. 表格标签

<table>

<caption><h1>我的表格</h1></caption>

<tr>

<th>学号</th>

<th>姓名</th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

..

</tr>

</table>


1.table的 属性有:

align:left  right  center

border

width

height

cellspacing:格子与格子之间的距离

cellpadding:格子和边框直接的距离

应用:

<table   border=1  width=100  align="center" cellspacing="0"  cellpadding="0" bgcolor="red" bordercolor="greent" bordercolorlight="" bodercolordark="">

<caption><h1>我的表格</h1></caption>


2.定义标题<caption>  :  要放在<tr>标签之前,放在table 的内部使用,有属性 align(水平对齐)  valign(垂直对齐)

定义字段<th> : 用来定义列名,和<td>的用法一致,文字是以粗体居中显示


3. 定义跨行、跨列

使用td的属性  colspan、rowspan

<td  colspan="3">

<td  rowspan="3">

<td  colspan="3"  rowspan="3">


4.表格之间可以互相嵌套,table也可以设定 head  body

<thead></thead>

<tbody></tbody>



十.窗口分帧技术

1.<frameset >标签, 可以嵌套使用  ,不能和body标签及内容体共存

 属性:rows 、cols(值可以使用固定值、百分比 或*)、border、frameborder

应用:设定一个3行3列的

<frameset rows="20,30,50"  cols="100,100,100">

<frame>

<frame>

..

<frame>

</frameset>



2.<frame>的属性

src  指定URL

name  指定名称,当链接需要显示此frame时,可通过  target="名称"来指定显示在的frame


nosize  边框尺寸不可调整

scrolling   是否出现滚动条

<frame src="www.baidu.com" name="left"></frame>

<a href="logo.jpg" target="left">点击链接打开left frame</a>


3.<iframe>可以在body共存,不在 frameset中  

案例待补充



十一.表单标签<form>

属性有:

action    用来设置接受和处理浏览器

method  post(隐藏信息)  get(不隐藏信息)

target

title

enctype



表单字段<input>的属性

size  文本框长度

maxlength  文本框运行输入的最大长度

readonly

value  文本框显示内容

type      submit/reset/button/text/password/img/checkbox/radio/hidden/file/select/textarea/label


应用:

<input type="checkbox" checked  name="我是被选中的">

<input  type="button" value="提交"  οnclick="js调用">

<input  type ="radio" checked  name="sex">男

<input  type="radio" name="sex">女

<select   name="选择水果" size="5" multiple>//只显示5个 其余滚动条显示,可多选  

<option>--请选择</option>

<option value="1">苹果</option>

<option selected>香蕉</option>

</select>

<input  type="file" name="picture">



























评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值