HTML —— 常用HTML标签

什么是HTML?

HTML:超文本标记语言
通俗理解就是用特殊的标记让浏览器知道你的内容属于什么类型。
比如当你现在网页上放置一个图片时,就需要使用标记图片的标签:<img />标签
当你需要在网页放链接的时候,就要用连接标签<a></a>标签
下面按照不同标签的显示效果给标签分类

HTML格式:

  1. 文件格式:后缀名为html的文件(xxxxx.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>

</body>
</html>

###常用文字标签:

  1. h标签: 标题标签,有h1h6六个不同大小的标题16,一个网页只有一个h1
  2. p标签: 段落标签
  3. span标签:一个文字标签,一般用来组合文档中的行内元素,以便通过样式来格式化它们。
  4. a标签:超链接,给href属性设置完整目标网址,就能连接到目的网站

代码示例

<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>
<p>这是一个段落标签:p标签</p>
<p>这是有一个段落标签:p标签</p>
<span>我是一个span</span>
<a href="https://www.taobao.com/">点我一下去淘宝</a>

###图片标签:img

img标签是用于网页显示图片的标签

  • src属性:设置图片来源的属性,可以使本地图片路径,也可以是网络图片网址。
  • alt属性:图片可替换文本,通俗的讲就是当图片显示不出来时,便显示alt属性的文本值,一般是对图片的说明。
  • title属性:图片标题属性,当鼠标移动到图片上停留时会显示title属性的文本值。
    代码示例:
<p>本地图片,假装你的html文件的同级目录有个img文件夹,而且img文件夹还刚好有个kaola.jpg文件</p>
<img src="img/Koala.jpg"/>
<p>网络图片</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530698034973&di=a719e14d68ad43d143109ef7aaa5b79c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d4f45a35ef7aa80120ba383fe435.jpg%401280w_1l_2o_100sh.jpg" alt="漫威英雄" title="漫威"/>

##媒体标签
音频标签:audio标签

  • src:资源文件来源,本地或网络资源都可以。
  • 支持的格式
    |-----------------| IE9 | Firefox 3.5 | Opera 10.5| Chrome 3.0 | Safari 3.0 |
    | ----------------|------| ------------- |----------------|-----------------|--------------|
    | Ogg Vorbis |----|√|√|√|----|
    | MP3 | √|----|----|√|√|
    | Wav | ----|√|√|-----|√|
空标签写法
<audio src="music/Kalimba.mp3" controls  loop />
闭合标签写法
<audio controls="controls">
  当第一个文件不兼容时,使用第二个,甚至第三个
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
</audio>

视频标签: vido标签
用法示例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

##表单及表单元素

用于收集用户输入信息,例如输入文字密码,数字,时间等等;

**表单标签:**form标签,定义一个表单
form属性:

属性名说明
name规定表单名
action规定表单提交的地址(url)
method规定表单提交的HTTP方式,可选值:get/post。默认get
enctype规定表单提交的数据编码。默认url-encoded
accept-charset规定在被提交表单中使用的字符集。默认:页面字符集
novalidate规定浏览器不验证表单

用法示例:

<form>
	...
</form>

input标签:

input标签是最重要的、使用最多的标签。input标签根据会根据type属性的值而显示不同的效果。

type常见可选值及效果

属性值说明
text文本输入框
password密码输入框,输入内容时用*号代替字符
number用于输入密码,不可输入其他字符
radio单选按钮
checkbox多选按钮
button按钮
submit提交按钮,把数据提交到表单的action规定的地址
color颜色选择
date日期控件
datetime-local日期及时间控件
email邮件输入框,可用于验证输入邮件地址是否合法

部分代码示例:

文本输入框:<input type="text" value="文本输入框" />
密码输入框:<input type="password" value="密码输入框" />
普通按钮: <input type="button" value="按钮"/>
提交按钮:<input type="submit" value="提交" />
重置按钮:<input type="reset" value="重置" />

单选框

同一组单选框中所有的name属性必须相同
checked="true"声明默认选中
disabled="disabled"声明该按钮禁止选择

<input name="radios" type="radio" value="第一个" checked="true" />第一个
<input name="radios" type="radio" value="第二个" />第二个
<input name="radios" type="radio" value="第三个" />第三个
<input id="no" name="radios" type="radio" value="禁选按钮" disabled="disabled" />禁选按钮

多选框

<input id="11" name="checkbox" type="checkbox" value="第一个" checked="true" />第一个
<input id="22" id="1" name="checkbox" type="checkbox" value="第二个" />第二个
<input id="33" name="checkbox" type="checkbox" value="第三个" />第三个
<input id="nono" name="checkbox" type="checkbox" value="禁选按钮" disabled="disabled" />禁选按钮

select标签:

下拉菜单,使用option标签作为菜单选项
代码示例:

<select name="" id="">
    <option value="">第一个</option>
    <option value="">第二个</option>
    <option value="">第三个</option>
    <option value="">第四个</option>
    <option value="">第五个</option>
    <option value="">第六个</option>
</select>

文本域

文本域,就是多行文本框,跟input一样可以输入文字,但是文本域可以多行输入

<textarea></textarea>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值