HTML基础学习笔记（vscode)
发布时间
阅读量：
阅读量
整体结构：
<!--1.这是html的注释
4. 2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0
6. 3.HTML不区分大小写，语法松散不严格
8. -->
<!DOCTYPE html>
<!-- 根 -->
<html lang="en">
<!-- 头 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题，显示在网页左上角 -->
<title>标签</title>
</head>
<!-- 体 -->
<body>
</body>
</html>
AI写代码 <!-- h${$级标题}*6 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
AI写代码 <p>
2010 年以来，机构在昆明市五华区普吉街下属的城中村社区中发现很多单亲、孤儿、
残疾等类型家庭。这些家庭缺乏传统的家庭、家族和社区的支持，也缺少城市居民相应的社
会福利。
</p>
<p>
其中一位案主小浩（化名），今年 4 岁，母亲离家出走，父亲为了工作，不得不把孩子
锁在家中，吃喝拉撒全在屋内。社工发掘小浩的情况时，他严重营养不良，语言发展迟缓（4
岁还不会说话）。
</p>
AI写代码 <a href="http://www.baidu.com" target="_blank">跳转至百度</a>
<a href="http://www.mi.com">跳转至小米</a>
<a href="./联系/联系.html">跳转至miniso联系</a>
<a href="联系/联系.html">跳转至miniso联系</a>
AI写代码 <a href="#bottom">回到底部</a>
<a href="#ten">跳转至段落10</a>
<a href="#fifteen">跳转至段落15</a>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<!-- 设置id属性,给当前的标签添加一个id名
id名是标识符 避开保留字或关键字(身份证号)
-->
<p id="ten">段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p id="fifteen">段落15</p>
<p>段落16</p>
<p>段落17</p>
<p>段落18</p>
<p>段落19</p>
<p>段落20</p>
<a href="#" id="bottom">回到顶部</a>
AI写代码 <img width="20%" title="这是一张图片" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F11%2F20200311182914_daqfx.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640763114&t=e28065e3f00037e1666666ec14b5bbff" alt="">
<img width="100px" title="这是miniso的logo" src="./联系/logo.ico" alt="">
AI写代码 <div>我是div标签</div>
<div>我也是div标签</div>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
AI写代码 <p>新华社内罗毕11月28日 <br>电（记者朱绍斌）中非合作论坛第八届部长级会议将</p>
AI写代码 <hr width="800px">
AI写代码 <pre>
lunbo.onmouseenter = function () {
// 清除定时器
clearInterval(timer);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体</b>
<i>斜体</i>
<!-- 右上角，10的平方 -->
10<sup>2</sup>
<!-- 右下角 -->
10<sub>m</sub>
<font color="blue" size="50">字体标签</font>
AI写代码 <ol>
<li>语文</li>
<li>数学
<ol>
<li>高数</li>
<li>线代</li>
<li>概率论</li>
</ol>
</li>
<li>英语</li>
</ol>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>大枣</li>
<li>
<ul>
<li>b-1</li>
<li>b-2</li>
<li>
<ul>
<li>c-1</li>
<li>c-2</li>
</ul>
</li>
</ul>
</li>
</ul>
AI写代码 <ul style="list-style: none;" >
<li>
<img width="100px" src="./img/三国演义.jpg" alt="">
<b>三国演义</b>
<p>这是三国演义的简介。。。。。。</p>
</li>
<li>
<img width="100px" src="./img/西游记.jpg" alt="">
<b>西游记</b>
<p>这是西游记。。。</p>
</li>
<li>
<img width="100px" src="./img/水浒传.jpg" alt="">
<b>水浒传</b>
<p>水浒传balabala</p>
</li>
<li>
<img width="100px" src="./img/红楼梦.jpg" alt="">
<b>红楼梦</b>
<p>红楼梦。。。。。。</p>
</li>
</ul>
AI写代码 <table border="1px" width="200px" height="100px" cellspacing="0">
<thead>
<tr>
<th>a</th>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
AI写代码 <table border="1px" width="200px" height="100px" cellspacing="0">
<thead>
<tr>
<th colspan="3">abc</th>
<!-- <td>b</td>
<td>c</td> -->
</tr>
</thead>
<tbody>
<tr align="center">
<td colspan="2">12</td>
<!-- <td>2</td> -->
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<!-- <td>6</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
AI写代码ac
<span>a<b>c</b></span>
AI写代码 <form action="" method="post">
<!-- 输入框 type="text"-->
<!-- 要传输用户的输入内容 就必须设置name值 -->
<!-- placeholder：占位符 -->
<!-- value：用户的输入内容 -->
姓名：<input type="text" name="user" placeholder="请输入姓名">
<br>
<br>
<!-- 密码框 type="password"-->
密码：<input type="password" name="password">
<br>
<br>
<!-- 单选框 type="radio"-->
<!-- checked="true" 默认选中 -->
性别：
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0">女
<input type="radio" name="gender" value="secret" checked>保密
<br>
<br>
<!-- 多选框 type="checkbox" -->
爱好：
<input type="checkbox" name="hobby" value="math" checked>数学
<input type="checkbox" name="hobby" value="english">英语
<input type="checkbox" name="hobby" value="physics">物理
<br>
<br>
<!-- 下拉框 -->
<!-- disabled="true"：禁选项 disabled -->
<!-- selected="true":下拉框的默认选项 selected -->
城市：
<select name="city">
<option value="cd" disabled selected>请选择</option>
<option value="cd">成都</option>
<option value="my">绵阳</option>
<option value="dy">德阳</option>
</select>
<br>
<br>
<!-- 提交按钮 type="submit"-->
<input type="submit" value="登录">
<!-- 重置按钮 type="reset"-->
<input type="reset">
</form>
AI写代码 <form action="" method="post">
姓名：
<input type="text" name="userid">
<br>
年龄：
<input type="text" name="age" pattern="^\d{2}">
<br>
密码：
<input type="password" name="MM">
<br>
性别：
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0" checked>女
<br>
兴趣：
<input type="checkbox" name="interest" value="sing">唱歌
<input type="checkbox" name="interest" value="dance">跳舞
<input type="checkbox" name="interest" value="run">跑步
<input type="checkbox" name="interest" value="read">阅读
<br>
学历：
<select name="XL" id="">
<option value="" selected disabled>请选择</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="gz">高中</option>
<option value="cz">初中</option>
</select>
<br>
简介：
<textarea name="introduction" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="注册">
<input type="reset">
</form>
AI写代码全部评论 (0)
还没有任何评论哟~