html多选按钮代码(html中checkbox用法)

在下面的内容中,您将看到HTML的标签,及HTML5标签。并且我们为您介绍他的用法。以及版本说明。HTML理解起来其实很简单,但真的用好它,对于初学者来说,却不容易。

另外,如果有发现错误的,欢迎联系我们更正。

<!—-> html注释

用法:用于标注HTML中的备注内容,也就是相当于我们给网页某块的代码加了记号,这个记号浏览器会读取到,但浏览器不会用作页面中的展示。

<!doctype html> 声明文档类型

<html> 网页中最大的容器。用于包裹head、body…

<head> 用于存放一些声明信息、例如:title、meta、link、script….

<title> 网页的标题(网页的名称,注:非文件名)

html多选按钮代码(html中checkbox用法)

<body> 网页中用于存放内容的区域,这个区域所书写的标签是在浏览器中可以直观的看到。

结构标签(以下标签用于对网页的结构进行划分或规划):

<h1>..<h6> 内容区域的标题,与title完全不一样,h1~h6这个标题可以直观的从浏览器中看到,而title只能从浏览器的窗口或标签页中看到。在网页中,h1常被用于新闻或文章的大标题,h2可用作该大标题的副标题,h3可用作某个模块的小标题,h4~h6视情况而定。

h1如下:

h3如下:

<p> 段落,用于存放一段文字,通常会出现在新闻的列表中。

<ul> 无序列表,常用于新闻列表、导航等

<li> 列表项目,与ul必须配合来使用,ul的直接子元素必须是li,ul中不能含有任何的其他标签,但li中可以随意的去放标签。

<ol> 有序列表,用于排行榜,分页一类的内容区域等,与ul用法一致,只是代表的情况不同。

<dl> 定义列表,用法往下看

<dt> 定义列表的标题,用法往下看

<dd> 定义列表的内容 ,用法:dl是dt和dd的父标签,一般用于如下内容:

粉色是dl,绿色是dt,蓝色是dd

结构如下:

<div> 无含义,但他做的事儿很多,而且还少不了他。他解释起来是无含义,但实际应用中,它是用于对网页的区域进行划分。每一个红色区域,都是可以用div包裹起来,div中才放其他内容,如图:

<hr> 很早以前的标签了,已被HTML5和现代的实际应用中废弃。完全可以用css替代。

细节标签(以下标签用于对网页的细节进行装饰,如文字):

其实网页中的这些细节标签 ,有点儿像word所做的事儿。

<span> 无实际意义,主要用于区分样式

<em> 强调作用 默认状态斜体(斜体)

<i> 斜体,不建议使用 目前可用于小图标的制作

<strong> 强调作用 默认状态:加粗(粗体)

<b> 加粗 不建议使用

<u> 下划线,不建议使用

<s> 删除线 ,不建议使用

以上这些东西有点儿类似与word

如图:(word功能区域截图)

Word中的 B 相当于网页中的 strong标签

Word中的 I 相当于网页中的 em 标签

Word中的 U 相当于网页中的 u 标签

<a> 超链接(或者直接叫 链接)

属性:

target 目标窗口

title 鼠标移上去的提示(该属性可添加给任何标签)

<img> 插入图片

属性:

alt 图片描述

作用1:用于图片加载失败,或图片路径错误的提示

作用2:用于搜索引擎抓取图片的关键词

作用3:用于无障碍阅读的提示文字

<table> 定义表格

<thead> 表头

<tbody> 内容

<tr> 表格的行

<td> 表格的列

下图是一个两行两列的表格,其中thead为标题

<input> 输入框

type

text 文本框

password 密码

radio 单选按钮

checkbox 多选按钮

file 上传框

reset 重置按钮

button 普通按钮

submit 提交按钮

value 用于和后台配合传送数据的

<select> 下拉菜单 用于选择生日

<option> 需要和 select 标签配合使用,如下

HTML5标签(HTML5标签不兼容IE8(含)以下),可用于移动端的开发,PC端如果使用,需要使用 html5shiv.min.js (请自行搜索)

<header> 定义头部区域,一般用于网站存放一些logo、搜索框、导航等区域。

<nav> 定义导航,之前ul,现在可以用nav定义,但里面如果是个列表的话,还是要用ul.(实际上他只是取代了div的功能而已。)

<main> 定义主体内容

<article> 定义文章,相比html,之前是用div包裹,现在我们可以把div,替换为该标签

<figure> 定义图像、视频区域等

<figcaption> 定义 figure的标题

例如:之前我们这样的一个例子

需要用到结构如下:

现在我们可以这么使用:

<section> 定义文档中的某个区域,

特别注意:section的错误用法(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)

If it makes sense to separately syndicate the content of a<section>element, use an<article>element instead.

译:如果是有意义的结构,要定义在 <article>中

Do not use the<section>element as a generic container; this is what<div>is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

译:不要使用<section>元素作为公用容器,他无法替代div,当你需要划分结构的话,依然需要使用div替代。

举例:

<audio>定义声音,比如音乐或其他音频流

属性:

src – 路径

autoplay – 自动播放

controls – 显示控件 – 浏览器自带的控制条

loop – 自动重复播放

muted – 静音

preload:预加载

音频格式

MP3、Wav、Ogg

source 多格式支持

ogg和mp3足以满足需求

浏览器选择第一个可用格式

IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis√√√MP3√√(新版)√√Wav√√√

完整格式如下:

<video> 定义视频,比如电影片段或其他视频流。

audio有的东西video都有

src:视频的URL

poster:视频封面,没有播放时显示的图片(属性值是图片 的路径)

视频格式

MP4, WebM, 和 Ogg – 格式拓展阅读,见备注

source 多格式支持

ogg和mp4足以满足需求

浏览器选择第一个可用格式

IE 9Firefox 5 Opera 11 Chrome 13 Safari 5 Ogg Vorbis√√√MP4(H.264)√√√WebM√√√

<input> 新的type

date

日期

number

类似于购物的加减框

max、min、step(合法数字间隔)、value(默认值)

range 滑块,类似windows的音量条 – 属性同number

search 搜索框,比普通text多了一个叉

url 路径

新增属性

autofocus 自动获得焦点(访问搜索引擎是后,进去以后直接光标就在输入框)

autocomplete – 是否自动完成表单(on/off)

pattern – 正则表达式

发表评论

登录后才能评论