day_01HTML

一、HTML简介：

Hyper Text Markup Language超文本标记语言

超文本：（超出文本外的语言，如图片，音频，视频）

标记语言：大部分语义都是由标签表示

二、HTML组成：

1.结构：HTML

2.表现：CSS（cascading style sheets）（层叠样式表）

3.行为：JAVAScript（jQuery）

一个良好的HTML页面，需要结构，表现，行为解耦（分离）

三、HTML语法：

1. HTML标签的分类：

①自结束标签

②有开始有结束的标签

2.HTML标签的书写规则：

①HTML标签不区分大小写

②HTML标签可以嵌套但不能交叉嵌套

③HTML属性必须有值，且属性值必须加引号“”

④HTML注释不能嵌套

3.HTML常用的标签：

①标题标签

语法:h1-h6

<h1>h1</h1>

<h2>h2</h2>

②div标签

语法：div

无实际意义，作用：布局。

③段落标签

语法：p

特点：自带换两行的效果

br:换行标签

④转义字符

语法：&;

常用转义字符

空格： &nbsp；&emsp；

大于号>：&gt；

小于号<：&lt；

版权号码©：&copy；

⑤无序列表

语法：unorder list:ul

<ul>

<li>列表项</li>

</ul>

4.html重点标签

1.插入图片

使用img标签插入图片

src:图片路径

alt:图片路径有误时的提示文本

title:鼠标悬停时的提示文本

<img alt="路径有误时的提示文本" src="图片路径" title="鼠标悬停时的提示文本" >

2.超链接

使用a标签实现超链接功能

href:链接的目标路径

target:以何种方式打开

_self:以当前页面打开

_blank:以新页面打

<a href="pages/target.html" target="_self">跳转到目标页面，目标页面有美女！</a>

3.表格

* 使用table制作表格

* 使用tr制作表格中的行

* 使用td|th制作表格中的单元格

* border="边框"

* 跨行：rowspan

* 跨列：colspan

*宽：width

*高：height

<table border="1">
		<tr>
			<th>姓名</th>
			<th>阵营</th>
			<th>职业</th>
			<th>武器</th>
		</tr>
		<tr>
			<td>刘备</td>
			<td>蜀</td>
			<td>蜀汉集团董事长</td>
			<td>双股剑</td>
		</tr>
		<tr>
			<td>诸葛亮</td>
			<td>蜀</td>
			<td>蜀汉集团CEO</td>
			<td>羽扇</td>
		</tr>
		<tr>
			<td>关羽</td>
			<td>蜀</td>
			<td>荆襄总裁</td>
			<td>青龙偃月刀</td>
		</tr>
		<tr>
			<td>张飞</td>
			<td>蜀</td>
			<td>阆中销售经理</td>
			<td>丈八蛇矛</td>
		</tr>
	</table>

4.表单（重点） 

使用form标签制作表单

语法

    <form action="提交路径"method=“提交方式”：get/post>

         <input />

         <select><option></option></select>

    </form>

 input标签中的属性:

• 表单项的类型，type：text（文本框）/password/radio(单选)/checkbox（复选）/reset（重置）/submit（提交）

                                 /file（上传文件）/hidden(隐藏域)

• 表单项的名称，name：提交数据时使用name属性

                                      reset/submit两个按钮不用加name属性

• 表单项的值，value
• 表单项的默认选中状态，checked
• 文本提示，placeholder（请输入用户名）

* 文本框:type="text"

* 密码框:type="password"

* 单选框:type="radio"

* 多选框:type="checkbox"

* 重置按钮:type="reset"

* 提交按钮:type="submit"

* 选择文件:type="file "

* 隐藏:type="hidden "

* select(option)

* 下拉列表

* <select name="star">

<option value="fbb">范冰冰</option>

</select>

<form action="success.html">
	用户名：<input type="text" name="username"/><br/><br/>
	密码：<input type="password" name="pwd"/><br/><br/>
	性别：<input type="radio" name="gender" value="man" checked="checked"/>男
		   <input type="radio" name="gender" value="woman"/>女<br/><br/>
	 爱好：<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
		   <input type="checkbox" name="hobby" value="football"/>足球
		   <input type="checkbox" name="hobby" value="volleyball"/>排球<br/>
	喜欢的明星：<select name="star">
	            <option value="fbb">范冰冰</option>
	            <option value="zy">杨颖</option>
	            <option value="zzy">章子怡</option>
	            </select> <br/>
		   <input type="reset">
		  <input type="submit">
	          </form>

5.ccs

* 语法：选择器{属性名:属性值;属性名2:属性值2;}

* 选择器分为三种：

• 1.标签选择器:h2{} p{}
• 2.类选择器

          定义: .类名{}

          调用: class="类名"

• 3.ID选择器

         定义: #ID名{}

         调用: id="ID名"

• 4.嵌入方式

          行内style属性中：<p style=" "></p>

          内部style标签中：<style></style>(一般写在页面的head文件中)

          外部.css文件中：定义：xxx.css

                                      调用：<link href="路径" rel=“stylesheet”>