欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML的基本标签

程序员文章站 2022-07-02 22:08:53
...

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>
HTML的基本标签
<video src="" controls="controls"></video>
HTML的基本标签

iframe标签

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

table标签

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

HTML的基本标签
table标签中的常见的标签属性及作用
HTML的基本标签
tr标签的常用属性及作用
HTML的基本标签
td标签的常用的属性及作用
HTML的基本标签
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>

效果如下:
HTML的基本标签
输入c时的效果
HTML的基本标签

header标签

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

section标签

定义文档某个区域

footer标签

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

blockquote标签

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

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

效果:自动缩进两格
HTML的基本标签

相关标签: 理论知识 html