20190808——HTML（1）

HTML

1.网页的基本结构

**2.基本标签** **2.1.基本内容标签**

段落标签：p
语法:<p>段落内容</p>
特点:独占一行，前后留有空白行
<p>P这是一个段落 前后有空白行，独占一行</p>
DIV 标签一般用于网页布局,也是一个块级标签独占一行
标题标签:h1----h6  一级标题到六级标题 内容黑体加粗

		<h1>一级标题</h1>
		<h2>一级标题</h2>
		<h3>一级标题</h3>
		<h4>一级标题</h4>
		<h5>一级标题</h5>
		<h6>一级标题</h6>

列表标签：有序列表<ol>和无序列表<ul>以及列表项 <li>列表标签默认存在左填充，列表项有列表的符号
		<ul> 
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
			<li>星期四</li>
			<li>星期五</li>
		</ul>
		<ol type="a">
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
			<li>星期四</li>
			<li>星期五</li>
		</ol>
定义列表标签:dl dt  dd 标签实现商品展示 dl,dt,dd都是独占一行   dd 存在左填充
块级标签
		<dl>
			<dt>商品名称或图片</dt>
			<dd>商品的属性</dd>
		</dl>
		<dl>
			<dt>商品名称或图片</dt>
			<dd>商品的属性</dd>
		</dl>

图像标签:<img /> 通过为不同的属性设定不同的值，实现图像样式的变化
<p>图片标签，img 存在不同的属性 src 表示导入图片的路径 width设定宽度  height设定图片高度<br/>
alt属性当图片的路径不存在的时候，显示的提示信息<br/>
title 当鼠标悬浮的时候显示的提示信息<br/>
align 图片的对齐方式
双人床<img src="img/a.jpg" width="150" height="100" alt="这是一张双人床" title="这个双人床好棒" align="middle"/>双人床

超链接标签 a两种方式:
超链接到其它网页: 直接在href 属性中定义网页路径即可
<a href="login.html">登录</a>

超链接到本网页的其它部分，通过锚点连接即可
当网页的内容比较多，需要多屏显示的时候，需要通过锚点连接跳转到不同的地方
首先需要定义锚点<a  name=””></a>的方法定义锚点




然后在网页的开始通过超级链接实现网页的锚点跳转

2.2.table标签
Table 就是一个表格标签由 table 标签 tr 行标签， td单元格标签组成
Table 标签可以通过合并单元格的方式以及嵌套的方法实现网页的布局;
2.2.1.基本结构

2.3.表单标签
2.3.1.form标签就是表单
表单可以实现前后台数据的交互,form标签的两个属性:method表示表单的提交方式
默认的值是:get,还可以选择post, action属性:表示表单提交的地址,表单的所有控件，必须在form标签之内

//填写表单的控件

get提交的时候（默认的提交方式）：表单的数据是拼接在地址的后面的通过? 和& ,并不安全，get提交的时候对于参数的长度是由限制,get当提交的参数带有汉字的时候，容易出现乱码
Post提交的时候:表单的数据是包括在请求头信息当中则在地址栏中不可以看见，所以比较安全。post提交的数据没有长度的限制，post提交的参数带有汉字容易转码。
一般需要在表单中显示的设定method的值为post
2.3.2.表单中的控件类型

文本框:<input type=”text” name=”自定义” />
密码框：<input type=”password” name=”自定义”>
单选按钮:<input type=”radio” name=”自定义” value=”自定义”>
同一组单选按钮必须提供相同的名称
每一个单选按钮都必须提供value的值
单选按钮选中，提交的参数信息为value的值，而非单选按钮后的提示文字
单选按钮默认选中的属性为checked=’checked’
	<tr>
		<td>用户性别</td>
		<td>
			<input type="radio" name="yhxb" value="NV" checked="checked"/>女
			<input type="radio" name="yhxb" value="NAN"/>男
		</td>
	</tr>	

复选按钮:<input type=”checkbox” name=”自定义” value=”自定义”>
复选按钮和单选按钮效果一致，只是能够多选

下拉列表:<select name=””>
<option value=”列表值”>列表项名称</option>
</select>
<option>为每一个下拉选择项 当选中选择项的时候获取的是对应的value
默认选中的选择项是由selected属性决定
				<tr>
					<td>用户学历</td>
					<td>
						 <select name="yhxl">
						 	<option value="zx">中学及以下</option>
						 	<option value="dz">大专</option>
						 	<option value="bk" selected="selected">本科</option>
						 	<option value="yjs">研究生</option>
						 	<option value="yjsys">研究生以上</option>
						</select>
					</td>
				</tr>

文件上传域：<input type=”file” name=”自定义”>
多行文本框：<textarea name=”自定义” rows=3 cols=”20”></textarea>
隐藏域：<input type=”hidden” name=”自定义” value=”” />
提交按钮:<input type=”submit” value=”提交” />
重置按钮:<input type=”reset” value=”重置” />
普通按钮：<input type=”button” value=”普通” />

绝大部分的控件都是:<input type=”类型”  name=”” value=”” />
类型:text,password,radio,checkbox,file,hidden,submit,reset,button

表单中控件的一些属性:
Name设定表单的控件名称（参数名的作用）
Value 设定表单控件的值( 参数的值)
Disabled 是否禁用  禁用以后控件的值不会提交
Size 控件的大小，设定控件允许显示的内容多少
maxLength 允许在控件中最多输入多少个字符