HTML5学习_day02(5)--html块级标签

1.h标签
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <h4>我是四级标题</h4>
        <h5>我是五级标题</h5>
        <h6>我是六级标题</h6>
        注意：
        a.h1标签一个网页最好只有一个
        b.h2标题一个网页不能超过12个

        c.h3之后的标签就不做数量要求了

2.p标签
        语意:段落的意思，段前断后有换行符(若p标签中放一个块级标签，块级标签代码会被分成两段)
        注意：p标签是不能嵌套块级元素标签 如果嵌套了，浏览器解析时会自动给p标签截断撑两个部分

3.ul列表(ul直接子级必须是li 不能添加其他标签进去 w3c标准不允许)
       

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

         注意:ul的直接子级一定是li不能出现其他标签，下面写法是错误的：
      

        <ul>
            <p></p>
            <li></li>
        </ul>

        下面写法是对的 遵循ul的直接子级是li(li的直接子级没有限制)
      

        <ul>
            <li>
                <ul>
                    <li></li>
                </ul>
            </li>
        </ul>

4.有序列表ol
        两个属性：
        type:列表显示的序号类型 值：1,a,A,i,I
        start:起始位置的下标，一定是个数字(例如type="A" start="2"  这就是从B开始排序了)
        reversed(默认升序):升降序  值：reversed(降序)
        例如：

        <ol type="a" start="3" reversed="reversed">
			<li>序列1</li>
			<li>序列2</li>
			<li>序列3</li>
        </ol>

注意:ol的直接子级一定是li不能出现其他标签 例子同上

5.定义列表项dl

        <dt>水果</dt>
            <dd>苹果，梨，橘子</dd>
            <dt>水果</dt>
            <dd>苹果，梨，橘子</dd>
            <dt>水果</dt>
            <dd>苹果，梨，橘子</dd>
        </dl>    

效果：

水果

苹果，梨，橘子

水果

苹果，梨，橘子

水果

苹果，梨，橘子

6.水平线
      <hr />

7.pre 格式化标签
        作用：被包含在pre标签中的文本通常会保留空格或换行符，并且文本也会呈现一样大小字体。(例如写一首诗)

                <pre>
				绝句 杜甫
			迟日江山丽<sup>1</sup>，春风花草香<sub>3</sub>。 <!--上标和下标的使用-->
			<u>泥融飞燕子，沙暖睡鸳鸯。</u>  <!--<u>是下划线 <del>删除线  <strong>加粗-->
		</pre>

效果：

8.表格

cellspacing:单元格与单元格距离(有默认值,设置0px,可避免双线问题)
cellpadding:内容与单元格边框线的距离
border:单元格边框

        1.普通表格

            <table border="1" cellspacing="" cellpadding="">
			<tr>
				<td>姓名</td>
				<td>学号</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>20150001</td>
				<td>98</td>
			</tr>
		</table>

          2.

		<table border="1px" cellspacing="0px" cellpadding="10px">
			<!--cellspacing:单元格与单元格距离(有默认值)
			cellpadding:内容与单元格边框线的距离
			border:单元格边框-->
			<tr>
				<td>1111001</td>
				<td>1111002</td>
			</tr>
			<tr>
				<td>1111001</td>
				<td>1111002</td>
			</tr>
			<tr>
				<td>1111001</td>
				<td>1111002</td>
			</tr>
		</table>

          3.单元格合并
                    colspan：横向合并 值为数字
                    rowsapn：垂直合并 值为数字

               <table border="1px" cellspacing="0px" cellpadding="20px" >
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>学号</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>张三</td>
				<td colspan="2">10</td>
				<td>2012</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>11</td>
				<td rowspan="2">111</td>
				<td>2012</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>11</td>
				<td>2012</td>
			</tr>
		</table>

        行合并：colspan 在要合并的标签使用
        列合并：rowspan 在要合并的标签使用 要删除下一个tr多余的标签里面多余的行   

9.form表单

              <form action="" method="post">
			单输入框：<input type="text" name="username" id="" value="" placeholder="请输入用户名"/>
			密码框：<input type="password" name="password" id="" />
			<hr />
			<textarea name="" resize="none" rows="5" cols="100"></textarea>
			<hr />
			<span style="color:#3333FF;">单选按钮：
                        placeholder:可设置输入框内容提示语
                        注意：单选一定保持name的名称一致，否则就变成了多选了
			默认选择：用checked属性 值也为checked</span>
			男:<input type="radio" name="sex" id="sex" value="1" checked="checked" />
			女:<input type="radio" name="sex" id="sex" value="2" />
			<hr />
			<span style="color:#3333FF;">多选按钮</span>
			<span style="color:#3333FF;">默认选择：用checked属性 值也为checked</span>
			苹果<input type="checkbox" name="fruit" id="fruit1" value="苹果" checked="checked"/>
			香蕉<input type="checkbox" name="fruit" id="fruit2" value="香蕉" />
			葡萄<input type="checkbox" name="fruit" id="fruit3" value="葡萄" />
			<hr />
			<span style="color:#3333FF;">下拉列表</span>
			<span style="color:#3333FF;">默认选择：用selected属性 值也为selected</span>
		    编程语言：<select name="编程">
				<option value="C++">c++</option>
				<option value="Python">Python</option>
				<option value="Java">java</option>
				<option selected="selected" value="HTML5">HTML5</option>
			</select>
			<input type="submit" value=""/>
		</form>