HTML整理

HTML:Hyper text markup language[超文本标记语言]

HTML结构标准

< ! doctype html>    声明文档类型

<html>                  根标签

<head>                 头标签

<title></title>        标题标签

</head>

<body>                 主体标签

</body> 

</html>

标签的使用

单标签

注释标签    ctrl+/

换行标签     <br />

水平线标签    <hr />

图片标签    <img ...>

--------------------------------------------------------------------------------------------------------------------------------------------

Src    图片的来源   必写属性

Alt    替换文本    图片不显示的时候显示的文字

Title   提示文本    鼠标放到图片上显示的文字

Width  图片宽度

Height  图片高度

图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

--------------------------------------------------------------------------------------------------------------------------------------------

音乐标签    <embed src=""  hidden="true"/>【src 设置音乐路径    hidden  隐藏播放按钮    true 隐藏  false  显示】

关键字    <meta name="keywords" content="...">

网页描述    <meta name="description" content="...">

网页重定向    <meta http-equiv="refresh" content="5;http://www.baidu.com">

连接外部样式表    <link rel="stylesheet" href="...">

icon图标    <link rel="icon" href="**.icon">



双标签

段落标签    <p>文本内容</p>【特点:上下自动生成空白行。<br>换行不会生成空白行。

标题标签    h1-h6  取值到h6【h1 在一个页面里只能出现一次。

文本标签    <font>文本内容</font>

文本格式化标签

文本加粗标签  <strong></strong>  <b></b>  【工作里尽量使用strong】

文本倾斜标签    <em></em>     <i></i>     【工作里尽量使用em】

删除线标签    <del></del>     <s></s>   【工作里尽量使用del】

下划线标签    <ins></ins>   <u></u>    【工作里尽量ins】

超链接标签    <a href=""></a>

----------------------------------------------------------------------

href   去往的路径(跳转的页面)必写属性

title    提示文本   鼠标放到链接上显示的文字

target=”_self”    默认值    在自身页面打开(关闭自身页面,打开链接页面)  

Target=”_blank”    打开新页面 (自身页面不关闭,打开一个新的链接页面)

----------------------------------------------------------------------

锚链接

----------------------------------------------------------------------

1.先定义一个锚点    <p id="sd">...</p>

2.超链接到锚点    <a href="#sd">...</a>

----------------------------------------------------------------------

空链 <a href="#">

超链接优化写法    <base target="_blank">   让所有的超链接都在新窗口打开

特殊字符表示


列表

无序列表<ul><li></li></ul>

type=”square”      小方块

Type=”disc”       实心小圆圈

Type=”circle”      空心小圆圈

有序列表<ol><li></li><ol>

type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3”  决定了开始的位置。

自定义列表

<dl>

 <dt></dt>    小标题

 <dd></dd>   解释标题

 <dd></dd>   解释标题

</dl>

滚动效果(基本没用过)

<marquee>...</marquee>

中间内容可以为文字、图片,也可以是由程序生成的文字或图片

属性:height设置高度    width设置宽度    bgcolor设置背景颜色    

behavior设定滚动的方式    alternate:表示在两端之间来回滚动    scroll:表示由一端滚动到另一端,会重复    slide:表示由一端滚动到另一端不会重复

direction设置滚动的方向    down:向下滚动    left:向左滚动    right:向右    up:向上

loop设置滚动次数    -1  一直滚动

编码格式

Charset   编码

Ascll

Ansi

Unicode   

Gbk 

Gb2312

Big5

Utf-8   通用字符集

表格

<table>       表格

<tr>            

<td></td>    

<td></td>

<td></td>

</tr>

</table>

属性:

Border=”1”   边框

Width=”500”  宽度

Height=”300” 高

cellspacing=”2”    单元格与单元格的距离

cellpadding=”2”    内容距边框的距离

align=”left  | right  |  center” 

如果直接给表格用align=”center”  表格居中

如果给tr或者td使用  ,tr或者td内容居中。

bgcolor=”red”    背景颜色。

表格的标准结构

<table>

<thead>

<tr>

<td></td>

<td></td>

</tr>

</thead>

<tbody>

<tr>       

<td></td>

<td></td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td></td>

</tr>

</tfoot>

</table>

表头 <caption></caption>

单元格合并

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

<th></th>标题的文字自动加粗水平居中对其

边框颜色    bordercolor="..."

内容垂直对齐方式    valign=”top   | middle   |  bottom”

表单

<form action="" method="">

表单分组

<fieldset><legend>分组信息</legend> </fieldset>

<fieldset></fieldset>    对表单信息分组

<legend></legend>       表单信息分组名称

文本输入框    <input type="text">

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态(不能编辑)

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="..."     将输入框的内容传给处理文件

密码输入框    <input type="password" name="pwd">

单选框    <input type="radio" name="gender" checked="checked">**    [name设置为相同名称实现单选效果]

下拉列表    

<select>

<option>下拉列表选项</option>

<option>下拉列表选项</option>

</select>


属性:

Multiple=”multiple”  将下拉列表设置为多选项(select)

Selected=”selected”  设置默认选中项目(option)

<optgroup></optgroup>   对下拉列表进行分组。

Label=””  分组名称。

多选框    <input type="checkbox" checked="checked">**

文本域    <textarea cols="" rows="">    [Cols  控制输入字符的长度  Rows  控制输入的行数 建议用CSS通过宽高进行设置]

文件上传控件    <input type="file">
文件提交按钮    <input type="submit">    [可以实现提交功能]
普通按钮    <input type="button" value="...">    [不可以实现提交功能]
图片按钮    <input type="image" src="...">    [可以实现提交功能]
重置按钮    <input type="reset">

网址控件    <input type="url">
日期控件    <input type="date">
时间控件    <input type="time">
邮件控件    <input type="email">
数字控件    <input type="number" step="5">
滑块控件    <input type=“range”>

猜你喜欢

转载自blog.csdn.net/baidu_33591715/article/details/80974782
今日推荐