HTML -- 入门篇

1. HTML: HyperText Marked Language 超文本标记语言

html文件用.htm 或者.html 后缀,可以用纯文本编辑

html标签:起始标签和结束标签  <html>   </html>

html元素:包括标签+内容

标签属性:<body bgcolor=" black "></body>

html 颜色:RGB格式的数字;16中英文颜色名;十六进制符号0到255,用#打头

html注释:<!--   I am comments   -->

代码格式:Tab键缩进

字符实体:&nbsp  空格 ; &times乘号 ; &divide 除号

2. 主体结构

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>


3. head 头部

title元素:定义标题,显示浏览器标题栏 <title>百度首页</title>

<base>元素:将相对的URL转换为绝对的URL  <base href="url"  target="window_name"/>

meta元素: 定义文件信息的名称内容<meta name="keywords"   content="PHP论坛, PHP手册" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link>元素:创建到css的样式表  <link rel="stylesheet"  type="text/css"  href="style/index.css"  />

script元素:创建到js脚本的连接  <script src="js/index.js"  type="text/javascript">  </script>


4. 4个通用的html标签属性

id:标签唯一id

name:名称

class:标签样式的类选择器

stype:设定标签样式,内联,优先级高


5. 格式标签

<br/> :换行

<hr/> :水平分割线

<p></p>:段落

<center></center>:居中对齐,文字相对于上一层标记居中

<pre></pre> :预格式化标记,保留文字的源代码中的格式

<ol>有序列表    ul无序列表   li列表项目


6. 插入图片:

<img src="url"  alt="text"  width="num"  height="num" border="num"  />

alt: 如果图片未下载完整则鼠标放在上面出现该文字;如果图像未被下载,则显示该文字;搜索引擎可以通过这个属性的文字抓取改图片

width和height如果使用一个,会等比例缩放

border:指定图像的边界宽度,单位像素

7. 建立锚点

<a name="anchor_one" >

<a href="#anchor_one">链接到本页面锚点</a>

<a href="link.html#anchor_one">链接到其他页面锚点</a>


<a href="http://www.baidu.com"  target="_blank">百度</a>

target四个属性值:

_self:当前窗口打开,默认

_blank:开启一个新的窗口

_parent: 父级窗口打开文件,用于框架页面

_top: 顶层窗口中打开文件,框架页面


8. 表格

<table>

<caption>表格名称</caption>

<tr>

<th>表头单元格</th>

<th>表头单元格</th>

</tr>


<tr>

<td>单元格</td>

<td>单元格</td>

</tr>

</table>

table标签的属性:

align:left默认   center   right

    border:表格外边线的宽度  像素

width:表格宽度,像素或者百分比

height:表格高度,像素或者百分比

cellspacing:表格单元格之间的间距 像素  默认值2

cellpadding:单元格与边框之间的距离  像素


表格列标签常用属性:

width/height:绝对值或者百分比

avalign:单元格内字画等的水平摆放 left  center  right

valign:单元格内字画等的居中摆放 top  middle  bottom

rowspan:跨越的行数目

colspan:跨越列数目


   

9. 表单

<form name=""  action=""  method="post"  enctype=""  target=""></form>

name:表单名称

action:后台处理程序的绝对或者相对url

enctype:表单资料的编码方式,

target:属性和链接中的同名属性累死,指定目标窗口

文本密码:

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

<input type="password" name="" value=""  size=""   maxlength=""  />

size:控件宽度,该文本输入框所能显示的最大字符数

maxlength:  文本输入框允许用户输入的最大字符数

提交、重置、按钮:

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

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

<input type="button" name=""  value=""  />常和js脚本一起使用

单选和复选:

<input type="radio" name=""  value="" checked>  //同组中的name必须相同    单选

<input type="checkbox" name=""  value=""  checked>    //复选  


隐藏域:

<input type="hidden" name=""  value=""  >

多行文本:

<textarea  name=""   rows=""   cols=""   value="" ></textarea>


下拉菜单:

<select name=""  size=""  multiple>

<option value=""   selected></option>

<option value=""  ></option>

</select>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值