HTML 基础 1
浏览数：27 /
时间：2015年06月09日
1. 文件结构：
HTML文件的固定结构：
<html>
<head>...</head>
<body>...</body>
</html>
html是根标签
head定义文档头部，包含： title, script, style, link, meta
body是网页主要内容，包含：h1,h2-h6, p, a, img
2. 认识head标签：
<head>
<title>...</title> 网页标题
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3. 语义化：
明白每个标签的用途（在什么情况下我可以使用这个标签才合理）
比如，网页上的文章的标题就可以用标题标签，
网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。
4. 认识body标签：
<p>段落文本</p> 有三段就放三个<p></p>
<h1>标题文本</h1> h1-h6共6个标题分级
<em>斜体文本（强调）</em> 斜体文本内容
<strong>粗体文本</strong> 粗体显示文本内容
<span>单独样式文本</span> 没有语义的，它的应用就是为了 设置单独的格式用的
<q>引用的文本</q> 引用的文本内容，会自动加上双引号
<blockquote>大段引用</blockquote> 引用大段的文本内容，文本前后会加上缩进
<br/> 换行
<hr/> 水平横线
空格
<address>地址信息</address> 地址信息，通常用于公司地址显示
<code>代码内容</code> 代码，通常是一行内
<pre>多行代码</pre> 多行代码,你需要在网页中预显示格式时都可以使用它
<ul> ul-li 列表信息，以圆点显示
<li>信息1</li>
<li>信息2</li>
......
</ul>
<ol> ol-li 列表信息，带上序号
<li>信息</li>
<li>信息</li>
......
</ol>
<div>排版内容<div> 排版中使用，相当于一个容器
确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块
<div id="版块名称">…</div> div 带上ID号，使之更清晰
<table>表格内容</table> 创建表格
<caption>标题文本</caption> 为表格添加标题文本
<tbody>...</tbody> 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
<tr>表格一行</tr> 表格中的一行
<td>表格单元格</td> 表格中的一个单元格
<th>表格表头</th> 表格头部的一个单元格，表格表头
<table summary="表格摘要">...</table> 为表格添加摘要，但不会被浏览器显示出来
<a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a> 链接标签
target="_blank" 网页将在新窗口中打开
mailto: 网页中邮件地址，可带多个参数
mailto: 邮箱地址
cc= 抄送地址
bcc= 密抄地址
; 多个邮箱地址
subject=邮件主题
body= 邮件内容
完整举例: <a href="mailto:[email protected] ?cc=[email protected] &bcc=[email protected] &subject=主题 &body=邮件内容">发送邮件</a>
<img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />
5. 与用户交互：
语法：
<form method="传送方式" action="服务器文件"></form>
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
表单控件：
文本框、文本域、按钮、单选框、复选框
method:
post/get
1. 文本框（文本/密码）
<form>
<input type="text/password" name="名称" value="文本" />
</form>
type：有“text”和“password”两种类型
name：为文本框命名，方便后台ASP和PHP使用
value：文本框默认值，一般起提示作用
2. 文本域（多行文本）
<textarea rows="行数" cols="列数">默认文本内容</textarea>
cols：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
type：radio单选，checkbox复选框
value：提交数据到服务器的值，后台PHP处理使用
name：为控件命名，以备后台程序ASP和PHP使用
checked：checked="checked"时，此选项默认被选中
注意：同一组的单选按钮，name取值一定要一致
4. 下拉列表框
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<label for="book>看书</label>
<option value="看书" id="book">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置" />
</form>
value：向服务器提交值
selected：设置selected="selected"时，默认选中
multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑
label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
