HTML:超文本标记语言
HyperText Markup Language
一种用于创建网页的标准标记语言
HTML 运行在浏览器上，由浏览器来解析。
https://www.runoob.com/html/html-tutorial.html
1.格式
中文测试。。。。 这里是测试body测试内容。。。
声明为 HTML5（最新的HTML标准）文档 告诉浏览器按照标准模式进行解析渲染页面，有助于浏览器中正确显示网页
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
元素描述了文档的标题<br /> 元素包含了可见的页面内容</p>
<p>2.<a href="http://www.csdndoc.com/tag/bq" title="View all posts in 标签" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">标签</a> 在body内<br /> HTML 标记标签通常被称为 HTML 标签 (HTML tag)。<br /> HTML 标签是由尖括号包围的关键词，比如 <br /> HTML 标签大部分是成对出现的，比如 <b> 和 </b>，还有少部分为单标签，比如</p>
<hr> 标签对中的第一个标签是开始标签，第二个标签是结束标签<br /> 开始和结束标签也被称为开放标签和闭合标签<br /> <br /> <br /> </p>
<h1></h1>
<p>双标签 标题 ，加粗，换行 1-6 ---》小<br /> </p>
<p> 双标签 段落，有换行功效<br /> </p>
<hr> 单标签 左到右分割符(横线)<br /> <!-- -->注释</p>
<p>3.元素的<a href="http://www.csdndoc.com/tag/sx-2" title="View all posts in 属性" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">属性</a><br /> 给元素提供附件信息，大部分的元素属性<br /> 属性一般描述于开始标签<br /> 属性总是以\"名称=值对\"的形式出现，比如：name=\"value\"。<br /> 语法：<br /> 1) bgcolor ，body的属性设置网页的背景色<br /> <br /> 2）background body的属性设置网页的背景图片<br /> <br /> 3）align属性 值： left，right，center<br />4.文本元素属性<br /> b 元素 <b>内容</b> 加粗<br /> br 换行<br /> <br /> i元素， 字体倾斜<i></i><br /> del元素 删除文字<del></del><br /> strong 强调一段文字，效果类似 b标签<br /> ins元素，插入文字（下划线<ins></ins>）<br /> small元素， 超小字体<small></small><br /> sub 下标<sub></sub><br /> sup 上标<sup></sup><br /> <br />h<sub>2</sub>0<br /> <br />100m<sup>2</sup></p>
<p>5、img 单标签<br /> <img src="url" alt="some_text"><br /> src 图像来源<br /> alt 如果不能正确打开，显示的替换文字<br /> width, height<br /> <img src="abc.jpg" alt="自学嵌入式 day37 HTML" alt="美女" width="50" height="60"> <br /> <img src="abc.jpg" alt="自学嵌入式 day37 HTML" alt="美女" width="50%" height="200%"><br /> 百分比是相对于网页而言的， 高度百分比无效的</p>
<p>   空格</p>
<p>6、超链接<br /> 5种形式<br /> 基本语法<br /> <a href="url">链接文本</a><br /> 1.链接外部网站<br /> 2.链接本地文件<br /> 3.图片链接<br /> 4.电子邮件链接打开电子邮件<br /> 5.下载文件链接</p>
<p><a href="http://www.baidu.com">baidu</a><br /> <br /><a href="1.html">链接文件</a><br /> <br /><a href="1.html"><img src="abc.jpg" alt="自学嵌入式 day37 HTML"></a><br /> <br /><a href="mailto:123@13.com">发送邮件</a><br /> <br /><a href="abc.jpg" title="自学嵌入式 day37 HTML" class="swipebox">下载</a><br /> <br /> 上面的方法在打开新网页时，老的网页会关闭<br /> target 属性<br /> _self :当前位置打开 默认值<br /> _blank 新窗口中打开<br /> <a href="http://www.baidu.com" target="_blank">baidu</a></p>
<p> <br />7、列表<br /> 1）有序列表，<br /> 2）无需序列<br /> 3）自定义列表<br /> <br /> 1）无序列表 前面无数字<br /> </p>
<ul type="square"> </p>
<li>列表1</li>
<p> </p>
<li>列表2</li>
<p> </p>
<li>列表3</li>
<p> </p>
<li>列表4</li>
<p> </ul>
<p> type属性 文字最前面的符号<br /> disc 黑色实心圆<br /> circle 白色空心圆<br /> square 黑色方块<br /> <br /> 2）有序列表，前面有数字</p>
<p> </p>
<ol> </p>
<li>列表1</li>
<p> </p>
<li>列表2</li>
<p> </p>
<li>列表3</li>
<p> </p>
<li>列表4</li>
<p> </ol>
<p> 其中可以放文字，图片，或链接<br /> 有type属性，设置排序使用什么数字<br /> a 表示小写英文字母编号<br /> A 表示大写英文字母编号<br /> i 表示小写罗马数字编号<br /> I 表示大写罗马数字编号<br /> 1 表示数字编号（默认）</p>
<p>8、表格的构成，<br /> table，外框<br /> tr 行<br /> td 列<br /> </p>
<table border="1"> </p>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<p> </p>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<p> </p>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<p> </table>
<p> 3行 3列<br /> 表格的属性<br /> border 边框粗细<br /> th,是tr的属性，列标题，自动居中，加粗（和tr用法一样）<br /> colspan，横向合并单元格，需要 整形参数<br /> </p>
<tr>
<th colspan="3">name</th>
</tr>
<p> <br /> <br /> 表格的合并<br /> rowspan ,列项合并，整数参数</p>
<p> <br />9、表单 传递参数，数据<br /> HTML 表单用于收集用户的输入信息。<br /> HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。<br /> <br /> <br /> 属性 action，指定表单发送的地址（表单转向的网页等）<br /> 属性 method 发送的方式 get，post <br /> get方法 数据会附加到url的后面传递给服务器 默认<br /> post，将数据包大包发给服务器，等候服务器来读取 <br /> 表单中重要的字元素 input button <br /> <br /> <br /> username: </p>
<p> passward: <br /> <br />10、input元素，（输入框）他是表单的一个字属性<br /> 指定表单中的内容项，比如输入内容的文本框<br /> 可以指定表单属性，也可以放在表单的外面。<br /> input元素的属性：<br /> type，指定输入框的类型，<br /> text 单行文本，<br /> password 密码，<br /> submit 提交按钮，<br /> radio 单选按钮<br /> reset 重置按键，<br /> image 图片式按键<br /> <input type=\"image\" src=\"1.jpg\" alt=\"图标\" width=\"48\" height=\"48\"<br /> 点击图片会上交点击的坐标（get方式url中可以看到）<br /> <br /> <br /> name：名称，输入内容识别名称，传递参数时候的参数名称<br /> value： 默认值，输入框默认填入的内容，<br /> maxlength，指定最大长度maxlength=\"3\"<br /> placeholder,设置提示信息的。<br /> required:表示内容必须填写，不然不能提交。<br /> <br /> <br /> username: </p>
<p> passward: </p>
<p> <br /> <br /> <br /> <br /> <br /> </p>
</div>
<div class="clear"></div>
<div class="article_tags">
<div class="tagcloud">
网络标签：<a href="http://www.csdndoc.com/tag/ys" rel="tag">元素</a> <a href="http://www.csdndoc.com/tag/sx-2" rel="tag">属性</a> <a href="http://www.csdndoc.com/tag/bq" rel="tag">标签</a> </div>
</div>
</div>
</div>
<div>
<ul class="post-navigation row">
<div class="post-previous twofifth">
上一篇 <br> <a href="http://www.csdndoc.com/thread/17511.html" rel="prev">设计模式（八）结构型：桥接模式详解</a> </div>
<div class="post-next twofifth">
下一篇 <br> <a href="http://www.csdndoc.com/thread/17514.html" rel="next">Docker+Kubernetes 实战：数据模型的弹性伸缩与高可用部署方案</a> </div>
</ul>
</div>
<div class="article_container row box article_related">
<div class="related">
<div class="newrelated">
<h2>相关问题</h2>
<ul>
<li><a href="http://www.pcgg.com.cn/gl/2231.html">原神萌新多久出一个五星</a></li>
<li><a href="http://www.pcgg.com.cn/fzscjh/50855.html">方舟生存进化方舟塔boss</a></li>
<li><a href="http://www.pcgg.com.cn/lol/24273.html">lol怎么查看最近登录记录</a></li>
<li><a href="http://www.pcgg.com.cn/lol/23211.html">英雄联盟屏幕跳动怎么回事</a></li>
<li><a href="http://www.pcgg.com.cn/bwlb/49306.html">保卫萝卜betaboss攻略</a></li>
<li><a href="http://www.pcgg.com.cn/lol/13928.html">英雄联盟3d视角怎么开</a></li>
<li><a href="http://www.pcgg.com.cn/bwlb/54790.html">保卫萝卜丛林第6攻略</a></li>
<li><a href="http://www.pcgg.com.cn/lol/25812.html">lol王者800点什么概念</a></li>
<li><a href="http://www.pcgg.com.cn/zxsy/48583.html">诛仙手游鬼道宠物怎么加点</a></li>
<li><a href="http://www.pcgg.com.cn/cj/41735.html">冬天新买的空调怎么用</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div id="comments_box">
</div>
</div>
<div id="sidebar">
<div id="sidebar-follow">
<div class="search box row">
<div class="search_site">
<form id="searchform" method="get" action="http://www.csdndoc.com/index.php">
<button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button>
<label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label>
</form></div></div>
<div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a>
<p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br />
<a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a>
<p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row widget_tag_cloud"><h3>标签</h3><div class="tagcloud"><a href="http://www.csdndoc.com/tag/ck-2" class="tag-cloud-link tag-link-237 tag-link-position-1" style="font-size: 8.5773195876289pt;" aria-label="仓库 (345个项目)">仓库</a>
<a href="http://www.csdndoc.com/tag/dm" class="tag-cloud-link tag-link-47 tag-link-position-2" style="font-size: 16.515463917526pt;" aria-label="代码 (1,216个项目)">代码</a>
<a href="http://www.csdndoc.com/tag/ys" class="tag-cloud-link tag-link-62 tag-link-position-3" style="font-size: 10.164948453608pt;" aria-label="元素 (447个项目)">元素</a>
<a href="http://www.csdndoc.com/tag/hs" class="tag-cloud-link tag-link-38 tag-link-position-4" style="font-size: 14.350515463918pt;" aria-label="函数 (868个项目)">函数</a>
<a href="http://www.csdndoc.com/tag/gn" class="tag-cloud-link tag-link-48 tag-link-position-5" style="font-size: 9.0103092783505pt;" aria-label="功能 (373个项目)">功能</a>
<a href="http://www.csdndoc.com/tag/qk" class="tag-cloud-link tag-link-324 tag-link-position-6" style="font-size: 9.1546391752577pt;" aria-label="区块 (376个项目)">区块</a>
<a href="http://www.csdndoc.com/tag/cs" class="tag-cloud-link tag-link-25 tag-link-position-7" style="font-size: 9.1546391752577pt;" aria-label="参数 (377个项目)">参数</a>
<a href="http://www.csdndoc.com/tag/ml" class="tag-cloud-link tag-link-4 tag-link-position-8" style="font-size: 11.896907216495pt;" aria-label="命令 (590个项目)">命令</a>
<a href="http://www.csdndoc.com/tag/tx" class="tag-cloud-link tag-link-130 tag-link-position-9" style="font-size: 9.4432989690722pt;" aria-label="图像 (395个项目)">图像</a>
<a href="http://www.csdndoc.com/tag/zzl" class="tag-cloud-link tag-link-20 tag-link-position-10" style="font-size: 21.422680412371pt;" aria-label="在这里 (2,688个项目)">在这里</a>
<a href="http://www.csdndoc.com/tag/dz" class="tag-cloud-link tag-link-196 tag-link-position-11" style="font-size: 10.020618556701pt;" aria-label="地址 (432个项目)">地址</a>
<a href="http://www.csdndoc.com/tag/khd" class="tag-cloud-link tag-link-28 tag-link-position-12" style="font-size: 8.5773195876289pt;" aria-label="客户端 (344个项目)">客户端</a>
<a href="http://www.csdndoc.com/tag/rq" class="tag-cloud-link tag-link-215 tag-link-position-13" style="font-size: 11.030927835052pt;" aria-label="容器 (514个项目)">容器</a>
<a href="http://www.csdndoc.com/tag/dx" class="tag-cloud-link tag-link-34 tag-link-position-14" style="font-size: 9.1546391752577pt;" aria-label="对象 (379个项目)">对象</a>
<a href="http://www.csdndoc.com/tag/gj" class="tag-cloud-link tag-link-43 tag-link-position-15" style="font-size: 10.164948453608pt;" aria-label="工具 (441个项目)">工具</a>
<a href="http://www.csdndoc.com/tag/kfz" class="tag-cloud-link tag-link-294 tag-link-position-16" style="font-size: 11.175257731959pt;" aria-label="开发者 (529个项目)">开发者</a>
<a href="http://www.csdndoc.com/tag/js" class="tag-cloud-link tag-link-283 tag-link-position-17" style="font-size: 10.59793814433pt;" aria-label="技术 (475个项目)">技术</a>
<a href="http://www.csdndoc.com/tag/jk" class="tag-cloud-link tag-link-252 tag-link-position-18" style="font-size: 8.5773195876289pt;" aria-label="接口 (345个项目)">接口</a>
<a href="http://www.csdndoc.com/tag/cj" class="tag-cloud-link tag-link-68 tag-link-position-19" style="font-size: 8pt;" aria-label="插件 (316个项目)">插件</a>
<a href="http://www.csdndoc.com/tag/crtp" class="tag-cloud-link tag-link-42 tag-link-position-20" style="font-size: 16.80412371134pt;" aria-label="插入图片 (1,273个项目)">插入图片</a>
<a href="http://www.csdndoc.com/tag/cz-3" class="tag-cloud-link tag-link-513 tag-link-position-21" style="font-size: 8.8659793814433pt;" aria-label="操作 (363个项目)">操作</a>
<a href="http://www.csdndoc.com/tag/sj" class="tag-cloud-link tag-link-55 tag-link-position-22" style="font-size: 22pt;" aria-label="数据 (2,939个项目)">数据</a>
<a href="http://www.csdndoc.com/tag/sjk" class="tag-cloud-link tag-link-124 tag-link-position-23" style="font-size: 10.164948453608pt;" aria-label="数据库 (446个项目)">数据库</a>
<a href="http://www.csdndoc.com/tag/sz-3" class="tag-cloud-link tag-link-186 tag-link-position-24" style="font-size: 9.4432989690722pt;" aria-label="数组 (396个项目)">数组</a>
<a href="http://www.csdndoc.com/tag/wj" class="tag-cloud-link tag-link-81 tag-link-position-25" style="font-size: 18.247422680412pt;" aria-label="文件 (1,619个项目)">文件</a>
<a href="http://www.csdndoc.com/tag/ff" class="tag-cloud-link tag-link-18 tag-link-position-26" style="font-size: 11.175257731959pt;" aria-label="方法 (525个项目)">方法</a>
<a href="http://www.csdndoc.com/tag/fwq" class="tag-cloud-link tag-link-147 tag-link-position-27" style="font-size: 13.340206185567pt;" aria-label="服务器 (748个项目)">服务器</a>
<a href="http://www.csdndoc.com/tag/mx" class="tag-cloud-link tag-link-69 tag-link-position-28" style="font-size: 19.40206185567pt;" aria-label="模型 (1,962个项目)">模型</a>
<a href="http://www.csdndoc.com/tag/cs-2" class="tag-cloud-link tag-link-58 tag-link-position-29" style="font-size: 12.907216494845pt;" aria-label="测试 (684个项目)">测试</a>
<a href="http://www.csdndoc.com/tag/xx-2" class="tag-cloud-link tag-link-35 tag-link-position-30" style="font-size: 8.1443298969072pt;" aria-label="消息 (320个项目)">消息</a>
<a href="http://www.csdndoc.com/tag/bb" class="tag-cloud-link tag-link-6 tag-link-position-31" style="font-size: 13.340206185567pt;" aria-label="版本 (738个项目)">版本</a>
<a href="http://www.csdndoc.com/tag/zt" class="tag-cloud-link tag-link-79 tag-link-position-32" style="font-size: 8pt;" aria-label="状态 (313个项目)">状态</a>
<a href="http://www.csdndoc.com/tag/hj" class="tag-cloud-link tag-link-3 tag-link-position-33" style="font-size: 9.8762886597938pt;" aria-label="环境 (421个项目)">环境</a>
<a href="http://www.csdndoc.com/tag/yh" class="tag-cloud-link tag-link-44 tag-link-position-34" style="font-size: 14.20618556701pt;" aria-label="用户 (845个项目)">用户</a>
<a href="http://www.csdndoc.com/tag/sl" class="tag-cloud-link tag-link-17 tag-link-position-35" style="font-size: 10.164948453608pt;" aria-label="示例 (448个项目)">示例</a>
<a href="http://www.csdndoc.com/tag/cx" class="tag-cloud-link tag-link-31 tag-link-position-36" style="font-size: 9.7319587628866pt;" aria-label="程序 (414个项目)">程序</a>
<a href="http://www.csdndoc.com/tag/sf" class="tag-cloud-link tag-link-108 tag-link-position-37" style="font-size: 9.7319587628866pt;" aria-label="算法 (412个项目)">算法</a>
<a href="http://www.csdndoc.com/tag/xt" class="tag-cloud-link tag-link-96 tag-link-position-38" style="font-size: 13.484536082474pt;" aria-label="系统 (762个项目)">系统</a>
<a href="http://www.csdndoc.com/tag/xc" class="tag-cloud-link tag-link-19 tag-link-position-39" style="font-size: 8.7216494845361pt;" aria-label="线程 (350个项目)">线程</a>
<a href="http://www.csdndoc.com/tag/zj" class="tag-cloud-link tag-link-192 tag-link-position-40" style="font-size: 9.8762886597938pt;" aria-label="组件 (422个项目)">组件</a>
<a href="http://www.csdndoc.com/tag/jd" class="tag-cloud-link tag-link-12 tag-link-position-41" style="font-size: 14.061855670103pt;" aria-label="节点 (825个项目)">节点</a>
<a href="http://www.csdndoc.com/tag/sb" class="tag-cloud-link tag-link-160 tag-link-position-42" style="font-size: 9.7319587628866pt;" aria-label="设备 (413个项目)">设备</a>
<a href="http://www.csdndoc.com/tag/lj" class="tag-cloud-link tag-link-22 tag-link-position-43" style="font-size: 10.164948453608pt;" aria-label="路径 (445个项目)">路径</a>
<a href="http://www.csdndoc.com/tag/jx" class="tag-cloud-link tag-link-213 tag-link-position-44" style="font-size: 11.896907216495pt;" aria-label="镜像 (588个项目)">镜像</a>
<a href="http://www.csdndoc.com/tag/xm" class="tag-cloud-link tag-link-171 tag-link-position-45" style="font-size: 14.494845360825pt;" aria-label="项目 (891个项目)">项目</a></div>
</div> <div class="widget box row">
<div id="tab-title">
<div class="tab">
<ul id="tabnav">
<li class="selected">猜你想看的文章</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="tab-content">
<ul>
<li><a href="http://www.pcgg.com.cn/lol/16339.html">英雄联盟手游怎么登录不了了</a></li>
<li><a href="http://www.pcgg.com.cn/gpqq/8542.html">和平精英模拟器灵敏度怎么调最稳模拟器</a></li>
<li><a href="http://www.pcgg.com.cn/gl/5213.html">原神海上拾玉怎么触发不了</a></li>
<li><a href="http://www.pcgg.com.cn/gpqq/8471.html">怎样下载国际服和平精英</a></li>
<li><a href="http://www.pcgg.com.cn/gpqq/12269.html">和平精英国际服最新版本1.7(和平精英国际服最新版本1.7.0)</a></li>
<li><a href="http://www.pcgg.com.cn/lol/31218.html">lol怎么下换肤盒子</a></li>
<li><a href="http://www.pcgg.com.cn/lol/21606.html">英雄联盟最强王者是什么水平知乎发现</a></li>
<li><a href="http://www.pcgg.com.cn/gl/4523.html">原神零氪璃月3c选哪个</a></li>
<li><a href="http://www.pcgg.com.cn/gpqq/6755.html">和平精英苹果13灵敏度压枪目前最稳2022</a></li>
<li><a href="http://www.pcgg.com.cn/gpqq/7051.html">2021和平精英模拟器灵敏度最佳设置</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="container">
<div class="twothird">
</div>
</div>
<div class="container">
<div class="twothird">
<div class="copyright">
<p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a>
<a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a>
</p>
<p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p>
<p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p>
</div>
</div>
<div class="third">
<a href="http://www.xiaoboy.cn" target="_blank">小男孩</a>
</div>
</div>
</div>
<!--gototop-->
<div id="tbox">
<a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a>
<a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a>
<a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a>
</div>
<script src="//css.5d.ink/body5.js" type="text/javascript"></script>
<script>
function isMobileDevice() {
return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent);
}
// 加载对应的 JavaScript 文件
if (isMobileDevice()) {
var script = document.createElement('script');
script.src = '//css.5d.ink/js/menu.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script>
$(document).ready(function() {
$("#sidebar-follow").pin({
containerSelector: ".main-container",
padding: {top:64},
minWidth: 768
});
$(".mainmenu").pin({
containerSelector: ".container",
padding: {top:0}
});
$(".swipebox").swipebox();
});
</script>
</body></html> 