导航

遇见美好的明天,书写最棒的故事~

侧边栏
最新评论
北熙宝宝@Hikurn_Xi
2024-08-11 17:33
@广树:(╯‵□′)╯︵┴─┴
松鼠大大
2024-08-10 17:39
😂惨兮兮北熙,╮( •́ω•̀ )╭
广树
2024-08-10 17:08
下一步,进入腾讯域名黑名单
北熙宝宝@Hikurn_Xi
2024-07-29 13:31
@寒寒:那你考虑过cloudflare的网络情况么?很大的话获取到一半超时获取失败...另外在目前的情况下,我觉得不支持webp的设备和终端软件都可以被淘汰了,不应该我去做向下兼容,也不在我的网站的服务群体内。【兼容性参照: https://caniuse.com/webp,除去IE和很久的,基本都兼容了】
寒寒
2024-07-29 13:17
不过话说…… 既然都用CF了,OSS的出口流量只要配置了CF代理就是免费的呀…还在乎什么流量 寒寒相比起来,还是更在意webp的兼容性 所以就算用webp也最好有一个png/jpg fallback
寒寒
2024-07-29 13:14
恭喜北熙宝宝~~ 终于搞定了吗?
北熙宝宝@Hikurn_Xi
2024-07-23 20:53
@小满1221:欢迎来到女子寮!你的标准房开好了~请入住~
北熙宝宝@Hikurn_Xi
2024-07-23 20:47
@小满1221:|´・ω・)ノ我就用了一点点itdog的那个屏蔽测速脚本
小满1221
2024-07-23 11:04
我解决了,没事儿了
小满1221
2024-07-23 10:47
我去佬,我把我自己博客快速测试测死力,负载4000%多,求教程(´இ皿இ`)
谷歌广告

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