第1章、认识HTML
1、HTML、CSS、JS的定义
-
HTML
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 -
CSS
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 -
JS
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
2、HTML标签
<h1></h1> # 标题标签
<p></p> # 段落标签
<img src='1.jpg'> # img标签
3、HTML文件的基本结构
- <html>
根标签，所有的网页标签都在<html></html>中 - <head>
用于定义文档的头部，是所有头部元素的容器，头部元素有<title>、<script>、 <style>、<link>、 <meta>等。 - <body>...
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 - head标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
- 注释
<!--注释-->
第2章 认识标签（一）
-
<body>标签，网页上显示的内容放在这里
-
<p>标签，添加段落，一段文字一个标签，默认段前段后都有空白
<p>段落文本</p> -
<hx>标签，给网页添加标题
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法： <hx>标题文本</hx> (x为1-6) -
<strong>标签粗体，<em>标签斜体。语义是：加强语气
<strong>需要强调的文本</strong>
<em>需要强调的文本</em> -
<span>标签，设置单独的样式用的。
<span></span> -
<q>标签，短文本引用
<q>对简文本引用文本</q>语义是：引用别人的话。
注意：要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。 -
<blockquote>标签，长文本引用
<blockquote>引用文本</blockquote>
浏览器对<blockquote>标签的解析是两边缩进样式 -
使用<br>标签分行显示文本<br>标签作用相当于word文档中的回车。
xhtml1.0写法：<br />
html4.01写法：<br>
与以前我们学过的标签不一样，<br>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br >、<hr >和<img >。 -
空格
-
<hr>标签,添加水平横线
html4.01版本 <hr>
xhtml1.0版本 <hr /> -
<address>标签，默认斜体，为网页加入地址信息
<address>联系地址信息</address> -
<code>标签，加入一行代码
<code>代码语言</code>
注：如果是多行代码，可以使用<pre>标签。 -
<pre>主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<pre>语言代码段</pre>
第3章 认识标签（二）
1. ul-li标签，是没有前后顺序的信息列表。
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
2. ol-li标签
每项<li>前都自带一个序号，序号默认从1开始
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
3.div标签，独立逻辑容器
什么是逻辑部分？它是页面上相互关联的一组元素。
<div>…</div>
4. 给div命名
为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称
<div id="版块名称" title=“xxx”>…</div>
title是div标签的一个属性，当鼠标放在div标签上时，会显示title的内容。
5. table标签
创建表格的四个元素：
table、tbody、tr、th、td
5-1、<table>…</table>：整个表格以标记开始、
5-2、
<tbody>…</tbody>：如果不加5-3、
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。5-4、
<td>…</td>：表格的一个单元格，一行中包含几对...，说明一行中就有几列。5-5、
<th>…</th>：表格的头部的一个单元格，表格表头。5-6、表格中列的个数，取决于一行中数据单元格的个数
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的2、表头，也就是th标签中的文本默认为粗体并且居中显示
可选属性：
align:
- left 字体靠左，右，居中
- center 字体靠右
- right 字体靠居中
bgcolor：表格背景色
- rgb(x,x,x)
-
xxxxxx
- colorname
border:表格边框的宽度
cellpadding:单元格边缘与其内容之间的距离
- pixels
- %
cellspacing:单元格之间的空白 - pixels
- %
6. 用css为表格加入边框
为th，td单元格添加粗细为一个像素的黑色边框。
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
7. <caption>标签，为表格添加标题和摘要
7-1、摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<table summary="表格简介文本">
7-2、标题
用以描述表格内容，标题的显示位置：表格上方。
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
第4章 认识标签（三）
1. <a>标签,链接到另一个页面
默认是在当前窗口打开
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
1.1 在新建浏览器窗口中打开链接
<a href="目标网址" target="_blank">click here!</a>
1.2 <a>标签中响应onclick事件
<a href="javascript:void(0);" onclick="doSomething();">test</a>
<a href="http://xxx/findname/" onclick="doSomething();return false">test</a>
<a href="http://xxx/findname/" onclick="doSomething();event.returnValue=false">test</a>
1.3 使用mailto在网页中链接Email地址
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。不要存在空格！
<a href="mailto:yy@imocc.com?cc=xiaoming@imocc.com&bcc=xioayu
@imocc.com&subject=主题&body=邮件内容">发送</a>
2. 认识 <img>标签，为网页插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
第5章 与浏览者交互，表单标签
1. 使用表单(form)标签，与用户交互
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：表示当前表单中的内容提交给哪个页面进行处理。
3.method ： 数据传送的方式（get/post。默认是get提交。
<form method="传送方式" action="服务器文件">
<form method="post" action="">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
2. input文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
<form>
<input type="text/password" name="名称" value="文本" />
</form>
-
使用提交按钮，提交数据
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
-
使用重置按钮，重置表单信息
只需要把type设置为"reset"就可以。
<input type="reset" value="重置">
checked定义和用法
checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 或 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
语法
<input checked="checked">
实例
带有一个预选定复选框的 HTML 表单：
<form action="form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
</form>
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>
3. 文本域，支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
4. 使用单选框、复选框，让用户选择
<input type="radio/checkbox" value="值" name="名称"
checked="checked"/>
1、type:当 type="radio" 时，控件为单选框 当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
5. 使用下拉列表框，节省空间
5.1、value：
5.2、selected=“selected”：
设置selected="selected"属性，则该选项就被默认选中。
5.3、使用下拉列表框进行多选
在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
6. form表单中的label标签
为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<label for="控件id名称">
<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>