网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站建设 » 正文

HTML基本标签及结构详解

2021-3-1 17:12:29 | 作者:老铁SEO | 0个评论 | 人浏览

 

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》自定义列表

3.标签属性:

《!--标签属性:

1.通常由属性名=“属性值”组成

2.起附加信息的作用。

3.不是所有标签都有属性,比如br标签--》

下面的title class就是属性名,而后面的就是属性值

《p title=“段落” class=“content” id=“content”》这是一个测试段落《/p》

4.部分其他标签:

《!--文本格式化标签:就是通过标签来美化文本外观-》

《!--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》

转义字符: 空格 《 小于号 》大于号

5.表格标签以及表单标签:

表格标签结构: 作用:显示 展示数据

《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.删除多余单元格

6.表单标签:

表单标签:主要用途:收集用户信息

表单由表单域 表单控件(元素) 提示信息组成

表单域 实现用户信息传递《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标签  结构  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐