持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，10月更文诚意加码，激发写作潜力｜掘金·日新计划 - 掘金 (juejin.cn)点击查看活动详情

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>

<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、li里可以随意放标签，但ol里面只能放li

2、有序列表的数字是自动生成的

3、type:1,A,a,i,I

start:取值只能是一个数字

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

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

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

 <li>关门</li>

 </ol>

无序列表

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>

自定义列表

快捷键：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、超链接：

超链接——实现不同页面的跳转

target="_blank"——新窗口打开

target="_self"——默认值

<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>  ```

 <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>