JavaWebDay07

JavaWebDay07

课程大纲

1、HTML的常规标签的介绍
2、HTML的表单标签 ---> 学习的重点（后期程序的入口）

第一章 HTML的常规标签

1、HTML的注释写法

<!-- 这是注释  -->

2、标题标签

(数字越小,字越大)

<h1></h1>  一级标题
<h2></h2>  二级标题
<h3></h3>  三级标题
<h4></h4>  四级标题
<h5></h5>  五级标题
<h6></h6>  六级标题

3、字体标签 font

A.标准格式
	<font> 字体的设置 </font>

B.常见属性
	a.字体大小的设置 size="1"  范围1-7 数字越大,字体越大
	b.字体颜色的设置 color="red" 红色  #00FF00 绿色
	c.字体标签的设置 face="楷体" 一定要是自己系统当中有这个字体

C.加粗,斜体,下划线
	<b>字体会加粗</b>
	<i>字体会倾斜</i>
	<u>字体下划线</u>

4、格式化标签

A.换行
	<br> 也可以 <br/> 只有一半(无需包裹.只写一半)

B.段落
	<p> 长段文字 </p> 


C.水平线
	<hr>
	a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
	b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
	c.颜色 color 
	d.对齐方式  align="right"   left在左边 center在中间 right在右边
	<hr color="#FF9900" width="20%" size="8%" align="right">

D.居中标签的效果
	<center> 标签名称 ... </center>

5、特殊指令

A.空格效果  
B.请参考 CHM格式笔记. -> E扩展补充 -> b阶段html -> 04特殊字符编码表对照

6、图片标签 img

A.基本格式
	<img src="路径">   <!-- 可以是网络路径,也可以是相对路径,也可以是绝对路径.不推荐绝对路径-->

B.设置图片的大小对齐位置
	a.大小设置 width 宽度, height 高度
	b.设置对齐方式 align
	<img src="mm01.png" width="10%" height="10%" align="right"/>

C.相对路径的问题
	a.图片和网页在同一个目录 <img src="mm01.png"/>
	b.图片在其他目录,网页    <img src="../img/mm01.png"/>  网页在src图片在img ../返回上一层
	c.图片在其他目录,网页    <img src="img/mm01.png"/>     图片在网页的子目录

7、列表标签

A.有序列表 ol
	<ol type="A">
		<li> Java </li>
		<li> UI </li>
		<li> Python </li>
		<li> PHP </li>
		<li> 前端 </li>
	</ol>
	
B.无序列表 ul
	<ul>
		<li> Java </li>
		<li> UI </li>
		<li> Python </li>
		<li> PHP </li>
		<li> 前端 </li>
	</ul>

8、超链接标签 a

A.基础语法
	<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
	
B.属性
	href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
	target 不写或者写 _self 默认是在自己的页面打开,设置 _blank 在新的页面打开

9、块标签

A.两个标签
	<span> 有多大空间占据多大空间 </span> 
	<div> 独占一行 </div>
	
B.语义化标签(了解)
	<header> </header> HTML5后的头标签.只是阅读性高一点,没有实质的作用
	<footer> </footer> HTML5后的脚标签.只是阅读性高一点,没有实质的作用	

10、表格标签

A.基础代码
	<table border="1px" align="center" width="80%" cellspacing="0">
		<tr>
			<th> 表头第一列 </th>
			<th> 表头第二列 </th>
			<th> 表头第三列 </th>
		</tr>
		<tr>
			<td> 第一行第一列 </td>
			<td> 第一行第二列 </td>
			<td> 第一行第三列 </td>
		</tr>
		<tr>
			<td> 第二行第一列 </td>
			<td> 第二行第二列 </td>
			<td> 第二行第三列 </td>
		</tr>
	</table>
	
B.合并单元格
	a.两个属性
		colspan：合并列
		rowspan：合并行
	b.操作步骤
		I.确定是合并行 还是 合并列
		II.确定第一次出现的单元格是哪一个
		III.删除其他不要的行或者列

第二章 HTML的表单标签 form

(在W3CSchool的CHM格式当中找HTML5的input标签)

1、form表单的基础介绍

A.格式
	<form action="http://www.baidu.com" method="get"> ... </form>
	
B.属性
	a. action存放的是URL 网址.（把表单项"输入框"当中的数据,提交到网址对应的服务器上）
	b. method 设置请求的方式 get请求和post请求
		get特点:  在地址栏有参数信息,数据量小,不安全
		post特点: 在地址栏没有参数信息,数据量大,安全
		
C.注意
	如果要提交数据到地址栏,必须设置 【name】属性

2、input标签

A.type属性   根据type属性的取值不同,表单项当中的类型就不一样
	a. text 用户名的输入框
	b. password 密码的输入框
	c. radio 性别的单选按钮
	d. checkbox 爱好的多选按钮
	e. submit 提交按钮
	f. button 普通按钮 和后期JavaScript 组合使用
	g. image 图片按钮
	h. file 上传的文件选择框
	i. hidden 隐藏域.看不到UI界面,但是存在.
	j. date 选择日历的
	k.datetime 
	l.datetime-local 
	m.email 

B.name属性
	a. 提交地址栏上面的name.给服务器进行识别的标志
	b. 对于单选按钮radio而言,设置相同的name属性,表示在同一组当中
	c. 对于多选按钮checkbox而言,设置相同的name属性,表示在同一组当中

C.value属性
	给我们那些不能让用户输入的 表单项,设置的值

D.id属性
	a.可以给后面的CSS设置样式的识别器
	b.可以给后面的JS设置识别具体是哪一个标签需要加特效.

E.placeholder属性
	增强用户体验,给出默认提示信息的.

3、select 下拉列表

A.格式(name用于表单数据的提交,value是具体的表单数据)
	<select name="guojia">
		<option value="China"> 中国 </option>
		<option value="USA"> 美国 </option>
		<option value="England"> 英国 </option>
	</select>

4、textare 文本域

A.格式 (例如:自我介绍)
	<textarea cols="20" rows="5"></textarea>