HTML重温笔记（小白都看得懂的HTML笔记）

别急别急！我马上就来了！

导航

侧边栏

HTML重温笔记（小白都看得懂的HTML笔记）

作者：北熙宝宝@Hikurn_Xi时间：2022-08-06 23:39:45

基础的骨架

<!DOCTYPE html><!--设定HTML5编码-->
<html lang="en"><!--网页的HTML标识-->
<head><!--网站的头部-->
  <meta charset="UTF-8"><!--设定编码，告诉浏览器怎么解码，避免乱码。-->
  <meta name="keywords" content="1,2,3" /> <!--关键词-->
  <meta name="discription" content="123" /> <!--描述-->
  <title>Document</title><!--标题---->
</head>
<body><!--网站的body标识-->
</body>
</html>

标题HX部分

<h1>这是标题1</h1>
<h2>这是标题2</h2>
.....
<h6>这是标题6</h6><!-- 这里总共有6个，附带不同的大小的标题属性，也可以做层级包含关系的标题 -->
```

P表示段落，hr插入一个分隔线，br是换行的指令（hr和br属于自封）

不同的类型的东西的插入

<!--图片插入-->
<img src="你的图片地址" alt="替换的文字，一般用于图片无法正常加载才会显示的文字" tite="鼠标悬浮在图片上面的时候显示的文字">
<!--音频插入-->
<audio src="你的音频地址" controls></audio>
<!--这里的controls是是否显示播放控件可以删除不显示它，我们还可以加入autoplay/loop来实现自动播放/循环播放-->
<!--视频插入-->
<video  src="你的视频地址" controls></video>
<!--这里的controls是是否显示播放控件可以删除不显示它可以删除不显示它，我们还可以加入autoplay/loop来实现自动播放/循环播放，需要注意谷歌浏览器不支持自动播放，除非你加入一个muted可以实现静音播放-->
<!--插播一个，src相关的只是，如果我们是同级文件，用xxxx或者是./xxx即可，如果是下级用：文件夹名字/xxxx，如果是上级文件用：/xxx，不同级文件夹内的文件以此类推>

<!--表格插入-->
<table><!--表格标签，下面实现的2行3列的表格-->
	<tr><!--行-->
		<td></td><!--列-->
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
<!--特殊，如果你要表格上面弄个标题，你要在table这个标签里面加一个caption，如果你要第一行加粗，你把你要加粗的哪一行tr里面的td换成td即可-->
<!--默认是没有边框的，我们可以得通过border和width、hight来来给表格一些属性-->

列表相关

<!--无序列表-->
<ul><!--父，里面只能是li-->
	<li></li><!--子，无序里面的每一个项-->
	<li></li>
</ul>

<!--有序列表-->
<ol><!--父，里面只能是li-->
	<li></li><!--子，里面可以是任意类型内容-->
	<li></li>
</ol>

<!--自定义列表-->
<dl><!--父，里面可以用dt和dd-->
	<dt></dt><!--主题，不是必要，具体效果实现一下就知道了-->
	<dd></dd><!--你要排列的内容-->
	<dd></dd>
</dl>

<!--以上遇到前面有点啊什么的，要去掉，请使用CSS属性（list-style:none）去掉，没对齐也是用CSS来对齐-->
<!--如果我们想合并单元格，用rowspan或则是colspan来实现（分别是跨行合并/跨列合并）-->

网页中还有input相关的内容

<input type="text">这是文本框
<input type="password">这是密码框
<input type="radio">这是单选
<input type="checkbox">这是多选
<input type="file">这是文件上传
<input type="submit">这是提交按钮
<input type="reset">这是重置
<input type="button">这是一个按钮，一般我们用这个搭配js来使用

其中我们还可以加type属性，比如加placeholder是占位符，实现输入之前在框内可以显示一些提示。

在做选择的时候，我们单选的的时候一般会配合name=“xx”，有时候网页会有默认选择，可以用checked来实现。

文件上传的时候，我们要实现多个文件一起上传（默认是单个单个），我们得加一个multiple来实现。

submit、reset、button我们需要这个为表单控件的情况下才行，所以我们还需要在它整个前面加个父级from才行，我们可以用value=“”来定义要显示的按钮的文字。

我们的按钮也可以直接用button来实现，button后面可以接submit、reset、button来实现。

遇到注册等表单要制作的时候，我们用select来实现，内需要有option来表示有哪些选项，如果我们需要一个默认选择的（不设置默认第一个），需要搭配selected来实现。

<select>
	<option>选择1</option>
	<option>选择2</option>
	<option selected>选择3</option>
	<option>选择4</option>
</select>

文本输入框

<textarea></textarea>

虽然我们可以在里面用cols和raws来控制宽和行（高），但是实际开发中基本不这样。

有时候在做选择的时候，我们想不需要点按钮，点按钮旁边的字也可以实现点击，我们需要用到lable，有2个实现的办法。

<label><input type="radio" name="sex">女</label>
<input type="radio" name="sex" id="nan"><lable for="nan">男</lable>

div是一行一个的，span可以一行多个（默认情况，不考虑用浮动和定位）

我们常用的字符相关的是

我们开发手机端web的时候，常常用到。

hedaer、nav、footer、aside、section、article（头、导航、底部、侧边栏、区块、文章）

RSS订阅：全站订阅|订阅博文|订阅推文