首页 > 其他分享 >HTML

HTML

时间：2022-11-15 01:12:05浏览次数：55  
标签：W3C 网页 标签 表单 HTML 图像

HTML

HTML初识

定义及发展史

定义：超文本标记语言 Hyper Text Markup Language

标记语言：就是用标签来写的语言

超文本：文本就是文件、文档，超文本包括：文字、图片、音频、视频、动画等

引用自百度百科

HTML的发展史及HTML的作用：
HTML描述网页的一种语言，是一种超文本语言，不是编程语言，仅是一种标记语言。既然是标记语言，那么HTML由一套标记标签组成（markup 通过）组成，在制作网页时，HTML用标记标签来描述网页。
超文本标记语言：
1993年6月互联网工程小组工作草案发布
html2.0-1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时
html3.2-1996年1月14日，W3C推荐标准
html4.0-1997年12月18日，W3C推荐标准
html4.01-1999年12月24日（微小改动）W3C推荐标准，2000年5月15日发布基本严格的html4.01语法
是国际标准化组织和国际电工委员会的标准
xhtml1.0-2000年1月26日正式发布，是W3C推荐标准，后来经过修改于2002年8月1日重新发布
xhtml1.1-2001年5月31日发布
xhtml2.0-W3C的工作草案，改动过大，学习成本过高，失败。
html5-2004年提出，2007年被W3C接纳并成立新的HTML工作团队，2008年正式发布html5第一份正式草案，2012年12月17日HTML规范正式定稿，2013年5月6日，html5.1正式草案发布。
HTML5作为最新版本，提供一些新的元素和新特性，建立新规则，这些元素，特性，和规则的建立，提供了许多新的网页功能，用网页实现动态渲染图形，图表图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

W3C

World Wide Web Consortium 万维网联盟

成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括：

  • 结构化标准语言 HTML XML
  • 表现标准语言 CSS
  • 行为标准 DOM ECMAScript

常用IDE： WebStorm IDEA

网页基本标签

介绍

标题标签

一级标签

二级标签

段落标签

换行标签

水平线标签

字体样式标签

粗体： <strong>I LOVE YOU</strong><br/>
斜体： <em>I LOVE YOU</em>

注释和特殊符号

&gt;
&lt;
&copy;版权所有

采用IDEA编写网页

我的第一个网页

![image-20221110234050391](HTML.assets/image-20221110234050391.png

<!-- DOCTYPE:文档类型  告诉浏览器我们要使用什么规范-->
<!DOCTYPE html> <!-- 默认使用html规范，因此这句话删掉也可以-->
<html lang="en"> <!-- lang表示语言，en为英语-->

<!-- head标签代表网页头部 -->
<head>

    <!--  meta为描述性标签，用来描述网站的一些信息，一般用来做SEO：Search Engine Optimization 搜索引擎优化 -->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java，西部开源">
    <meta name="description" content="来这个地方可以学习java">

    <!-- title标签表示网页的标题 -->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页主题 -->
<body>
Hello,World
</body>
</html>

<!-- html标签外的东西不会显示-->

image-20221110233827152

基本标签展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!-- 段落标签 -->
<p>两只老虎 - 贝瓦儿歌</p>
<p>两只老虎两只老虎</p>
<p>跑得快跑得快</p>
<p>一只没有耳朵</p>
<p>一只没有尾巴</p>
<p>真奇怪真奇怪</p>
<p>两只老虎两只老虎</p>
<p>跑得快跑得快</p>
<p>一只没有耳朵</p>
<p>一只没有尾巴</p>
<p>真奇怪真奇怪</p>

<!-- 水平线标签 -->
<hr/>

<!-- 换行标签 -->
两只老虎<br/>
两只老虎<br/>

<!-- 字体样式标签 -->
粗体： <strong>I LOVE YOU</strong><br/>
斜体： <em>I LOVE YOU</em>

<br/>

<!-- 特殊符号 -->
<!-- 多空格只有一个 -->
空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
&gt;
&lt;
&copy;版权所有

</body>
</html>

展示效果：

image-20221110234218224

图像 超链接

图像

常见图像格式

  • JPG 由联合图像专家组(Joint Photographic Experts Group)开发。JPEG文件的扩展名为.jpg或.jpeg。用有压缩方式去除冗余的图像和彩色数据，用较少的磁盘空间得到较好的图片质量
  • GIF Graphics Interchange Format 图形交换格式，用于以超文本标志语言方式显示索引彩色图像
  • PNG 便携式网络图形是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小
  • BMP BitMap位图,包含图像信息丰富，基本不压缩，占用磁盘空间大。在单机上比较流行
  • TIFF 标签图像文件格式（Tag Image File Format，TIFF）是一种灵活的位图格式，主要用来存储包括照片和艺术图在内的图像，最初由Aldus公司与微软公司一起为PostScript打印开发。TIFF与JPEG和PNG一起成为流行的高位彩色图像格式。

嵌入图片

<img src="path" alt="text" title="text" width="x" height="y" />
  • src 图像地址
  • alt 图像的替代文字 用于图像不存在时的显示
  • title 鼠标悬停提示文字
  • width 图像宽度
  • height 图像高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!-- image学习
src: 图片地址
     相对地址
     绝对地址
     ../ 表示上一级目录
-->
<img src="../resources/image/水滴石穿.jpg" alt="儿子头像" title="乖宝宝" width="600" height="800">
</body>
</html>

显示效果

image-20221110234321839

超链接

<a href="path" target="目标窗口位置">链接文本或图像</a>
<!-- 超链接学习
href: 链接路径
target: 链接在哪个窗口打开  常用值：_self  _blank
    _self: 在当前标签页面打开，不新开窗口  默认
    _blank: 在新标签页面打开
	_parent: 父框架集合或父窗口
    _top: 在当前整个浏览器中打开所连接的文档

比如：
网A中镶嵌了网页B，网页B又镶嵌了网页C：
1. 如果网页C中连接设置target=_parent，则跳将网页B去掉直接A中嵌入网页C中链接页面;
2. 而如果网页C中target=_top ，则直接跳出所有iframe框架，直接转向C中链接页面。
-->

文本超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!-- a标签
href:必填-->
<a href="https://www.baidu.com">点击我跳转到百度</a>
</body>
</html>

图像超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!-- a标签
href:必填-->
<a href="https://www.baidu.com" target="_blank">
    <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
</a>
</body>
</html>

锚链接

<!-- 锚链接
1. 需要一个标记
2. 跳转到标记
3. 使用#加上标签的名字
4. 跳转到其它网页的某个位置  <a href="4.链接标签.html#top">跳转</a>
5. 其实目录树就是锚链接
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--用id做一个标记-->
<a id="top">顶部</a>

<!-- a标签
href:必填-->

<p>
    <a href="https://www.baidu.com" target="_top">点击我跳转到百度</a>
</p>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
    </a>
</p>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
    </a>
</p>

<!--用id做一个标记-->
<a id="middle">跳转到中间</a>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
    </a>
</p>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
    </a>
</p>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/image/水滴石穿.jpg" alt="水滴石穿" title="水滴石穿" width="600" height="800">
    </a>
</p>
<!-- 锚链接
1. 需要一个标记
2. 跳转到标记
3. 使用#加上标签的名字
-->
<a href="#top">点击我跳转顶部</a>
<a href="#middle">点击我跳转中间</a>
</body>
</html>

功能性链接

<!--功能性链接
比较多，介绍几个常用的
邮件链接：mailto:
qq链接：去qq推广页面 选择后会生成qq链接标签
-->
<a href="mailto:[email protected]">点击联系我</a>

块元素和行内元素

块元素

  • 无论内容多少，该元素独占一行 即一个标签一行
  • (p、h1-h6...)
<p>两只老虎 - 贝瓦儿歌</p>
<p>两只老虎两只老虎</p>
<p>跑得快跑得快</p>

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

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行 除非在后面跟
  • (a . strong . em)
<!-- 字体样式标签 -->
粗体： <strong>I LOVE YOU</strong>
斜体： <em>I LOVE YOU</em>

列表 表格 媒体元素

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
ol:ordered list
li: list
应用范围：试卷  问答
-->
<ol>
    <li>Java</li>
    <li>C</li>
    <li>Python</li>
    <li>VB</li>
</ol>

<hr/>
<!--无序列表 
unordered list
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>C</li>
    <li>Python</li>
    <li>VB</li>
</ul>

<hr/>
<!--自定义列表
dl: definition list
dt: definition term 自定义列表组  即列表名称
dd: definition description 自定义列表描述 即列表内容
应用：常用于公司网站底部
-->
<dl>
    <dt>编程语言</dt>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>Python</dd>
    <dd>VB</dd>
</dl>

</body>
</html>

显示效果

image-20221113214935119

表格

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列

一般表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格 table
tr 行  table row  代表html表格中的一行
td 列  table data cell   代表html表格中的一个单元格
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>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>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>

</table>
</body>
</html>

显示效果

image-20221113224502172

跨行跨列

<table border="1px">
    <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-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>

</table>

image-20221113224934456

媒体元素

视频元素 video

音频元素 audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
controls  表示带控制开关  可以在页面播放 停止 进度 下载等操作
autoplay  自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resources/video/萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

image-20221113231154335

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析学习</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页底部</h2>
</footer>


</body>
</html>

ifram内联框架

内联了hao123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<iframe src="https://www.hao123.com" frameborder="1" width="600px" height="600px"></iframe>

</body>
</html>

name属性应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>
<!--
name 表示内联区域的名字
-->
<iframe src="" name="zone" frameborder="1" width="600px" height="600px"></iframe>
<!--表示在内联zone显示hao123-->
<a href="https://www.hao123.com" target="zone">点击调转</a>

</body>
</html>

注：bilibili随便打开一个视频，视频下方的分享，选择嵌入代码，则可获取诸如以下的内联代码，在网页播放指定bilibili视频

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

表单

简介

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单语法

image-20221114222857288

image-20221114002333615

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>

<body>

<h1>注册</h1>

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

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>

展示效果image-20221114205235018

文本框和单选框

<!--单选框标签 radio
input type="radio"
value: 表示单选框的值，选中男，值就是boy,标签外的男只是修饰value boy的
name: 名字相同表示是同一个组的，这样只能选中一个

-->
<p>性别：
    <!--单选框 必须有value
	-->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>

image-20221114224239588

按钮和多选框

多选框

<!--多选框标签 checkbox
checked 默认选中
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="game" name="hobby" checked/>游戏
    <input type="checkbox" value="beer" name="hobby"/>啤酒
</p>

image-20221114224537134

按钮

<!--按钮标签 
type = "button"  普通按钮
type = "image"   图片按钮
type = "submit"  提交按钮
type = "reset"   重置按钮
-->
<p>按钮：
    <input type="button" value="点击" name="btn1"/>
    <!--图片按钮-->
    <input type="image" value="点击我跳转" src="../resources/image/水滴石穿.jpg"/>
</p>

列表框文本域和文件域

下拉框

<!--下拉框，列表框
selected 表示默认值
-->
<p>下拉框：
    <select name="国家">
        <option value="China">中国</option>
        <option value="America">美国</option>
        <option value="Swiss" selected>瑞士</option>
    </select>
</p>

image-20221114234415857

文本域

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

文本域的框可以鼠标拖动变化

image-20221114235446846

文件域

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

image-20221115001057891

搜索框滑块和简单验证

邮箱验证

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

image-20221115001333756

url

<!--url-->
<p>URL：
    <input type="url" name="url"/>
</p>

image-20221115001546528

数字

<!--数字-->
<p>数字：
    <input type="number" name="number" max="100" min="10" step="2"/>
</p>

image-20221115001832586

滑块

<!--滑块-->
<p>滑块：
    <input type="range" name="range" max="100" min="10" step="2"/>
</p>

image-20221115002159815

搜索框

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

image-20221115002407448

表单的应用

  • 隐藏域

    <p>密码：<input type="password" name="pwd" value="123456" hidden></p>

    image-20221115003051839

  • 只读

    <p>名字：<input type="text" name="username" value="橙子乖乖" readonly></p>

  • 禁用

    <input type="radio" value="boy" name="sex" disabled/>男  # 无法选中男

  • 增强鼠标可用性

    <!--增强鼠标可用性 for指向id，比如点击文字也会选中文本框-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">

image-20221115003442143

表单初级验证

为什么要进行表单验证？减少服务器压力 数据的安全性

常用方式

  • placeholder 提示信息 用在所有的输入框中

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

    image-20221115004513901

  • required 非空判断 用在所有的文本框中

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

    image-20221115004636667

  • pattern 正则表达式判断

    <!--正则表达式判断-->
<p>自定义邮箱：
    <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
</p>

标签：W3C,网页,标签,表单,HTML,图像
From： https://www.cnblogs.com/jingxing/p/16891108.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99