15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > html简介以及常用标签介绍

html简介以及常用标签介绍

时间:2023-09-04 15:36:01 | 来源:网站运营

时间:2023-09-04 15:36:01 来源:网站运营

html简介以及常用标签介绍:一、什么是HTML
超文本标记语言(英文:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起呗众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。
二、简单介绍HTML语法
HTML由一系列的元素组成,你可以使用它来封装,包装或标记内容的不同部分,使其以某种方式显示或以某种方式执行。封闭标签(tags)可以使一些内容成为超链接以跳转到别的页面、加粗或斜体字等等。
1.剖析HTML元素
如果想要在html中输入段落文本,可以讲要输入的段落文本包含在段落标签(<p>)元素中:
<p>My cat is very grumpy</p>


本例<p>段落元素主要的组成部分:
1.开始标签(Opening tag):包括元素的名称(本例中的p),包裹在开始(<)和结束(>)尖括号中。这表示元素开始-在本例中表示了一个段落的开头。
2.结束标签(Closing tag):这与开始标记相同,除了它在元素名称之前有一个正斜杠(/)。这表示元素结束的位置-在本例中表示了一个段落的结尾。
3.内容(Content):这是元素的内容,在本例中只是文本。
4.元素(Element):开始标记 + 内容 + 结束标记 = 元素
2.嵌套元素
你可以把元素放在其他元素之中--这被称之为嵌套。如果我们想要表明我的小猫是非常暴躁的,可以将very嵌套在<strong>中,意味着这个单词被着重强调:
<p>My cat is <strong>very</strong> grumpy.</p>
3.块级元素和内联元素
在HTML中有两种需要知道的重要元素类别,块级元素和内联元素。



4.注释
在编写HTML代码使想要对代码进行解释说明,那便可以将代码的说明放在注释中。 注释是被浏览器所忽略,并且对用户不可见 语法:<!-- 注释内容 -->
5.空元素
不是所有元素都拥有开始标签、内容和结束标签。有些元素只有一个标签,通常用来在此元素的位置插入/嵌入一些东西,这些元素被称之为空元素。在HTML中通常在一个空元素上使用一个闭标签是无效的。
6.属性




属性包含元素的额外信息,这些信息不会出现在实际的内容中。在图片中,这个class属性给元素赋了一个识别的名字(id),这个名字此后可以被用来识别此元素的样式信息和其他信息。
常用的标准属性
id: 定义元素在页面中的唯一标识
title:鼠标移入到元素上时提示的文本
class:样式相关,定义元素引用的类选择器
style:样式相关,定义元素的行内样式
7.HTML文档结构
简单完整的HTML
<!DOCTYPE html> <!-- 声明文档类型 --> <html> <!-- <html>元素包裹了整个完整的页面,是一个根元素 --> <head> <!-- <head>元素是一个容器,它包含了所有你想包含在HTML页面中但不想在其中显示的内容 --> <meta charset="utf-8"> <!-- 这个元素设置文档使用utf-8字符集编码 --> <title>My blog</title> <!-- 设置页面标题,让其出现在浏览器标签上。当你标记/收藏页面时它可用来描述页面。 --> </head> <body> <!-- <body>元素包含了访问页面时所有显示在页面上的内容:文本、图片、音视频、游戏等等 --> <p>This is my blog</p> </body> </html>
三、HTML常用的标签
1.<a>标签
a(anchor 锚点):超链接、设置页面中允许被点击的内容 标签样式:<a></a> 属性: href:"xxx" -- 链接地址,xxx表示要跳转到新页面的地址 target:"xxx" -- 目标,xxx表示打开新网页所使用的的形式 target:"_blank" -- 在一个新页面打开 target:"_self" -- 在自己(本)页面打开 target:"_parent" -- 在父级页面打开 target:"_top" -- 在顶级页面打开
2.文本样式
<i></i>:斜体 <b></b>:加粗 <s></s>:删除线 <u></u>:下划线 <sup></sup>:上标 <sub></sub>:下标
3.标题
以下标签可显示一至六级标题,一级最大六级最小: <h1></h1> <h2></h2> ... <h6></h6>
4.简单标签
p(paragraph 段落):段落元素 标签样式:<p></p> br:换行元素 标签样式:<br> hr:分割线元素 标签样式:<hr> strong:表示文本十分重要(粗体) 标签样式:<strong></strong> em(emphasize 强调):着重元素,标记处需要用户着重阅读的内容(斜体) 标签样式:<em></em> small:将文本字体小一号 标签样式:<small></small> img:图片元素 标签样式:<img> 属性: src:图片的地址(可是绝对路径也可是相对路径) width:图片宽度 height:图片高度
5.分区元素
1)块分区元素:<div></div> 用于页面布局,独立成行 2)行内分区元素:<span></span> 用于设置同一行文本内的不同格式,多个元素在一行内显示出来
6.<iframe>标签
iframe:在一个页面内嵌套另一个页面 标签样式:<iframe></iframe> 属性: src:嵌套页面的URL地址 name:嵌入的页面的名称 frameborder:取值为1时(默认值),告诉浏览器在当前iframe与其他iframe之间绘制边框,取0时则无需绘制此边框
7.表单
由<form>标签定义,将用户输入的数据提交给后台。 但如果form表单中没有提交按钮,就无法提交form的数据。 标签样式:<form action="xxx" method="get"></form> 属性: action:提交的服务器地址 method:表单数据提交的方式(form只支持get与post两种方式) name:定义表单的名称 id:独一无二的标识 target:与<a>标签相同,一样有四个target对应的值
<input>元素
<input>:用于为基于Web的表单创建交互式控件,以便接受来自用户的数据 标签样式:<input> 属性: type:根据不同的type属性值可以创建各种类型的输入字段 value:最终提交给服务器的值 name:控件的名称,提供给服务器使用,没有name,控件则无法提交 id:唯一标识 disabled:标记表单使之为不可用

-文本框:<input type="text"> -密码框:<input type="password"> -单选框:<input type="radio"> -多选框:<input type="checkbox"> -提交按钮:<input type="submit"> -重置按钮:<input type="reset"> -普通按钮:<input type="button"> -图片按钮:<input type="image" src="xxx"> -隐藏域:<input type="hidden"> -文件选择框:<input type="file">
提交按钮
标签样式:<button>按钮</button> 如果一个form里只有一个<button>(type属性为空),那这个按钮会自动升级为一个submit按钮。
<select>下拉选择框
<select name="分组"> <option value="" selected>-</option> <!-- 默认选择 --> <option value="1">第一组</option> <option value="2" disable>第二组</option> <!-- 不可选定 --> <option value="3">第三组</option> </select>
<textarea>标签
<textarea>标签:让用户可输入多行文本 标签样式:<textarea name="" id="" cols="30" rows="10"></textarea> 属性: name:控件的名称,提供给服务器使用,没有name,控件则无法提交 id:唯一标识 clos:文本框宽度 rows:文本框高度
8.列表


1)ol(order list)有序列表 <ol> <li></li> </ol> 2)ul(un-order list)无序列表 <ul> <li></li> </ul> 3)自定义列表 <dl> <!--description list(描述列表) --> <dt>描述列表的标题内容</dt> <!-- description term(描述术语) --> <dd>描述列表定义</dd> <!-- description definition(描述定义) --> </dl>
9.表格
<table>元素定义表格 标签样式:<table></table> <table>标签的子元素有:thead、tbody、tfoot、colgroup
<table>表格示例
<table> <thead> <tr> <td>姓名</td> <td>班级</td> </tr> </thead> <tbody> <tr> <td>小红</td> <td>一班</td> </tr> <tr> <td>小蓝</td> <td>二班</td> </tr> </tbody> </table>
10.结构标记

<header></header>:定义页面顶部信息 <nav></nav>:定义页面的导航条部分 <section></section>:定义文档中的节,文档中主体内容 <article></article> :定义独立于文档的其他部分内容(章、节等) <footer></footer>:定义某区域的脚注信息,页面底部内容等 <aside></aside>:多用于侧边栏和相关引用信息等

关键词:标签

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭