html与CSS的关系
- HTML是网页内容的载体
- CSS样式是表现
- JavaScript实现特殊效果
标签
网页中每一个内容在浏览器中的显示,都要存放到各种标签中
标签是由<>
括起来的, HTML标签不区分大小写,建议小写
html文件基本结构
<html>
<head>...</head>
<body>...</head>
</html>
<html></html>
称为根标签,包含所有网页标签<head>
用于定义文档的头部,是所有头部元素的容器。头部元素有<title></title>
、<script></script>
、<style></style>
、<link>
、<meta>
等- 在
<body>
和</body>
中的是网站的主要内容,如<h1>
、<p>
、<a>
、<img>
,这些标签的内容会在浏览器中显示出来
认识head标签
文件的头部描述了文档的各种信息。绝大多数头部数据不会作为内容显示给读者
<title>
标签中的内容会出现在浏览器的标题栏中,便于搜索引擎判断主题
html注释
<!--注释文字-->
一些标签的使用
段落
<p>
是段落标签
标题
<hx>
文章标题,共有6个h1、h2、h3、h4、h5、h6
,根据重要性递减
强调
<strong>
——粗体
<em>
——斜体
span
用于设置单独的样式
引用
q
<q>引用文本</q>
要引用的文本无需""
,对简短文本的引用
blockquote
<blockquote>引用文本</blockquote>
,对长文本的引用
浏览器对此标签的解析是缩进样式
换行
<br />
换行
没有HTML内容的标签为空标签,空标签只需一个开始标签。
HTML中忽略回车和空格
空格
空格
水平线
<hr />
增加一条水平线
地址信息
<address>联系地址信息</address>
,在浏览器上样式为斜体
代码
一行代码
<code>代码</code>
多行代码
<pre>代码</pre>
,pre
中的元素通常会保留空格和换行
列表
无序
ul-li
是没有顺序的信息列表
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
有序
ol-li
有顺序的信息列表
<ol>
<li></li>
<li></li>
</ol>
div
独立逻辑部分,相当于一个容器。
可以为独立的逻辑部分设置一个名称,用id
属性为<div>
提供唯一的名称
表格
创建表格的四要素
<table>
、<tbody>
、<tr>
、<th>
、<td>
1. 表格以<table>
开始,以</table>
结束
2. 若不加<thead>
、<tbody>
、<tfooter>
,表格加载完后才显示,<tbody>
包含行的内容下载完优先显示,如果表格很长,可用<tbody>
分段,可以一部分一部分显示
3. <tr>...</tr>
表格的一行,几对tr
就有几行。
4. <td>...</td>
一个单元格,一行中几对td
说明一行就有几列。
5. <th>
表头
6. 表格的列数取决于一行中数据单元格的个数
标题和摘要
摘要
摘要的内容并不在浏览器中显示,作用是增强可读性。
<table summary="摘要">
标题
<table>
<caption>标题</caption>
<tr>
<td>...</td>
......
</tr>
......
</table>
超链接
一般网址
<a href="目标网址" title="鼠标滑过显示的文本">链接文本</a>
若要在新窗口打开链接,则
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接文本</a>
Email地址
如下
<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主题&body=内容">发送</a>
图片
<img src="图片地址" alt="下载失败的替换文本" title="提示文本">
title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
图像可以是GIF,PNG,JPEG格式的图像文件。
表单
<form method="传送方式" action="服务器文件">
<form>
成对出现action
:浏览者输入的数据被传送到的地方,如一个php界面(save.php)method
:数据传送的方式- 所有的表单控件必须放到
<form></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>
输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
type
:
当type
为text
时,为文本输入框
当type
为password
时,为密码输入框name
:为文本框命名,以备后台程序ASP、PHP使用。value
:文本框默认值
文本域
用户需要输入大段文字时,需要文本域<textarea>
.
<textarea rows="行数" cols="列数">文本</textarea>
cols
:列数,rows
列数- 在
<textarea></textarea>
之间可以输入默认值
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10">在这里输入内容...</textarea>
</form>
选框
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
type
:
type="radio"
——单选框
type="checkbox"
——复选框value
:提交到服务器的值name
:命名控件checked
:当为"checked"
时,默认选中
同一组的单选按钮,name
取值要一致
下拉列表框
单选
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected="selected">c</option>
......
</select>
多选
在<select>
中设置multiple="multiple"
可实现多选,Windows下多选时按下Ctrl+单击
可选择多个选项
<form>
<select multiple="multiple">
<option value="a">a</option>
<option value="b">b</option>
......
</select>
</form>
按钮
提交
<input type="submit" value="提交" />
type
:只有当type
设为submit
时,按钮才有提交作用value
:按钮上显示的文字
重置
<input type="reset" value="重置" />
label
当用户点击label
标签时,浏览器自动将焦点转到和标签相关的表单控件上。
<label for="控件的id名称">文本</label>
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email" />
</form>