HTML知识总结

HTML常用标签：
1、文本标题：
h1~h6，一个网页中只有一个h1

    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

2、段落文本：
段与段之间有段间距

<p>2222222222222</p>

3、换行

<p>云中谁寄锦书来？<br>
        雁字回时，月满西楼。</p>

4、水平线

---

属性：
宽度：width=””
水平线靠页面的哪边：align=””
颜色：color=””
水平线无阴影noshade=””

<hr color="green" width="600" align="left">
<hr noshade>

5、加粗：
常用strong,突出文本

<strong>强调的内容</strong>

6、倾斜：

 <em>强调文本</em>
 <i>倾斜文本</i>

7、删除线：

 <s>文本</s>
<del>文本</del>

8、下划线、下标、上标：

 <u>文本</u>下划线
 <sub></sub>下标
 <sup></sup>上标

9、div标签：
划分页面的区域，独占一行（无具体含义）

 <div>1111111内容</div>
 <div>111111111111内容</div>

10、span标签：
文本独立修饰时，内容有多宽，就占用多宽的距离

<h3>体育<span style="color: gray;">sports</span></h3>

效果： 图片1.png

1、列表：

l 有序列表
1、li里可以随意放标签，但ol里面只能放li
2、有序列表的数字是自动生成的
3、type:1,A,a,i,I
start:取值只能是一个数字

<ol type="a" start="3">

 <li>冰箱门打开</li>

 <li>大象放进去</li>

 <li>关门</li>

 </ol>

效果：

图片3.png
l 无序列表
1、li里可以随意放标签，但ul里面只能放li
2、默认是黑色实心圆
3、样式type：disc circle square none
快捷键：ul>li

 <ul type="disc">

 <li>11111</li>

 <li>11111</li>

 <li>11111</li>

 </ul>

效果： 图片2.png

l 自定义列表
快捷键：dl>dt{11111}+dd{2222}

 <dl>

 <dt>我是图片</dt>

 <dd>我是文字</dd>

 </dl>

2、图片标签：
src:路径
同级目录
1、油画.png
2、./油画.png 当前路径

 <img src="油画.png" >

 <img src="./油画.png">

 <img src="songimg/111.jpg" width="200px" height="200px">

不同级目录，若HTML文件在下一级，先跳出到上级文件夹在找目标文件

     <img src="../songimg/111.jpg">
    " ../../"为多级返回 

   <img src="油画1.png" alt="大河，请尝试刷新" title="这张图片描述了大河">

alt是图片不显示时候的提示信息

title是鼠标悬停上去之后的提示信息

3、超链接：

超链接——实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
target="_blank"——新窗口打开
target="_self"——默认值

 <a href="http://caniuse.com" target="_blank">百度</a>

4、表格：
（1） border表格外边框线
width： px,百分比（相对于父元素的百分比）
height: px,百分比
align：水平对齐：align="center"、right、left
bordercolor:边框颜色
bgcoloe:背景颜色
cellspacing:单元格之间的距离
cellpadding：单元格与内容间的距离
（2） 行tr属性
高度：height
背景颜色：bgcolor
文字水平对齐：align=left\right\center
文字垂直对齐：valign=top\middle\bottom
（3）单元格td属性
如果一个单元格设置了宽度，影响的是这一列的宽度
高度：height
宽度：width
背景颜色：bgcolor
文字水平对齐：align=left\right\center
文字垂直对齐：valign=top\middle\bottom

<table border="1" width="50%" height="300"

align="center" bordercolor="rad" bgcolor="yellow" 

cellspacing="20" cellpadding="10">

<tr bgcolor="orange" height="100" align="center" valign="top">

<td height="140" bgcolor="blue">1</td>

<td align="right" valign="middle">2</td>

</tr>

colspan=“ ” 所要合并的单元格的列数，加给td

rowspan=" " 所要合并的单元格的行数

<table border="1" width="500" height="300">

 <tr>

 <td>猫</td>

 <td colspan="2">狗</td>

 <!-- <td>鸡</td> -->

 </tr>

 <tr>

 <td colspan="2">猪</td>

 <!-- <td>狼</td> -->

 <td rowspan="2">鸭</td>

 </tr>

 <tr>

 <td>猴子</td>

 <td>长颈鹿</td>

 <!-- <td>蛇</td> -->

 </tr>

             </table>

11、表单

表单标签：收集用户信息

 <form action="http://www.baidu.com" method="post"><!--默认get-->

                用户信息：<input type="text" placeholder="请输入用户名" name="username">

 <!--文本框   name="username"自定义，发送到服务器时会显现-->

 <br>

                密码：<input type="password" placeholder="请输入密码" name="mima">

 <br>

 <input type="submit" value="登录">

 <!-- 提交信息到action指定的地址 -->

 <button type="submit">登录</button>

 <input type="reset" value="重新输入">

 <button type="reset" >重新输入！</button>

 <input type="button" value="aaaaaa">

 </form>