ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML常见标签的用法

2021-10-27 21:34:29  阅读:105  来源: 互联网

标签:标签 单元格 表单 HTML 按钮 用法 链接 属性


标签关系:并列关系与包含关系

骨架标签

<!doctype html>//表面是html类型文件

<html lang="en">//表面语言种类,en表示英文网站,zh-CN中文网站

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

</body>

</html>

常用标签:合适的地方放置合理的标签

标题标签<h1>-<h6>(<h1></h1>)标题文字会加粗变大,且独占一行

段落标签<p></p>paragraph

换行标签<br/>

文本格式化标签(文字·粗体,斜体,下划线等效果)

<strong></strong><b></b>加粗,strong会比b更强烈

<bm></bm>,<i></i>倾斜,em会比i语义更强烈

<del></del><s></s>删除线,del语意更强烈

<ins></ins><u></u>下划线,ins语意更强烈

盒子标签

<div></div>独占一行,可以理解为大盒子

<span></span>一行可以放多个span,可以理解为小盒子

图像标签<img src=""/>image,标签的各种属性:

src为图像的必须属性,用于指定图像的路径和文件名图像需和网页文件放在同一文件目录之下.

路径: 

相对路径:以引用html文件位置为参考,建立出的路径

同一级的路径:直接引用图片,图片与文字都在同一目录之下

下一级的路径:/使用该符号定位如src="images/ing.jpg"

上一级的路径:../实现上一级定位,如src="../img.jpg"

绝对路径:即文件在电脑中的位置或者网络中文件的地址,不推荐使用                                                                                                                             

alt替换文本,图像显示不出来的时候用该文字替换

title提示文本,鼠标放在图片上提示的文字

width给图像设置宽度

height给图像设置高度,一般只修改一个浏览器会等比例进行缩放

border给图像设置边框

属性只能写在标签名后面,属性是没有顺序关系的,属性采用的是键值对的形式:属性="属性值"

超链接标签<a href="跳转目标",target="目标窗口的弹出方式"></a>anchor

链接的分类:

外部链接:即网址

打开方式

_self当前页面打卡

_blank打开新的窗口打开页面

内部链接:直接写相对路径就行

空链接:#,链接地址写#,表示链接为空

下载链接:点击会下载文件或者压缩包,直接在链接中放压缩包或者文件,点击便会直接下载

锚点链接:点击锚点链接,快速定位到页面中某个位置#id如herf="#id",目标位置进行标记,添加id

注释标签:<!---->快捷键ctrl+/,用于添加注释

各种特殊字符

 空格,前端中手动加空格只会显示一个空格。

&It小于符号

>大于符号

表格标签:

<table>

<tr>//行,必须嵌套在table中

<td></td>//列,必须嵌套在tr中

</tr>

</table>

表头单元格标签:<th></th>其中文字会加粗居中,位置和td标签位置一样

表格属性:对表格文字进行修改,属性要写在标签里

align:对齐方式,其属性值有:center,left,right

border:边框

cellpadding:文字与单元格边框之间的距离

cellspacing:单元格之间的距离

width:单元格宽度

height:单元格高度

表格结构标签

<thead></thead>表头标签<tbody></tbody>主体标签,这两个标签内容和一般表格一样

合并单元格:是一个属性值,写在td中

跨行合并:rowspan=“合并单元格个数”

跨列合并:colspan=“合并单元格个数”

目标单元格:跨行合并,写在最上侧的单元格。跨列合并,写在最左侧的单元格

操作步骤:合并单元格,删除多余单元格

列表标签:  三大列表

无序列表:

<ul>

<li>

</li>

</ul>各li标签是同等级的,li中可以放置任意一个元素

有序列表:

<ol>

<li>

</li>

</ol>

自定义列表:一般用于名词解释

<dl>

<dt>名词</dt>

<dd>解释</dd>

</dl>dt与dd标签没有字数限制

表单标签:表单由三个部分构成表单域(表单的区域),表单控件(表单中实现功能的)和提示信息(表单中的文字提示信息)

表单域:包含表单元素的区域

<form action=”服务器地址” name=”表单的名字”>

各种表单元素控件

</form>

表单控件:

输入控件<input>:<input type=”属性值”>type属性值的不同,input呈现不同的效果

type各种属性值

text文本框,用户可在其中给输入任何文字

password密码框

radio单选按钮,例如:男<input type=”radio”>,单选按钮由有相同的名字时,可以实现多选一

checkbox复选框,使用方式与单选框一致

submit 提交按钮

reset 重置按钮

button 普通按钮与javascript搭配使用

file 文件上传按钮

Input其它属性:

name:名字,单选按钮和复选框要有相同的名字

value:可以给表单设置默认值,也可以更改各按钮中的文字

checked:该属性可表示默认选中,例如checked=”checked”

maxlength:表示文本框输入的最大长度

lable标签:当用户点击标签内容时,会选中其中的input标签所体现的内容 例如:<lable for=”text”>用户名:</lable><input type=”text” id=”text/>.lable标签需要用for表明作用的input标签

下拉表单控件:select标签。定义下拉列表,多个下拉表单元素让用户选择.使用selected属性可以设置默认选项selected=”selected”

<select>

<option>四川</option>

<option>安徽</option>

</select>

文本域控件:textarea标签

<textarea rows=”” clos=””>

</textarea>

其具有元素cols设置每行字符数,rows表示标签行数,若实际写入会超过设置值,便会出现滚动条

水平线标签:<hr/>

按钮标签:<button></button>

标签:标签,单元格,表单,HTML,按钮,用法,链接,属性
来源: https://blog.csdn.net/qq_58754996/article/details/121002506

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有