1.骨架.html
<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 注释快捷键：ctrl+/ -->
我是一段文字
</body>
</html>
2.标题标签：
<body>
<!-- h1~h6 逐级减小 独占一行-->
<h1>我是一个标题</h1>
<h2>我是一个标题</h2>
<h3>我是一个标题</h3>
<h4>我是一个标题</h4>
<h5>我是一个标题</h5>
<h6>我是一个标题</h6>
</body>
3. <!-- 段落标签 <p> --> <p>---</p >
4.文本格式化标签：<b>--</b>和<strong>--</strong> 加租 <em>--</em> 和<i>--</i>倾斜 x<sub>2</sub> 显示为x2 这个2在下
x<sup>2</sup> 显示为x2 这个2在上
<del>--</del>和<s>--</s> 删除 在原来的字的中间加一个横线 <ins>999</ins> 下划线 就是在999下面加一个横线
5.换行和水平线标签：<br />换行
<hr /> 加一条水平线
6：图片：<body>
<!-- src 指向图片地址的 alt：图片地址发生错误时，用来对图片进行提示的 title：鼠标悬停时，显示的文字 align:设置图片与文字的对齐方式的-->
< img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center">
</body>
7：路径： <!--
相对路径
../返回上一级
./ 当前级
-->
< img src="../灰太狼.jpg" align="center">磁带库农村的课程的教材你
< img src="./bg03.jpg">
8：视频：<video src="images/video.mp4" controls="controls" loop="loop" autoplay muted></video>
9.音频：<audio src="images/music.mp3" controls loop></audio>
10：超链接：
<body>
<!-- target 控制链接打开方式 -->
<a href=" " target="_blank">点击我进行跳转</a >
<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8781526532986121071%22%7D&n_type=-1&p_from=-1"
target="_blank">去百度</a >
</body>`
11：图片超链接:<body>
< img src="images/cat.gif" alt="">
</body>
12：锚链接： <!-- id 身份证号 一个元素只能有一个id 同一网页内，id不能相同 -->
<a href=" ">去h1那里</a > 点击后进行跳转
13：特殊字符：<p> </p > 空格 >-->为>
¥-->为¥
©-->为©
14：有序列表：<ol type="A">
<li>椒麻鸡
<a href=" ">去百度</a >
< img src="images/cat.gif" alt="">
</li>
<li>榴莲</li>
<li>螺蛳粉</li>
</ol>
15：无序列表：
<body>
你喜欢的明星是：
<ul type="square">
<li>梁朝伟</li>
<li>蔡徐坤</li>
<li>黄子韬</li>
<li>周杰伦</li>
</ul>
</body>
16：自定义列表：<body>
<dl>
<dt>线下门店</dt>
<dd>web之家</dd>
<dd>服务网点</dd>
<dd>web之家</dd>
</dl>
</body>
17：框架：
<body>
这个时候他们会变得有些沉默，但是这并不是代表他们没有社交的能力，而是他们不想再逢场作戏。
<!-- <iframe src="https://www.taobao.com" frameborder="1" width="800px" height="600px"></iframe>
<iframe src="./08-视频.html" frameborder="1" width="800px" height="600px"></iframe> -->
<a href=" " target="nn">点击我进入淘宝</a >
<iframe name="nn" frameborder="0" width="800px" height="400px"></iframe>
</body>
19.表单：
<body>
<form action="#">
<!-- placeholder 提示词 -->
账户：<input type="text" name="userName" autocomplete="off" >
<br>
密码：<input type="password" name="one" maxlength="6" hr>
<br>
性别： <input type="radio" name="r1" value="男">男
<input type="radio" name="r1" value="女" checked>女
<br>
爱好：
<input type="checkbox" name="love" value="smoke" checked>抽烟
<input type="checkbox" name="love" value="drink">喝酒
<input type="checkbox" name="love" value="perm">烫头
<br>
</select>
<!-- maxlength 最大长度 -->
其他：
<textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"></textarea>
<br>
籍贯：
<select name="xiala" id="" >
<option value="广东省">广东省</option>
<option value="四川省" selected>四川省</option>
<option value="陕西省">陕西省</option>
<br>
<input type="submit" value="确认">
<input type="reset" name="重置" id="" >
<input type="button" value="检测账户是否被注册" id="">
<button>提交</button>
</form>
</body>
20：label标签：
<body>
<form action="#">
<!-- 1、 -->
<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
<!-- 2 -->
<label> 爱跳舞<input type="checkbox" name="love" id=""></label>
</form>
</body>
21：表单：
<body>
<!-- 1、所有表单必须有name属性
2、所有表单包含在form
3、单选、多选必须有value值 -->
<form action="#">
<fieldset>
<legend>主要内容</legend>
用户名:<input type="text" name="useName" maxlength="4" value="">
密码: <input type="password" name="pwd">
<input type="email" name="eil">
</fieldset>
<br>
<label> <input type="radio" name="sex" value="nan">男</label>
<input type="radio" name="sex" value="nv" id="one"><label for="one">女</label>
<input type="hidden" name="hid">
<input type="reset" disabled="">
<button>提交</button>
</form>
</body>
22.表格：
<body>
<!-- table：cellspacing:单元格与的单元格之间的间距 width:设置宽度 height：设置高度的（thead、tfoot不改变） 只是高度的底线-->
<!-- tr\tbody\tfoot属性一样 -->
<table border="1px" cellspacing="0" width="800px" height="500px">
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr>
<th width="">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="400px" align="center" valign="middle">
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
<tr>
<td>白华林</td>
<td>男</td>
<td>21</td>
<td>汉</td>
<td>团员</td>
</tr>
<tr>
<td>张毅</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
23.单元格合并：<td rowspan="2"></td> 两行合并 <td colspan="3"></td> 三列合并
24.无语义标签：<!-- div 独占一行 -->
<div>我是一个盒子</div>
<!-- span 一行多个 -->
<span>我是一个小容器</span>
25.元素显示模式： <!-- 元素显示模式：
块元素：独占一行，宽、高、内外边距可以设置 div h1~h6 li
行内元素：一行多个，宽高、内外边距设置无效 span a
行内块元素：可以一行多个，还可以设置宽高、内外边距 img
-->
26.h5新标签：
<body>
<nav>
</nav>
<header>
</header>
<article>
<section></section>
</article>
<footer>
</footer>
<details>
<summary>点击我查看详情</summary>
你小子，被骗了
</details>
</body>
26.全局属性：
<body>
<!-- id: 同一个页面id值不能重复 一个元素只能有一个id名
除了: body html head script style -->
<div id="box1"></div>
<a href=" " id="a1"></a >
<!-- class: 分类 配合层叠样式表
一个网页中可以有多个类名相同的元素，一个元素可以有多个类名
-->
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>
<a href="#" class="a1"></a >
<!-- title ：鼠标悬停时，提示词-->
< img src="../../day1/灰太狼.jpg" alt="" title="我是一个灰太狼">
<div title="你中奖了，小可爱~">我是盒子</div>
<a href="#" title="恭喜你，上天了">去云端</a >
<!-- tabindex : 正数 负数 0 -->
<input type="text" name="ux" id="">
<a href="#"> dicdncd </a >
<div title="你中奖了，小可爱~" tabindex="1">我是盒子</div>
<div title="你中奖了，小可爱~" tabindex="2">我是盒子</div>
<!--spellcheck:拼写检查 true false -->
<input type="text" spellcheck="false">
<!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 -->
<form action="#">
<input type="text" name="user" id="">
<button accesskey="l">提交</button>
</form>
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true false-->
<div contenteditable="true">我是一个不允许编辑的盒子</div>
<!-- dir -->
<div dir="rtl">我是一个不允许编辑的盒子</div>
<!-- hidden -->
<div hidden>我是一个不允许编辑的盒子cdcdcd</div>
<a href="#" hidden>cdjcdj</a >
</body>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
