标签：web HTML 编码 -- 标签 笔记 html nbsp
目录
5.标签、超链接
1、html定义
2、HTML文档展示
代码解释：
1）<!DOCTYPE html>
声明/告诉 浏览器：以下 文档/代码 为html 代码
@<~~~~>为开始标签 </~~~~>为结束标签
2）HTML头部<head>标签
里边定义一些元信息（描述信息的信息<给浏览器看的>），给浏览器/搜索引擎 看的 读者看的内容多在<body>里
3）<meta charset="utf-8">
meta表示标签，charset表示标签属性名， = “（属性值）”
代码含义：表示浏览器在进行渲染时要用“utf-8”编码显示（因为写代码时用的编码形式为utf-8）确保不会出现乱码
4）<!--注释内容（浏览器渲染时不会显示出来）-->
5）<meta keywords=“微信，即使通讯”> 标签含义：搜索引擎中的关键字
注意：
1）<html> <head>开始结束标签是必须写的
2）代码（此时为txt文本形式）用记事本打开可能会出现乱码，此处用Notepad++打开，语言选择H--->HTML(方便检查）
3.HTML展示步骤
1）将txt后缀改为html（用浏览器打开）
左上角为文档标题
2）查看源代码
2.video标签
不使用flash愿意：手机发烫、安全性问题
3.下载资源及audio标签
<audio controls>
<!--audio:音频-->
<source src="test.mp3">
<!--不能加type="mp3/m4a"，否则不能播放-->
您的浏览器不支持audio标签
</audio>4.img标签
<img src="好看1/1.png">
<!--当前目录的好看1文件夹中的1.png图片-->
<img src="../好看1/1.png">
<!--当前目录的好看1文件夹上一层文件夹中的1.png图片(每上一层多一个../)-->
<img src="https://img1.baidu.com/it/u=2285020071,1228316245&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=341">
<!--原文件为网址链接时，若链接没有图片后缀，不用自己添加-->
<img src="C:\Users\13912\Desktop/hei.jpg">
<!--绝对路径-->
<!--原图片直接复制路径（要补充图片名）则为\，如果在windows下建议用\\，或者用/代替正\-->
<!--<img src="C:/Users/13912/Desktop/hei.jpg">-->
<!--还可以加上协议：<img src="file:\\\C:\Users\13912\Desktop/hei.jpg">，file：\\表示协议名-->
<!--直接用html携带图片方法：图片转base64,缺点：图片不易维护、修改-->5.<a>标签、超链接
<a href="https://kannikanyun.github.io">点我跳转Kanyun's Blog</a>
<!--href:超文本引用、超链接地址指向（hypertext reference<参考、引用>-->
<br>
<br>
<a href="https://kannikanyun.github.io" target="_blank">点我跳转Kanyun's Blog</a>
<!--
arget的所有取值以及它们的含义：
_blank：在新窗口中打开；
_self：默认。在相同的框架中打开；
_parent：在父框架集中打开；
_top：在整个窗口中打开；
-->
<br>
<br>
<a href="C:\Users\13912\Desktop\html学习\笔记文件\target測試\白.html">点我跳转白.html</a>
<br>
<br>
<a href="C:\Users\13912\Desktop\html学习\笔记文件\target測試\白.html" target="_blank">点我跳转白.html</a>
<!--使用时注意路径选择-->
<!--
-->
<br>
<br>
<a href="mailto:1391205637@qq.com">点我弹出邮箱客户端发送邮件</a>
<!--mailto后可以写更多参数-->
<br>
<br>
<a href="javascript:alert('别灰心')">点我试试看</a>
<!--在javascript中，alert的用法是“alert(在对话框中显示的纯文本)”。-->
<br>
<br>
<!--
-->
<!--锚标记-->
<a href="#标记">点我</a>
<br>
<br>
<div id="标记1">定位到这里1</div>
<!--
在网址后跟 #标记 ，则自动定位到该标记所在位置
-->
<br>
<br>
<div id="标记" style="position: absolute; top: 9000px;">通过”点我“您来到了这里</div>
<!--div可理解为：显示文本标签，“position：absolute”是绝对定位的意思，
单纯的使用absolute属性并不会其效果，
需要配合“top bottom left right ”属性才能看到效果。
-->6：h标签
<h1>第1句话</h1>
<h2>第2句话</h2>
<h3>第3句话</h3>
<h4>第4句话</h4>
<h5>第5句话</h5>
<h6>第6句话</h6>
<h7>第7句话</h7>
<!--
h后的数字超过6后，文本均为普通文本
-->
<br>
<br>7：meta标签
<!--
6：meta标签之keywords：为文档定义了一组关键字，某些搜索引擎在遇到这些关键字时，
会用这些关键字对网站的网页进行分类
-->
<meta name="keywords" content="嘻嘻哈哈，数码宝贝，世界值得">
<!--
7：meta标签之description
对网站页面进行描述，方便搜索引擎展示给用户，使用户了解网站性质
-->
<meta name="description" content="你才这个网站是干嘛的？">8：div标签:
<!--
8:div标签:用来控制、布局的，包裹文本或别的标签
每一个div标签会自动换行
-->
<div style="color: aqua;">看看我的颜色吧</div>
<br>9:span标签
<!--
9:span标签:用来控制、布局的，包裹文本或别的标签
每一个div标签不会会自动换行
-->
<span style="color: red">我是小红</span>
<!--转义字符：表示英文空格-->
<br />
<br />
<!--<br/>标签标准写法，（无开始和结束的标签后可以加上/-->10：pre标签
<!--
10：pre标签：pre 元素可定义预格式化的文本。
被包围在 pre 元素中的文本通常会保留空格和换行符。
-->
<pre>
你 不知道 你，
所以 你 是你。
</pre>11：p标签
<!--
11：p标签：表示段落（自动换行且间距大
-->
<p>
《悟》
<p>
<br />
悟道休言天命，
<br />
修行勿取真经。
<br />
一悲一喜一枯荣，
<br />
哪个前生注定？
<br />
</p>
<p>
袈裟本无清净，
<br />
红尘不染性空。
<br />
幽幽古刹千年钟，
<br />
都是痴人说梦。
</p>
<br />
12：center标签
<!--
12：center标签：使内容水平居中
-->
<center>
<div>修为成佛，在求。</div>
<div>悟为明性，在知。</div>
<div>修行以行制性，悟道以性施行，觉者由心生律，修者以律制心。</div>
<div>不落恶果者有信无证，住因住果、住念住心，如是生灭。</div>
<div>不昧因果者无住而住，无欲无不欲，无戒无不戒，如是涅槃。</div>
</center>
<br />
13：form（形式、表格、表单）标签
<!--
13：form（形式、表格、表单）标签
-->
<input type="text" value="此处输入不会提交奥">
<br />
<br />
<input type="text" placeholder="占位文本且不提交">
<br />
<br />
<!--placeholder:n,占位符、占位文本-->
<input type="button" value="我只是一个按钮">
<br />
<br />
<input type="submit" value="我是一个可以提交的按钮（如果在form表单中的话,haha)">
<!--
如果在form表单中：submit按钮可以将所有输入内容都提交给服务器
如果是button按钮，则需要给button重新定义一个事件
-->
<br />
<br />
<button>我是一个单纯的按钮类型</button>
<br />
<br />
<!--
在url中能看到的方式传参：get传参（我们的值通过http协议传给服务器）
-->
<!--
https://www.baidu.com/s?wd=我爱的人
？前为url，？后为参数、参数之间用&分隔
wd――查询的关键词(Keyword)
-->
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<input type="submit" value="点我提交内容到百度">
</form>
<!--
eage的url关键字参数为wd，所以要用name=”wd”
target可要可不要
-->
<br />
<br />
<pre>
用户名： <input type="text"/>
<br/>
用户密码：<input type="password"/>
<!--如果password中有值，则可以F12源代码中Elements中将password修改为text
（源代码经浏览器渲染后，内存里的代码的一个状态《动态执行后的代码》
如果直接右键，则显示的是真正源代码-->
</pre>
<br/>
<br/>
<input type="hidden" value="能看到我吗?">
<!--
隐藏域
注重功能能上的使用，却又不想让用户看到的参数
-->
<br/>
<br/>
<input type="hidden" type="text" value="看不到我吧"/>
<!--
html中：当属性冲突时会以第一个为准
-->
<br/>14：单选、复选、下拉、上传标签
<!--
14：单选、复选、下拉、上传标签
-->
<!--checkbox标签：复选框
复选框用的value 指的是这个复选框的值
-->
<input type="checkbox"/>何必再说
<input type="checkbox"/>看你看云
<input type="checkbox"/>忘了那片海
<br/>
<br/>
<!--radio标签：单选框
单选框用的value 和复选框一样
在后台如果你想得到复选框的内容 就是value 来取
当你在接收表单数据的页面中获取数据时，
得到的就是value的值
-->
<!--单选框情况1-->
请选择：
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="1" />女
</br>
</br>
请选择：
<!--单选框情况2-->
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<br/>
<br/>
<!--单选框情况3:默认选择一个-->
默认选择一个1
<input type="radio" name="a" />男
<!--此方法失效，不清楚原因@_@
问题解决：各组选项之间name不能相同
-->
<input type="radio" name="a" checked/>女
<br/>
<br/>
默认选择一个2
<!--单选框情况4:默认选择一个-->
<input type="radio" name="b" checked="true"/>男
<input type="radio" name="b" />女
<!--单选框情况3:默认选择一个-->
<br/>
<br/>
默认选择一个3
<input type="radio" name="c"/>男
<input type="radio" name="c" checked="checked"/>女
<br/>
<br/>
<!--下拉框/（标签）select
选项给浏览者看的
给计算机看的是value中的值
-->
<select>
<option>--请选择--</option>
<option value="1">葡萄</option>
<option value="橘子">橘子</option>
<option>香蕉</option>
<option>柠檬</option>
<option>香水</option>
</select>
<br/>
<br/>
<!--文本域textarea
rows：行数（即高度）
cols：列数（即宽度）
-->
<textarea rows="1" cols="50">
你是朵夜云，在我梦幻的天空浮泛
</textarea>
<br/>
<br/>
<!--上传标签file-->
<input type="file">
<br/>
<br/>15：u标签
<!--15：u标签-->
<ul>
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>
<ul type="circle">
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>
<ul type="disc">
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>16：table（表格）标签
<!--16：table（表格）标签
table：（桌子）、表格
border：边框（像素为1？）
thead：表格头
tr：表格行
th：表格头中的列
td：表格列
colspan：标签属性（合并列《跨列数》）数字为合并的列数
rowspan：合并行（跨行数）
align：对齐
提示：外层标签（head、body、foot）可以不要，效果一样
-->
<table border="1">
<thead>
<tr>
<th colspan="2" align="center">理想与现实的距离</td>
</tr>
</thead>
<tbody>
<tr>
<th>理想</th>
<th>当下</th>
</tr>
<tr>
<td>距离</td>
<td>little</td>
</tr>
<tr>
<td>时间</td>
<td>little</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>求和</td>
<td>max</td>
</tr>
</tfoot>17:frameset（框架页）标签
<!doctype html>
<!--文档类型声明 html-->
<html>
<!--17：frameset标签
frameset:n.框架型 框架的 框架页 框架集
frame：n. 框架，边框；
-->
<!----混合框架---->
<frameset rows="50%,50%">
<frame src="frame框架1.html"></frame>
<frameset cols="50%,50%">
<frame src="frame框架2.html"></frame>
<frame src="frame框架3.html"></frame>
</frameset>
</frameset>
</html>18：iframe（n. 内嵌框架；内联框架）标签
<!--
18：iframe（n. 内嵌框架；内联框架）标签
作用：在当前页面中嵌套
src中可以是：图片、html、网址等....
1:vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
2:vw就是当前屏幕宽度的1%
3:scorlling:n、v：滚动、卷动
注意：一些老的浏览器不支持iframe
如果得不到支持，iframe是不可见的
-->
<br/>
<br/>
<iframe src="https://www.4399.com/" style="width: 100vw; height:100vh" frameborder="0" scorlling="no"></iframe>
<!--
<iframe src="https://www.baidu.com" style="width: 100vw; height:100vh frameborder="0" scorlling="no";></iframe>
这个网站不能嵌入，尚未解决（请求被拒绝）
-->
我在iframe之外奥
<br/>
<br/>19:属性
<!--
19:属性
每一个html标签，都有自己的属性，通过设置属性的值，达到想要的外观或功能性效果
当然，也可以在标签上通过name="value"的方式写自定义的属性，以共自己调用
常见的属性；
width、height、id（唯一,相当于给每一个标签起唯一的一个标识）、name（可相同）、
src（img、iframe等标签中）、value（值）、type、align（文本对齐方式）
-->20:hr标签（横线）
<!--
20:hr标签（横线）
-->
下面有一条横线
<hr>
滴
<hr>
上面也有一条横线
<br/>
<br/>21:html实体编码、转义、特殊符号
<!--
21:html实体编码、转义、特殊符号
-->
M<sup>2</sup>
<pre>HTML特殊转义字符对照表</pre>
https://tool.oschina.net/commons?type=2
<pre>HTML 中有用的字符实体</pre>
https://www.w3school.com.cn/html/html_entities.asp
<pre>URL 编码参考手册</pre>
https://www.runoob.com/tags/html-urlencode.html
<pre>URL 汉字转html实体符号 中文转&#开头的字符编码</pre>
https://seo.juziseo.com/tools/entity/ html实体编码
<h1 style="color: lawngreen;" align="center">html see you soon</h1>
标签：web,HTML,编码,--,标签,笔记,html,nbsp 来源： https://blog.csdn.net/weixin_63957412/article/details/122772200
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。