HTML相关标签
创始人
2024-06-01 03:50:19
0次
HTML相关标签
- 标签和属性
- 文件标签
- 文本标签
- 图片标签
- 列表标签
- 链接标签
- 块标签
- 语义化标签
- 表格标签
标签和属性
文件标签
-
: html文档的根标签 -
: 头标签 用于指定html文档的一些属性 引入外部资源 -
: 标题标签 </code></pre> </li><li> <pre><code><body>: 体标签 </code></pre> </li><li> <pre><code><!DOCTYPE>: html5中定义该文档是html文档 </code></pre> </li></ul> <h3>文本标签</h3> <ul><li> <pre><code>注释:<!--注释内容--> </code></pre> </li><li> <pre><code><h1> to <h6> : 标题标签 </code></pre> </li><li> <pre><code><p> : 段落标签 </code></pre> </li><li> <pre><code><br> : 换行标签 </code></pre> </li><li> <pre><code><hr> : 展示一条水平线 </code></pre> <ul><li>属性: <ul><li>color : 颜色</li><li>width : 宽度</li><li>size : 高度</li><li>align : 对齐方式 <ul><li>center : 居中</li><li>left : 左对齐</li><li>right : 左对齐</li></ul> </li></ul> </li></ul> </li><li> <pre><code><b> : 字体加粗 </code></pre> </li><li> <pre><code><i> : 字体斜体 </code></pre> </li><li> <pre><code><font> 字体标签 </code></pre> <ul><li>属性 <ul><li>color : 颜色</li><li>size : 大小</li><li>face : 字体</li></ul> </li></ul> </li><li> <pre><code><center> </code></pre> </li><li> <p>属性定义</p> <ul><li>color: <ul><li>英文单词 : red green blue …</li><li>rgb(值,1值2,值3) : 值得范围 : 0~255 如 : rgb(0,0,255_</li><li>#值1值2值3 : 值的范围 : 00~FF之间 如 : #FF00FF</li></ul> </li><li>width: <ul><li>数值 : width=“20” ,数值单位默认是px(像素)</li><li>数值%: 占比相对于父元素的比例</li></ul> </li></ul> </li></ul> <h3>图片标签</h3> <ul><li> <pre><code><img src="路径" alt="图片显示不出来时的图片名字"> </code></pre> </li><li> <p>绝对路径</p> <ul><li>以盘符开始的路径</li></ul> </li><li> <p>相对路径</p> <ul><li>相对于此html文件</li><li>./ 代表当前目录</li><li>…/ 代表上一级目录</li><li>什么都不写 相当于./</li></ul> </li></ul> <h3>列表标签</h3> <ul><li>有序列表 <ul><li>ol <ul><li>属性: type = “A” “a” “I” “i” “1”</li></ul> </li><li>li</li></ul> </li><li>无序列表 <ul><li>ul</li><li>li</li></ul> </li></ul> <h3>链接标签</h3> <ul><li>a : 定义一个超链接 <ul><li>属性: <ul><li>href :指定访问资源URL</li><li>target: 指定打开资源方式 <ul><li>_self:默认值,在当前页面打开</li><li>_blank:在空白页面打开</li></ul> </li></ul> </li></ul> </li></ul> <h3>块标签</h3> <ul><li> <pre><code><div> 每一个div占满一整行 块级标签 </code></pre> </li><li> <pre><code><span> 文本信息在一行展示 行内标签 内联标签 </code></pre> </li></ul> <h3>语义化标签</h3> <ul><li> <header>页眉 </header></li><li> <footer>页脚 </footer></li></ul> <h3>表格标签</h3> <ul><li>table 定义表格 <ul><li>width :宽度</li><li>border :边框</li><li>cellpadding :定义内容和单元格的</li><li>cellspacing :定义单元格之间的距离 如果指定为 则单元格的会合为一条</li><li>bgcolor :背景色</li><li>align :对齐方式</li></ul> </li><li>tr 定义行 <ul><li>bgcolor :背景色</li><li>align :对齐方式</li></ul> </li><li>td 定义单元格 <ul><li>colspan :合并列</li><li>rowspan :合并行</li></ul> </li><li>th 定义表头单元格</li><li> :表格标题 </li><li> :表示表格的头部分</li><li> :表示表格的体部分 </li><li> 表示表格的脚部分 </li></ul><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-0407448025.css" rel="stylesheet"><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-bb308a51ed.css" rel="stylesheet"> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> <a href="/index.php?s=news&c=search&keyword=%E8%AF%8D%E5%BA%93%E5%8A%A0%E8%BD%BD%E9%94%99%E8%AF%AF%3A%E6%9C%AA%E8%83%BD%E6%89%BE%E5%88%B0%E6%96%87%E4%BB%B6%E2%80%9CE%3A%5Chighferrum_mysql%5CConfiguration%5CDict_Stopwords.txt%E2%80%9D%E3%80%82" class="badge badge-light-primary fw-bold my-2" target="_blank">词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。</a> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/news/17445.html">QML 模型（ListModel）</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/news/17447.html">windows应用（vc++2022）MFC基础到实战(3)-基础（3）</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/cee36d80f0da4ae.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18326.html" class="text-dark fw-bold text-hover-primary fs-6"> 常用商务英语口语</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> 商务英语是以适应职场生活的语言要求为目的，内容涉及到商务活动的方方面面。下面是小编收集的常用商务...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/a05a0414d433f4.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18325.html" class="text-dark fw-bold text-hover-primary fs-6"> 六年级上册英语第一单元练习题</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> 一、根据要求写单词。 1.dry（反义词）__________________ 2.writ...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/f45b03b20bf4.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18324.html" class="text-dark fw-bold text-hover-primary fs-6"> 复活节英文怎么说</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">复活节英文怎么说?复活节的英语翻译是什么?复活节：Easter;"Easter,anniversar...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/a14c4ded24915ed.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18323.html" class="text-dark fw-bold text-hover-primary fs-6"> 2008年北京奥运会主题曲</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2008年北京奥运会(第29届夏季奥林匹克运动会)，2008年8月8日到2008年8月24日在中华人...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18322.html" class="text-dark fw-bold text-hover-primary fs-6"> 英语道歉信</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">英语道歉信15篇 在日常生活中，道歉信的使用频率越来越高，通过道歉信，我们可以更好地解释事情发生的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18321.html" class="text-dark fw-bold text-hover-primary fs-6"> 六年级英语专题训练(连词成句...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">六年级英语专题训练(连词成句30题) 1. have,playhouse,many,I,toy,i...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/57ecc2c540ec47d.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18320.html" class="text-dark fw-bold text-hover-primary fs-6"> 上班迟到情况说明英语</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> 每个人都或多或少的迟到过那么几次，因为各种原因，可能生病，可能因为交通堵车，可能是因为天气冷，有...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18319.html" class="text-dark fw-bold text-hover-primary fs-6"> 小学英语教学论文</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">小学英语教学论文范文 引导语：英语教育一直都是每个家长所器重的，那么有关小学英语教学论文要怎么写呢...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/ed5e20b66e7d879.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18318.html" class="text-dark fw-bold text-hover-primary fs-6"> 英语口语学习必看的方法技巧</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">英语口语学习必看的方法技巧如何才能说流利的英语？ 说外语时，我们主要应做到四件事：理解、回答、提问、...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/b8c0176d978ecf5.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18317.html" class="text-dark fw-bold text-hover-primary fs-6"> 四级英语作文选:Birth ...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">四级英语作文范文选:Birth controlSince the Chinese Governmen...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18316.html" class="text-dark fw-bold text-hover-primary fs-6"> 金融专业英语面试自我介绍</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">金融专业英语面试自我介绍3篇 金融专业的学生面试时，面试官要求用英语做自我介绍该怎么说。下面是小编...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18315.html" class="text-dark fw-bold text-hover-primary fs-6"> 我的李老师走了四年级英语日记...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">我的李老师走了四年级英语日记带翻译 我上了五个学期的小学却换了六任老师，李老师是带我们班最长的语文...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18314.html" class="text-dark fw-bold text-hover-primary fs-6"> 小学三年级英语日记带翻译捡玉...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">小学三年级英语日记带翻译捡玉米 今天，我和妈妈去外婆家，外婆家有刚剥的`玉米棒上带有玉米籽，好大的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18313.html" class="text-dark fw-bold text-hover-primary fs-6"> 七年级英语优秀教学设计</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">七年级英语优秀教学设计 作为一位兢兢业业的人民教师，常常要写一份优秀的教学设计，教学设计是把教学原...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202407/2934937459ab6bb.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18312.html" class="text-dark fw-bold text-hover-primary fs-6"> 我的英语老师作文</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">我的英语老师作文（通用21篇） 在日常生活或是工作学习中，大家都有写作文的经历，对作文很是熟悉吧，...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18311.html" class="text-dark fw-bold text-hover-primary fs-6"> 英语老师教学经验总结</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">英语老师教学经验总结（通用19篇） 总结是指社会团体、企业单位和个人对某一阶段的学习、工作或其完成...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202406/2cd285bd67df.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18310.html" class="text-dark fw-bold text-hover-primary fs-6"> 初一英语暑假作业答案</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">初一英语暑假作业答案 英语练习一(基础训练)第一题1.D2.H3.E4.F5.I6.A7.J8.C...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202406/909c99da3c1d906.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18309.html" class="text-dark fw-bold text-hover-primary fs-6"> 大学生的英语演讲稿</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">大学生的英语演讲稿范文（精选10篇） 使用正确的写作思路书写演讲稿会更加事半功倍。在现实社会中，越...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202406/e48e06918852045.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18308.html" class="text-dark fw-bold text-hover-primary fs-6"> VOA美国之音英语学习网址</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">VOA美国之音英语学习推荐网址 美国之音网站已经成为语言学习最重要的资源站点，在互联网上还有若干网站...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hfjzjc/202406/41dbde7ef539e35.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/18307.html" class="text-dark fw-bold text-hover-primary fs-6"> 商务英语期末试卷</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Part I Term Translation (20%)Section A: Translate ...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> 华丰美文网 </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">资讯</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>