HTML的基本标签

img 单标签

src 图片路径
alt 图片提示,图片无法加载时显示或者鼠标移上去时显示

ul 无序标签 ol 有序标签,li列表项目

type:修改列表项目的符号
	ol:1,A,a,s,Ⅰ,ⅰ
	ul:circle,square,disc
start:从多少开始排序,只能在ol上使用

a 标签

href:跳转的链接地址;外网域名要加http://或者https://
target:_blank 在新窗口显示
			_self 在当前窗口展示
			_top在顶层窗口中展示网页
			_parent在父级窗口中显示网页
name:在指定name的窗口中显示

特殊字符

1 空格  
2 < 小于 &lt;
3 > 大于 &gt;
4 & &符号 &amp;
5 “ 双符号 &quot;
6 © 版权 &copy;
7 ® 注册商标 &reg;
8 × 乘号 &times;
9 ÷ 除号 &divide;

标题标签

h1~h6 数字越小,字号越大
上下都有外边距,加粗显示,独占一行

水平分割线
<hr/> 单标签,在页面中显示一条水平分割线

文字格式化标签

<b></b> 粗体
<big></big> 大字号
<em></em> 着重文字
<i> </i>斜体
<small></small>小字号
<strong></strong>粗体
<sub></sub>下标
<sup></sup>上标
<del></del>删除线
<u></u>下划线
<strike></strike>删除线

自定义标签
dl,dt,dt,自定义列表标签

音频和视频标签

<audio src="" controls="controls"></audio>
在这里插入图片描述
<video src="" controls="controls"></video>
在这里插入图片描述

iframe标签

<iframe></iframe>内联框架
src:设置另一个网页文档的路径和文件名
frameborder:内联框架的边框样式
name:设置内联框架的名称,配合a标签的target属性,可以实现链接在指定的内联框架中显示

table标签

 <table> 表格标签
    <tr>  行标签
       <td></td>   列标签
       <td></td>
       <td></td>
    </tr>
 </table>

在这里插入图片描述
table标签中的常见的标签属性及作用
在这里插入图片描述
tr标签的常用属性及作用
在这里插入图片描述
td标签的常用的属性及作用
在这里插入图片描述
caption标签的作用

<table>
        <caption>标题</caption>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
    </table>

属性:align 值:left,right,top,bottom

form标签及标签属性

<form action="" method="" name="" enctype="">
        
</form>

属性:
action:表单提交数据到后台服务器的地址(url+接口名称)
name:表单名称,每个表单都有唯一一个的名称,在同一页面下不能重名
enctype:提交数据的编码
application/x-www-form-urlencoded:发送前编码所有字符(默认)
multipart/form-data:不对字符编码,在使用包含文件上传控件的表单时必须使用该值
text/plain:空格转换为‘+’加号,但不对特殊字符编码
method:规定表单如何提交提交方式为get和post两种方式

get和post的区别
post传输数据时会加密,在url地址栏看不到提交的数据
get提交数据时会把?号拼在url地址后面加上需要提交的数据,且用户能够看到提交的数据

html5中新增的属性
autocomplete:on/off 规定是否启用表单的自动完成功能
novalidate:novalidate 使用时,提交表单时不进行验证

input标签

属性:
type:定义input标签的类型
  button 按钮 value值为按钮上显示的值
  checkbox 多选框
  file 上传文件
  image 以图片形式的按钮
  password 密码输入框
  radio 单选框 name值相同
  submit 提交按钮
  reset 重置按钮
  email 电子邮件输入框 输入的内容时电子邮件
  url url输入框 输入的内容为url地址
  tel 电话号码输入框 输入的内容必须是电话号码
  date 日期控件,用来选择年月日,还有例如datetime,month,week,time,datetime-local这些与时间相关的控件的值
  color 颜色控件
  number 数字输入的控件(min属性,允许输入的最小数字 max属性,允许输入的最大的数字 step属性,控制数字变化的步长,也就是用户选择数字是,数字增加或减少的数量)
  hidden 隐藏表单域,页面一般看不到,但是提交表单时会提交改域的数据
text 文本框 默认20个字符
checked:checked 默认选中
required=“required” 验证特殊输入框,如email url
maxlength 最大字符数
multiple 允许一个值以上,通常配合下拉框
size 定义输入字体的宽度
placeholder 提示信息

select option下拉列表标签

select必须嵌套option使用
属性:
multiple 多选
size 一次显示多个选项

textarea文本域标签

属性:
cols 定义有多少列
rows 定义有多少行

button按钮标签

属性:
type:
submit 提交按钮
button 普通按钮
reset 重置按钮

特殊属性

disabled 禁用
	readonly 只读

legend标签和fieldset标签

fieldset 可以将表单内相关元素分组,并且会在相关元素周围绘制边框
legend 该组相关元素的标题

<fieldset>
    <legend>登录</legend>
    用户名:<input type="text">
    密码:<input type="password">
    <input type="submit" value="登录">
</fieldset>

figcaption标签和figure标签

figure标签规定独立的流内容(图片,图表,图像,代码等等)
元素的内容应该与主内容相关,同时元素的位置相对于主要内容是独立的,如果被删除,则不应对文档流产生影响

<figure>
    <img src="" alt="">
    <figcaption></figcaption>
</figure>

hgroup标签

表示文档部分的多级标题,用于对网页区段的标题进行组合。

<hgroup>
    <h1>标题1</h1>
    <h2>标题2</h2>
</hgroup>

datalist标签

需要与input标签配合使用,用来表示可选的列表。可用于搜索功能
代码如下:

 <input list="check">
<datalist id="check">
    <option value="java"></option>
    <option value="javascript"></option>
    <option value="c++"></option>
</datalist>

效果如下:
在这里插入图片描述
输入c时的效果
在这里插入图片描述

header标签

导航栏的容器
header标签不能放在footer,或者另一个header里面

section标签

定义文档某个区域

footer标签

定义文档尾部区域,语义化标签

blockquote标签

定义摘自另一个源的快引用,浏览器通常会对blockquote元素进行缩进,配合css做出漂亮的效果
代码:

<blockquote>
    你好,我是blockquote标签
</blockquote>

效果:自动缩进两格
缩进了两格

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值