本文主要介绍了HTML基本标签及结构详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.HTML概述
1.HTML:超文本标记语言。是一种标识性语言,非编程语言,不能使用逻辑运算。通过标签将网络上的文档格式进行统一,使分散的网络资源链接为一个逻辑整体。
超文本是一种组织信息的方式,通过超级链接将多种媒介链接起来
标记:标签。用<>包裹的具有一定含义的内容,比如:…
静态网页:不变
动态网页:跟后台同时改变
2.HTML标签结构
1.文档结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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.常用标签:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!--做移动端开发设置--> < 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 4 5 6 | <!--标签属性: 1.通常由属性名="属性值"组成 2.起附加信息的作用。 3.不是所有标签都有属性,比如br标签--> 下面的title class就是属性名,而后面的就是属性值 < p title = "段落" class = "content" id = "content" >这是一个测试段落</ p > |
5.部分其他标签:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!--文本格式化标签:就是通过标签来美化文本外观-> <!--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 > 转义字符: 空格 < 小于号 >大于号 |
6.表格标签以及表单标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 表格标签结构: 作用:显示 展示数据 < 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.表单标签:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 表单标签:主要用途:收集用户信息 表单由表单域 表单控件(元素) 提示信息组成 表单域 实现用户信息传递< 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基本标签及结构详解的文章就介绍到这了,希望可以帮到你
来源:微点阅读 https://www.weidianyuedu.com