HTML基本标签及结构详解

时间：2021-05-08

1.HTML概述

1.HTML：超文本标记语言。是一种标识性语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文档格式进行统一，使分散的网络资源链接为一个逻辑整体。

超文本是一种组织信息的方式，通过超级链接将多种媒介链接起来

标记:标签。用<>包裹的具有一定含义的内容，比如:…

静态网页:不变

动态网页：跟后台同时改变

2.HTML标签结构

1.文档结构：

<!doctype html><!--!表示声明的意思。这一行代码意思：下面的文档标签将以html5进行解析--><html><!-头部.用来完成一个网页的相关设置-><head> <meta charset="utf-8"><!--汉字编码--><!--meta:元，用来完成对应设置--> <meta name="keywords" content=""><!--设置一个网站搜索的关键字--> <meta name="description" content=""><!--网站的描述内容--> <title>我的第一个html网页</title><!--标题--> <!--设置网站的小图标--> <link rel="shortcut icon" href="" type="image/png"> <style> </style> <link rel="stylesheet" href="style.css"><!--用来引入外部样式文件--></head><!--2.主体部分--><body> <p>这是一个段落</p></body><script> //放脚本代码的地方</script></html>

2.常用标签：

<!--做移动端开发设置--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--1.div标签，用于布局，没有具体含义,分层。层--> <div></div> <!--2.hx:标题,从1级到6级，1级最大，6级最小，自动加粗，有默认字号--> <h1></h1>...<h6></h6> <!--3.p标签：表示段落。相当与一个回车.--> <p></p> <!--4.br：生成换行符--> <br> <!--6.a标签,实现链接跳转,target：_blank新窗口/_self当前窗口_parent/top--> <a href="url地址/链接" title="B站">文本</a> <a href="url地址" target="_blank">文本</a> <a href="url地址" target="_self">文本</a> <a href="'#href" target="#href">文本</a> 锚点链接 href='#href' 目标位置的属性要设置为与其一直 id='#href' <!--7.img用于加载外部图片图像，src用来设计加载的图片或图像的路径,alt当图片图像加载不成功时，显示alt中的内容，否则不会显示--> src路径 alt替换文本 title 图片提示文本 width:图像宽度 height:图像高度 border边框 <img src="" alt="显示不出的名字"> <!--8.span作用与div一样，都是用于布局，div会单独占一行，span不会,span便签用于行内布局--> <span></span> <!--9.ul和ol,前者无序后者有序，都用的li标签。--> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> <li>li1</li> <li>li2</li> <li>li3</li> </ol> //自定义列表 重点每个网站的最下面基本都是通过自定义 <dl> dl中只能有dt和dd 一个dt对应多个dd 为兄弟关系 <dt></dt>名词1 <dd></dd>名词1解释1 <dd></dd>名词1解释2 </dl>自定义列表

4.标签属性:

<!--标签属性: 1.通常由属性名="属性值"组成 2.起附加信息的作用。 3.不是所有标签都有属性，比如br标签--> 下面的title class就是属性名，而后面的就是属性值 <p title="段落" class="content" id="content">这是一个测试段落</p>

5.部分其他标签:

<!--文本格式化标签：就是通过标签来美化文本外观-> <!--1.b和strong:都有加粗作用，且都是行级标签(不会自动换行)， 但strong还有强调作用。注:强调主要是用于SEO时，便于提前关键字--> <b>加粗</b> <strong>加粗且强调</strong> <!--2 i和em：使文字倾斜,em具有强调作用。且都是行级标签(不会自动换行)， 如果只是简单倾斜效果，用i标签就可以了，比如添加图标等--> <i>倾斜</i> <em>倾斜且强调</em> <!--3.pre预格式化文本,保留换行和空格及宽度。 文字的字号会小一号,块级标签（在浏览器中会独占一行）--> <pre> pre预格式化 文本,保留换行和空 格及宽度 </pre> <!--samll和big，将文字缩小或放大一号（行级标签，不会独占一行，且不识别宽高）--> <!--浏览器支持的最小字号是12px，显示比12px还小的文字的话，需要进行处理--> <p>我是正常的</p> <small>我是小一号的文字</small> <!--sub和sup：设置文本为下标和上标,用来调整文本正常显示的基线，且文字会自动小一号--> <p>正常显示:X1+X2=Y</p> <p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p> <p>下标:X<sup>1</sup>+X<sup>2</sup>=Y</p> 删除线 <del></del> <s></s> 下划线 <ins></ins> <u></u> 转义字符：&nbsp; 空格 &lt; 小于号 &gt;大于号

6.表格标签以及表单标签

表格标签结构: 作用:显示 展示数据 <table> <!--表格标签--> <th></th> 表头单元格 <tr> <td></td>单元格 </tr>行 </table> 属性 align left center right 对齐 border边框 cellpadding 文字和单元格的距离 cellspacing 单元之间的距离 width 表格结构标签 <thead></thead> 表头区域 <tbody></tbody> 主体区域 合并单元格:跨行合并:rowspan行和行 跨列合并:colspan列和列 合并代码:跨行:在最上侧单元格为目标单元格，写合并代码 跨列:在最左侧单元格为目标单元格，写合并代码 跨行或跨列步骤: 1.确定跨行还是跨列 2.找到目标单元格 3.删除多余单元格

7.表单标签:

表单标签:主要用途:收集用户信息 表单由表单域 表单控件（元素） 提示信息组成 表单域 实现用户信息传递<form action="" method=""></form> action跟着的为地址 method提交方式 name名称 input输入表单元素: <input type="text"> type属性值:text文本 password密码 button ridio单选框() checkbox(多选按钮)..... submit(提交按钮，将表单值提交给服务器) reset 清除表单的所有数据 button 普通按钮 结合js使用 file 上传文件 name属性:表单元素的名字，单选按钮必须有相同的名字才可以多选1 单选按钮和复选框都要有相同的name value属性 定义值 每个元素都应该有的，主要给后台人员来使用的 checked 针对单选和多选 当页面打开的时候默认选择 maxlength 最大长度 select下拉表单元素 使用场景:有多个选项，想节约空间<select name="" id=""> <option value=""></option> </select> select至少包含一个option 在option中的属性selected = selected进行默认选择 <label for=""></label>使用场景 for 和表单元素的id属性相同就对应上 textarea文本域表单元素 输入文本较多时 <textarea><textarea>一般规定长度通过css

到此这篇关于HTML基本标签及结构详解的文章就介绍到这了,更多相关HTML基本标签及结构内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章