HTML重温笔记(小白都看得懂的HTML笔记)

发布于 2022-08-06  109 次阅读


基础的骨架

<!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(头、导航、底部、侧边栏、区块、文章)