h5学习之6(html中常用的块级标签)
块级标签
1.标题标签
<h1>我是一级标题h1>
<h2>我是二级标题h2>
<h3>我是三级标题h3>
<h4>我是四级标题h4>
<h5>我是五级标题h5>
<h6>我是六级标题h6>
要注意的：
1）h1标签在一个网页上最好只有一个 在SEO中占的比重比较大
2）h2标签在一个页面上不能超过12个
3）h3之后的标签就不做数量上的要求
页面展示效果如下：
注：SEO：Search Engine Optimization的缩写， 翻译成中文就是“搜索引擎优化"就是通过一定的方法在网站内外发布文章、交换连接等，最终达到某个关键词在搜索引擎上获得好的排名。
2.p标签
语义：段落的意思，段前段后有换行符
注意：p标签不能嵌套块级标签，如果嵌套了，浏览器解析时会自动将p标签截断成两个部分
3.无序列表ul
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
页面展示效果如下：
<ul style="list-style: none;">
<li>1li>
<li>2li>
ul>
页面展示效果如下：
list-style: none;表示的是清除li标签前面的圆点注意：ul的直接子级一定是li，不能出现其他的标签，
下面是错误的书写方法：
<ul>
<p>p>
<li>1li>
ul>
4.有序列表ol 该标签有两个重要属性1）type：表示列表显示的序号类型，类型可以有数字，英文字母（大小写都可以），罗马数字（I）
2）start：表示起始位置的下标，一定是个数字
例如：
<ol type="I" start="2">
<li>555li>
<li>333li>
<li>888li>
ol>
type="I" 表示的是使用的是罗马数字表示start="2" 表示的是起始的数字是从第二个数开始递增
页面展示效果如下：
注意：ul的直接子级一定时li，不能出现其他标签
<ol reversed="reversed" >
<li>555li>
<li>333li>
<li>888li>
ol>
reversed="reversed"：表示降序，将原有的顺序颠倒排序
页面展示效果如下
5.定义列表dl
<dl>
<dt>11dt>
<dd>达到dd>
dl>
页面展示效果如下：
6.格式化标签 pre
作用：被包含在pre标签中的文本通常会保留空格或换行符，且文本也会呈现一样大小的字体
<pre>
春晓
<strong>孟浩然 strong>
春眠不觉晓<sup>1sup>,
处处闻啼鸟<sub>2sub>。
<del>夜来风雨声,del>
<u>花落知多少?u>
pre>
strong标签为文字加粗标签sub标签为上标标签
sup标签为下标标签
del标签为删除标签
u标签为下划线标签
页面展示效果如下：
7.表格
1）普通表格
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名th>
<th>学号th>
<th>成绩th>
tr>
<tr>
<td>张三td>
<td>20150001td>
<td>98td>
tr>
<tr>
<td>王五td>
<td>20150002td>
<td>8td>
tr>
table>
border：单元格边框
cellspacing：单元格与单元格距离
cellpadding：内容与单元格边框线的距离
页面展示效果如下：
2）修改表格的大小
<table border="1px" cellspacing="0px" cellpadding="3px">
<tr>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<th>啊th>
<th>2th>
<tr>
<tr>
<td>的td>
<td>3td>
<tr>
<tr>
<td>个td>
<td>5td>
<tr>
table>
页面展示效果如下：
3)单元格行合并p>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名th>
<th rowspan="2">年龄th>
<th>学号th>
<th>成绩th>
tr>
<tr>
<td>啊td>
<td>2td>
<td>00td>
<td>3td>
</tr>
<tr>
<td>的td>
<td>3td>
<td>00td>
<td>3td>
</tr>
<tr>
<td>个td>
<td colspan="2">5td>
<td>00td>-->
<td>3td>
</tr>
<tr>
<td>了td>
<td>44td>
<td>00td>
<td>3td>
</tr>
table>
行合并：colspan 在要合并的标签使用 要删除本tr中的列
列合并：rowspan 在要合并的标签使用 要删除下一个tr标签里多余的列
页面展示效果如下：
8.form 表单
<form>
1)单行文本：
<input type="text" name="useman" id="" value="" placeholder="请输入用户名"/>
页面展示效果如下：
2)密码框：
<input type="password" name="password" id="" value=""/>
页面展示效果如下：
3)多行文本：
<textarea name="text" rows="4" cols="10">textarea>
页面展示效果如下：
4)单选按钮：
<input type="radio" name="sex" id="sex" value="男" />男
<input type="radio" name="sex" id="sexl" value="女" />女
页面展示效果如下：
5)多选按钮：
<input type="checkbox" name="fruit" id="fruit1" value="苹果" />苹果
<input type="checkbox" name="fruit" id="fruit2" value="梨" />梨
<input type="checkbox" name="fruit" id="fruit3" value="栗子" />栗子
<input type="checkbox" name="fruit" id="fruit4" value="橙子" />橙子
默认选择：iuput标签用 checked="checked"
select标签用 select="selected"
页面展示效果如下：
6)下拉列表
<select name="编程">
<option value="c++">c++option>
<option value="python" selected="python">pythonoption>
<option value="java">javaoption>
<option value="HTML5">HTML5option>
select>
<input type="submit" value="确定"/>
页面展示效果如下：
form>