HTML基础——标签和语法及页面左右布局方式

常用标签：

1超链接标签

：<a href="链接地址"></a>

2列表

有序列表，无序列表，自定义列表

有序列表：

<ol>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</ol>

无序列表：

<ul>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</ul>

自定义列表：

<dl>
	<dt>自定义的标题</dt>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</dl>

表单元素

text

<input type="text">

密码

<input type="password">

radio单选框

<input type="radio">

CheckBox复选框

<input  type="checkbox">

多项选择框

          <select name="" id="">
				<option value="">江苏</option>
				<option value="">安徽</option>
				<option value="">浙江</option>
				<option value="">湖南</option>
				<option value="">湖北</option>
				<option value="">北京</option>
		  </select>

textarea多行文本框 cols=“每行中的字符数” rows=“显示的行数”

<textarea name="" id="" cols="30" rows="10">写点内容</textarea>

提交按钮

<input type="submit" value="提交">

重置按钮

<input type="reset" value="重置">

换行

<br>

HTML新增的布局结构

header：一般用于网页的头部定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。

<header>

</header>

footer：与header元素基本一致，但是footer元素一般定义网页的 底部内容。

<footer>

</footer>

section:用来定义网页中的内容进行分拆；强调分块。一般用于页面中具有明显独立的内容

<section>

</section>

页面左右布局方式：

在页面主体中：

<div id="container" style="width:auto">
			<div style="background-color:#FFD700;height:200px;width:100px;float:left;">
				这是第一部分
			</div>

			<div style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
				这是第二部分（在第一部分的右边）
			</div>
			
			<div style="background: chocolate; height:100px;width: 300px;float: left;">
				这是第三部分（在第二部分的右边）
			</div>
</div>

采用这种方式布局：
1.在最外层< div >标签中设置一个width:auto;
2.在每一个内部区域的< div >中设置一个浮动属性：float:left;这样每一个div代码块就会自动的向右排列；
注意这种方式有一个特点：就是当剩余的空间宽度，不足以显示最后一个div时，这个div就会换到最外面那个div的下面去显示。