html比div跟高级的标签,html-高级标签

  • Post author:
  • Post category:其他


1. 简单标签

strong: 定义重要性强调的文字

ins(inseted):定义插入的文字

em(emphasized):定义强调的文字

del:被删除的文字(删除线)

©版权符号

//html 编码 以&开头,;结束 &xxx;

&nbsp:一行文字中无论你放了多少个空格,浏览器上都只显示一个,要想显示多个空格,就需要

&nbsp空格符

<小于号

>大于号

例如<div>页面显示就是


换行符,单标签,代码中无论回车多少次,页面都只显示一次换行,多次换行就需要多个

标签

H标签:给文本添加标题语义,而不是修改页面样式的,一个页面中只能有一个

标签

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation


:显示分隔线,单独一行

2. 有序列表

  1. 苹果
  2. 橘子
  3. 梨子
  4. 香蕉

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

type=”1″

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

type=”1″ reversed=”resversed”

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

3. 无序列表(与div和span一样重要)

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

type的三种样式

  • 天猫
  • 聚划算
  • 天猫超市
  • 🍊

常用于导航栏这种子项基本样式、功能都一样,只是内容有一些细微差别的功能块,css里面写list-style:none可以去掉前面的小原点

定义列表

定义标题<.dt>

标题描述

应用场景:网站尾部相关信息,图文混排

4. 图片

alt:当src路径有问题时图片就显示不出来,可使用alt简单展示图片信息

title:当鼠标挪到图片上的时候会显示一些提示内容

5. 超链接


www.baidu.com

里面包含的所有内容点击后都会跳到href内的链接页面,target=”_blank”代表打开新页面,不写或者是_self表示在当前页面打开

可放文字、图片

href:

1、超文本引用,写链接地址

2、锚点,类似目录,href里写元素id,例如#img1,点击就会跳到id为img1的地方,只有#会跳到顶部,如果写本地文件地址,可以跳转到本地文件,本地文件地址+#id可以跳转到文件指定位置

3、打电话,tel:400252255 点击就会拨打电话

4、发邮件:mailto:邮箱地址

5、协议限定符:例如下图

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

可以强制运行js的代码

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

实现效果

target:不加这个就是在本页面跳转,加上_blank就会在新标签页面打开链接

里写上这句话就可以让所有
标签都跳转新页面

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

6. 表单标签:超级重要,可发送消息跟后端交互

name:必须写才能发送过去 数据名,比如下面点击登陆,就会提交用户名和密码,类似http://xxxx?username=xxx&password=xxx,就可以从后台按格式解析出数据名和数据值

在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据

input标签 type:

text是文本输入框

password密码输入框

submit提交按钮,会将form标签内input的数据全部提交给后台

radio是单选标签,当有多个选项时需将他们的name设置为同一个名字,这样就会被识别为同一道题的选项,实现单选操作

checkbox 多选框,所有选项name必须一致,跟单选框一样,需要给value设置值提交时才知道选的是谁

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

username:

password:

你喜欢的水果

1、苹果

2、梨

3、草莓

1、苹果

2、梨

3、草莓

非input标签 select

//select下拉菜单

北京

天津

山西

河南

广州

河南

广东

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

select效果

textarea 多行文本

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

拖动红框内区域可随意改变大小

7、表格标签

默认有边框 border=”1″,可设置宽高和对齐方式

一行中的 一个单元格
一行中的 一个单元格

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

对齐方式说明

边距:

默认每个单元格的外边距是2px,可通过在table上用cellspacing修改

cellpadding可修改内边距,即文字与单元格的间距

0efa2a00a7e0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

th标签可设置标题单元格,自动加粗居中

合并单元格

colspan可指定单元格当作几个单元格看待,就有合并效果rowspan可指定单元格垂直方向当作几个单元格看待

8、多媒体标签

视频

由于各大浏览器支持的格式都不一样,最好使用下面方式,但浏览器必须支持html5才行(以后可以使用一个js的框架html5media让所有浏览器都支持)

音频 audio 跟视频类似 支持三种格式

marquee跑马灯

跑马灯效果