您的位置：首页 > Web前端 > HTML

HTML

2016-05-05 00:00 288 查看

摘要: Web三要素;html的文本元素;元素文本的样式；图像和超链接以及锚点；表格；表单；

Web三要素;html的文本元素;元素文本的样式；图像和超链接以及锚点；表格；表单；

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

Web三要素：
- 浏览器
- 服务器（网页html存在服务器中）
- http协议
--------------------------------------------------------------------------------------

<!doctype_html>

<html>

<head>

<meta charset="utf-8">

<title>第一个网页</title>
</head>

<body>
朗哥哥真帅！
</body>
</html>
----------------------------------------------------------------------------------------
html的文本元素：
1.标题元素：<h1>一级标题</h1>
2.段落元素：<p>段落</p>
3.列表元素：
- 有序列表：<ol>
<li>有序列表</li>
</ol>
- 无序列表：<ul>
<li>无序列表</li>
</ul>
- 列表的嵌套：
<ol>
<li>
安徽省
<ul>
<li>亳州市</li>
<li>安庆市</li>
<li>合肥市</li>
</ul>
</li>
<li>
江苏省
<ul>
<li>无锡</li>
<li>南京</li>
<li>苏州</li>
</ul>
</li>
<li>
浙江省
<ul>
<li>杭州</li>
<li>宁波</li>
<li>温州</li>
</ul>
</li>
</ol>

4.分区元素：
- 行内分区元素：<span style="color:red;">行内分区元素</span>
- 块分区元素：<div>块分区元素</div>
-------------------------------------------------------------------------------------------
元素文本的样式：
一.行内元素：
1.<i>定义斜体字。 2.<em>定义着重文字。
3.<b>定义粗体文字。 4.<strong>定义加重文字。
5.<u>定义带下划线文字。 6.<del>定义带删除线的文字。

- 换行 <br> - 空格 - 小于号 &it
------------------------------------------------------------------------------------------
图像和超链接以及锚点：
- 图像(常用相对路径)：<img src="../images/1.png"/>

- 超链接：<a href="http://www.xxx.com" target="_blank">链接名</a>
target设置为blank时打开链接时会用新的标签页。此外海可以设置为_self。

- 锚点的定义：<a name="a1">被设为锚点的文本等</a>
锚点的引用：<a href="a1">回到锚点</a>
------------------------------------------------------------------------------------------
表格：
1.定义表格：<table></table>
2.创建行：<tr></tr>
3.创建列：<td></td>
例：
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

4.表格的常用属性：
- <table>元素：border、width/height、align
cellpadding：单元格边框与内容之间的间距
cellspacing：单元格之间的间距

- <tr>元素：align/valign

- <td>元素：align/valign、width/height
colspan：跨行
rowspan：跨列

- 行分组：便于给每一组设置统一的样式
表头：<thead></thead>
表主题：<tbody></tbody>
表尾：<tfoot></tfoot>
-------------------------------------------------------------------------------------------
表单：用于显示、收集信息，并提交信息到服务器

- 表单二要素：
一.form元素：<form>要收集提交的数据</form>
表单元素的主要属性：
1.action：表单数据提交的url
2.method：表单数据提交的方式
3.enctype：表单数据编码的方式

二.表单控件：
1.input元素：
- 文本框：<input type="text"/>
- 密码框：<input type="password"/>
文本框和密码框的常用属性：
value:给框设置默认值；
maxlength:限定输入的最大长度；
readonly:只读；

- 单选框：<input type="radio"/>
- 复选框(多选框)：<input type="checkbox"/>
单选框和复选框的常用属性：
value:文本，当提交form时，如果选中了此按钮，那么value就被发送到服务器。
name:用于分组，同一组单的单选框或复选框的名称必须相同。
对于单选框：同名的框是一组，彼此互斥（只能选其中一个）。
checked:设置此框被默认选中

- 提交按钮：提交表单数据 <input type="submit"/>
- 重置按钮：将表单数据重置为初始值 <input type="reset"/>
- 普通按钮：没有默认功能，需要通过js自定义功能。通常用于执行客户端脚本。
<input type="button"/>
按钮的主要属性：value：按钮的名字。

- 隐藏域：传递不希望被用户看见数据。需要提前通过value设置好默认值。
<input type="hidden"/>
- 文件选择框：用于上传文件 <input type="file"/>

2.其他元素：
- 标签label：用来管理表单中的文本。可以将某文本和某控件绑定在一起，
使得用户点击该文本时就相当于点击了那个控件。
绑定步骤：
- 给目标控件加上id
- 给文本加上label，并设置for="id值"
例： <p>
<input type="checkbox" id="c1"/>
<label for="c1">我已阅读并自愿遵守此协议。</label>
</p>
- 文本域textarea：相当于多行文本框
rows：设置占据多少行文本的高度。cols：设置占据多少列文本的宽度。
双标签中间的内容就是它的默认值。 readonly：只读。
例： <p>
简介：
<textarea rows="6" cols="20">请介绍下自己！</textarea>
</p>
- 下拉选：value、selected
<p>
城市：
<select>
<option>请选择</option>
<option>合肥</option>
<option selected>亳州</option>
<option>安庆</option>
<option>阜阳</option>
</select>
</p>


例 <div>
账号:<input type="text" enabled/>
</div>
<div>
密码:<input type="password" disabled/>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航