HTML5常用标签用法大全_cxycxytony的博客-程序员信息网

技术标签: HTML5  html  

1、HTML简介

Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等。

2、HTML5的优势

世界知名浏览器厂商对HTML5的支持

  • 微软
  • Google
  • 苹果
  • Opera
  • Mozila

市场的需求

跨平台

3、W3C标准

W3C

W3C标准包括

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(css)
  • 行为标准(DOM、ECMAScript)

4、HTML基本网页信息

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签,它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML">
    <meta name="description" content="学习前端知识">
    <!-- title网页标题 -->
    <title>Title</title>
</head>

<!-- head标签代表网页主题 -->
<body>

</body>

</html>

5、HTML网页基本标签

5.1、标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

5.2、段落标签

<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有耳朵,</p>
<p>一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>

5.3、换行标签

两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有耳朵,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>

5.4、水平线标签

<hr/>

5.5、字体样式标签

粗体:<strong>i love you</strong>
斜体:<em>i love you</em>

5.6、注释和特殊符号

空格:&nbsp;
大于号:&gt;
小于号:&lt;
版权符号:&copy;

6、图像标签

常见图片格式:JPG、GIF、PNG、BMP…

标签结构:
在这里插入图片描述

<img src="../resources/image/1.jpg" alt="mybatis" title="悬停文字" width="300px" height="300px">

7、链接标签

标签结构:
在这里插入图片描述

7.1、页面间链接

   从一个页面跳转到另一个页面

<!--
target:表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转</a>
<a href="https://www.baidu.com" target="_self">惦记我跳转到百度</a>
<a href="https://www.baidu.com"><img src="../resources/image/1.jpg"></a>

7.2、锚链接

<!-- 使用name作为标记 -->
<a name="top">顶部</a>
...
...
...
<!-- 锚链接
    1.需要一个锚标记
    2.跳转到标记
 -->
<a href="#top">返回顶部</a>

也可以从另一个页面跳到锚链接

<a href="4.链接标签学习.html#top">跳到锚链接</a>

7.3、功能性链接

可以参考:QQ推广

<!-- 功能性链接
 邮件链接:mailto
 QQ链接:百度QQ链接自动生成
 -->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好,有什么能帮您的吗?" title="你好,有什么能帮您的吗?"/></a></body>

8、块元素和行内元素

8.1、块元素

  • 无论内容多少,该元素独占一行
  • (p、h1-h6…)

8.2、行内元素

  • 内容撑开宽度,左右都是行内元素的可以排在一行
  • (a、stron、em…)

9、列表标签

9.1、无序列表

<!-- 无序列表
 应用范围:导航,侧边栏。。。
 -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

9.2、有序列表

<!-- 有序列表
 应用范围:试卷,问答。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

9.3、自定义列表

<!-- 自定义列表
dl:列表
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>前端</dd>
    <dt>位置</dt>
    <dd>西安</dd>
    <dd>天津</dd>
    <dd>北京</dd>
    <dd>兰州</dd>

</dl>

10、表格标签

为什么使用表格

  • 简单通用
  • 结构稳定

基本结构:单元格,行,列,跨行,跨列

<!--
 表格:table
 表头:th
 行:tr
 列:td
 -->
<table border="1px">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <tr>
        <!-- colspan 跨列 -->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

11、视频和音频

11.1、视频元素

video

<!-- 视频
src:资源路径
controls:控制条
autoplay:自动播放
loop:循环播放
-->
<video src="#" controls autoplay loop></video>

11.2、音频元素

audio

<!-- 音频
src:资源路径
controls:控制条
autoplay:自动播放
loop:循环播放
-->
<audio src="#" controls autoplay loop/>

12、页面结构分析

  • header
         标题头部区域的内容(用于页面或页面中的一块区域)
  • footer
         标记脚部区域的内容(用于整个页面或页面的一块区域)
  • section
         Web页面中的一块独立区域
  • article
         独立的文字内容
  • aside
         相关内容或应用(常用于侧边栏)
  • nav
         导航类辅助内容

13、iframe内联框架

在这里插入图片描述

<!-- iframe内联框架
 src:地址
 w-h:宽度高度
 -->
<iframe src="http://www.baidu.com" name="hello" frameborder="0" height="300px" width="300px"></iframe>
<!-- 会在内联框架中下试这个网页 -->
<a href="http://www.taobao.com" target="hello">点击跳转</a>

14、初识表单

在这里插入图片描述

14.1、get和post

<!--
action: 表单提交的位置,可以是网站也可以是一个请求处理地址
method: post , get 提交方式
    get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
    post:比较安全,传输大文件
    required:不能为空
-->
<form action="1.我的第一个网页.html" method="post">
    <!-- 文本输入框:input type="text" -->
    <p>名字:<input type="text" name="username" required/> </p>
    <!-- 密码框:input type="password" -->
    <p>密码:<input type="password" name="pwd"/></p>

    <p>
        <input type="submit"/>
        <input type="reset" value="清空"/>
    </p>
</form>

在这里插入图片描述

14.2、单选框

单选框的前提是它们在同一个组(name相同),反之,可以多选

    <!--
    value:单选框的值
    name:表示组
    -->
   	<!-- checked默认选中 -->
    <p>
        <input type="radio" value="boy" name="sex" checked/><input type="radio" value="girl" name="sex"/></p>

14.3、多选框

    <p>
        <!-- checked默认选中 -->
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

14.4、按钮

    <p>
    	<!-- 普通按钮 -->
        <input type="button" name="btn1" value="点击"/>
        <!-- 图像按钮,可以实现提交 -->
        <input type="image" src="../resources/image/1.jpg"/> 
        <!-- 提交按钮 -->
        <input type="submit"/>
        <!-- 按钮按钮 -->
        <input type="reset"/>
    </p>

14.5、下拉框

    <p>国家:
        <!-- selected默认选中 -->
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

14.6、列表框

    <p>国家:
        <!-- selected默认选中 -->
        <select name="列表名称" size=4>
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

14.7、文件域

    <p>文件域:
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

14.8、文本域

    <!-- 文本域
    cols:行
    rows:列
    -->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

15、搜索滑块和简单验证

15.1、邮件验证

    <!-- 邮件验证 -->
    <p>邮箱:
        <input type="email" name="email">
    </p>

15.2、URL验证

    <!-- URL验证 -->
    <p>URL:
        <input type="url" name="url">
    </p>

15.3、数字验证【适合商品购买】

    <!-- 数字验证
	min:最小多少
	max:最大多少
	step:步长:每次增加或减少多少
	 -->
    <p>商品数量:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

15.4、滑块

    <p>音量:
        <input type="range" min="0" max="100" step="2">
    </p>

15.5、搜索

用户名可以用这个试试,因为它可以清空这个框里的值

    <!-- 搜索框 -->
    <p>搜索:
        <input type="search" name="search">
    </p>

16、表单的应用

16.1、隐藏域

可以传递一些默认值

<!-- 密码框隐藏 -->
<p>密码:<input type="password" name="pwd" hidden/>

16.2、只读

<input type="text" name="username" value="Tony" readonly/>

16.3、禁用

<!-- 禁用之后不能选 -->
<input type="radio" value="girl" name="sex" disabled/><!-- 禁止提交 -->
<input type="submit" disabled/>

16.4、增强鼠标可用性

    <!-- 增强鼠标可用性
	点击lable标签可以锁定到input中
	 -->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">

17、表单初级验证

常用方式:

  • placeholder
  • required
  • pattern

17.1、placeholder

提示信息,一般用在输入框

<p>名字:<input type="text" name="username" placeholder="请输入用户名"/> </p>

17.2、required

非空判断,可以用的地方很多,可以搭配邮箱验证、URL验证、数字验证使用

    <p>名字:<input type="text" name="username" required/> </p>

    <p>邮箱:
        <input type="email" name="email" required>
    </p>

	<p>URL:
        <input type="url" name="url" required>
    </p>
	
	<p>商品数量:
        <input type="number" name="number" max="100" min="0" step="10" required>
    </p>
    

17.3、pattern

正则表达式

常用正则表达式:https://www.jb51.net/tools/regexsc.htm

    <p>自定义邮箱
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cxycxytony/article/details/107371092

智能推荐

【Git1】指令,分支,ssh免密登录_码农编程录的博客-程序员信息网

文章目录1.init/add/commit/pull/push,status/diff/log/reflog,reset/checkout/clone:工缓归2.分支操作:git branch -v(默认)查看本地分支2.1 分支打tag:更新本地和gitlab同步3.idea操作git:create new project-Maven4.ssh免密登录(不是https):whoami,adduser,su,-i4.1 应用:每台机器两两连接(大数据集群配置)1.init/add/commit/pull

bert模型的简单调用方法_跌跌撞撞的编程之路的博客-程序员信息网_bert hidden size

本文主要介绍了bert模型的简单调用方式,不去深究bert模型的内部原理,只讲解bert模型的pytorch调用方法,直接调用bert需要安装 pytorch-pretrained-bert,直接用pip就可以安装:pip install pytorch-pretrained-bert bert模型的结构图: 如上图,bert模型是由多个transform...

ubuntu12 root账户自动登录_weixin_30838921的博客-程序员信息网

Ubuntu为了系统安全,root帐号的密码是随机的,如果临时需要提升至root权限以执行一些命令,需要使用sudo命令。产线上有几台使用Ubuntu的机器,因为使用者不固定,并且执行程序时需要使 用到root权限,所以需要将这几台机器配置为自动登录到root账户。查阅了相关资料后,可以通过 以下两步来实现这个目的:1. 为root账户修改一个密码; 在终端下输入”sudo passwd r...

Linux c==信号量实现线程之间的PV操作(16)_焦糖饼干M的博客-程序员信息网

1.信号量实现线程之间的PV操作,实现线程同步和互斥的数据模型? (1).sem_init函数 函数作用:初始化信号量 函数原型:int sem_init(sem_t *sem,int pshared, unsigned int value) 参数:sem:信号量指针 Pshared:决定信号量能否在几个进程间共享,一般取0 Value:信号量的初始值 (2).

linux下文件内容比较命令(diff,comm)_bb6lo的博客-程序员信息网

COMM命令如果想对两个有序的文件进行比较,可以使用comm命令。语法:comm [- 123 ] file1 file2说明:该命令是对两个已经排好序的文件进行比较。其中file1和file2是已排序的文件。comm读取这两个文件,然后生成三列输出:仅在file1中出现的行;仅在file2中出现的行;在两个文件中都存在的行。如果文件名用“- ”,则表示从标准输入读取。comm -

正则表达式完成替换功能(NotePad++和SourceInsight)_Frey_Liu的博客-程序员信息网_sourceinsight正则表达式

正则表达式完成替换功能(NotePad++和SourceInsight)最近在用SI看网上下载的代码时,遇到很多对类型进行了变态重定义的情况,类似如下代码:// VAR(int_T, void)实际上等价于int_T,int_T是已定义的类型。VAR(int_T, void) Device_Add( DeviceType *devPtr ) {}VAR(uintT, voi...

随便推点

idea界面上的几个maven命令_bluede2015的博客-程序员信息网

idea环境下常用的几种命令1.clean : 清除目录,清除target目录,而target目录是整个工程被编译后存放的目录2.validate:验证工程是否正确,所有需要的资源是否可用3.compile:编译源代码,不包括测试代码。4.test-compile: 编译测试代码,当然也会编译源代码(因为测试依托源代码)。5.test : 运行测试代码,执行过程是先执行 test-compile然后运行测试代码。6.package:打包,在target目录下打包(包里面内容待探?),这里运行

windows bat系列4:for处理案例一 逐行处理&字段分割_那个少年的博客-程序员信息网

背景假设有文件内容如下,其以列表形式显示了不同文件夹中文件数量,要求提取清单列中最后一列的数字。 CHECK IS THERE ANY INTERFACE FILES IN I/O DIRS ...

协方差矩阵的计算_sbaban的博客-程序员信息网_计算协方差矩阵

一、统计学的基本概念统计学里最基本的概念就是样本的均值、方差、标准差。首先,我们给定一个含有n个样本的集合,下面给出这些概念的公式描述: 均值描述的是样本集合的中间点,它告诉我们的信息是有限的,而标准差给我们描述的是样本集合的各个样本点到均值的距离之平均。以这两个集合为例,[0, 8, 12, 20]和[8, 9, 11, 12],两个集合的均值都是10,但显然两个集合的差别是很大的,计算两者

linux下安装sphinx-for-chinese 支持中文全文索引_编程爱好者之家的博客-程序员信息网_sphinx-for-chinese

一.需要安装mysql和Gcc和g++yum install gccyum install g++在linux下,C++的编译器不是g++这个名称,而是gcc-c++,由此看来的确是我想当然了。然后直接运行yum install gcc-c++ libstdc++-devel 二.下载 sphinx-for-chinese.tar.gz(点击下载) 放在/usr/l...

Python中tkinter中控件的使用(6.Listbox列表框(双击打印下标和值))_diaomao5080的博客-程序员信息网

import tkinterwin = tkinter.Tk()win.title("Listbox列表框")win.geometry("800x600+600+100")lbv=tkinter.StringVar()#绑定变量#SINGLE与BORWSE作用相似,但是不支持鼠标按下后移动选中位置lb=tkinter.Listbox(win,selectmode=tkinter.SING...

推荐文章

热门文章

相关标签