首页>前端>HTML> 文章正文

HTML基本标签及结构详解

来源: HTML 2021-05-12 16:28 阅读: 21
1.HTML概述 1.HTML:超文本标记语言。是一种标识性语言,非编程语言,不能使用逻辑运算。通过标签将网络上的文档格式进行统一,使分散的网络资源链接为一个逻辑整体。

1.HTML概述

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

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

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

静态网页:不变

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

2.HTML标签结构

1.文档结构:

<!doctypehtml><!--!表示声明的意思。这一行代码意思:下面的文档标签将以html5进行解析-->

<html>

<!-头部.用来完成一个网页的相关设置->

<head>

<metacharset="utf-8"><!--汉字编码--><!--meta:元,用来完成对应设置-->

<metaname="keywords"content=""><!--设置一个网站搜索的关键字-->

<metaname="description"content=""><!--网站的描述内容-->

<title>我的第一个html网页</title><!--标题-->

<!--设置网站的小图标-->

<linkrel="shortcuticon"href=""type="image/png">

<style>

/*书写样式的地方*/

</style>

<linkrel="stylesheet"href="style.css"><!--用来引入外部样式文件-->

</head>

<!--2.主体部分-->

<body>

<p>这是一个段落</p>

</body>

<script>

//放脚本代码的地方

</script>

</html>

2.常用标签:

<!--做移动端开发设置-->

<metaname="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-->

<ahref="url地址/链接"title="B站">文本</a>

<ahref="url地址"target="_blank">文本</a>

<ahref="url地址"target="_self">文本</a>

<ahref="'#href"target="#href">文本</a>

锚点链接href='#href'目标位置的属性要设置为与其一直id='#href'

<!--7.img用于加载外部图片图像,src用来设计加载的图片或图像的路径,alt当图片图像加载不成功时,显示alt中的内容,否则不会显示-->

src路径alt替换文本title图片提示文本width:图像宽度height:图像高度border边框

<imgsrc=""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标签-->

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

<ptitle="段落"class="content"id="content">这是一个测试段落</p>

5.部分其他标签:

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

<!--1.b和strong:都有加粗作用,且都是行级标签(不会自动换行),

但strong还有强调作用。注:强调主要是用于SEO时,便于提前关键字-->

<b>加粗</b>

<strong>加粗且强调</strong>

<!--2i和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>

属性

alignleftcenterright对齐

border边框cellpadding文字和单元格的距离cellspacing单元之间的距离width

表格结构标签

<thead></thead>表头区域

<tbody></tbody>主体区域

合并单元格:跨行合并:rowspan行和行跨列合并:colspan列和列

合并代码:跨行:在最上侧单元格为目标单元格,写合并代码

跨列:在最左侧单元格为目标单元格,写合并代码

跨行或跨列步骤:

1.确定跨行还是跨列2.找到目标单元格3.删除多余单元格

7.表单标签:

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

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

表单域实现用户信息传递<formaction=""method=""></form>

action跟着的为地址method提交方式name名称

input输入表单元素:

<inputtype="text">

type属性值:text文本password密码buttonridio单选框()checkbox(多选按钮).....

submit(提交按钮,将表单值提交给服务器)reset清除表单的所有数据

button普通按钮结合js使用file上传文件

name属性:表单元素的名字,单选按钮必须有相同的名字才可以多选1

单选按钮和复选框都要有相同的name

value属性定义值

每个元素都应该有的,主要给后台人员来使用的

checked针对单选和多选当页面打开的时候默认选择

maxlength最大长度

select下拉表单元素

使用场景:有多个选项,想节约空间<selectname=""id="">

<optionvalue=""></option>

</select>

select至少包含一个option在option中的属性selected=selected进行默认选择

<labelfor=""></label>使用场景for和表单元素的id属性相同就对应上

textarea文本域表单元素输入文本较多时

<textarea><textarea>一般规定长度通过css

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