HTML学习

HTML5

初识HTML、网页基本标签、图像、超链接、网页布局、列表、表格、媒体元素、表单及表单应用、表单初级验证

1. 初识HTML

什么是HTML

Hyper Text Markup Language，超文本标记语言

超文本包括：文字、图片、音频、视频、动画等

HTML5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

优势：1. 世界知名浏览器厂商（微软、Google、苹果、Opera、Mozilla）对HTML5的支持；2. 市场的需求； 3. 跨平台

W3C（World Wide Web Consortium，万维网联盟），W3C标准包括：

结构化标准语言（HTML、XML）；
表现标准语言（CSS）；
行为标准（DOM、ECMAScript）

标签：开放标签、闭合标签

网页基本信息

DOCTYPE声明
<title>标签
<meta>标签

<!-- DOCTYPE：告诉浏览器要使用什么规范 -->

<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，用于描述网站的一些信息；一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="JungKook, Cooky">
    <meta name="description" content="I love learning Java!">
    <!-- title标签代表网页标题 -->
    <title>Title</title>
</head>
<!-- body标签代表网页主体 -->
<body>

Hello,world!

</body>
</html>

2. 网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

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

<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 段落标签 -->
<p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，</p>
<p>还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。</p>
<p>Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。</p>
<!-- 换行标签 -->
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。<br/>
Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。<br/>
<!-- 水平线标签 -->
<hr/>
<!-- 字体样式标签：粗体、斜体 -->
粗体：<strong>粗体</strong><br/>
斜体：<em>斜体</em><br/>
<!-- 特殊符号 -->
空格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于：&gt;<br/>
小于：&lt;<br/>
版权：&copy;<br/>
</body>
</html>

3. 图像标签

常见的图像格式：JPG, GIF, PNG, BMP……

<!-- 图像位置、图像的替代文字、鼠标悬停提示文字、图像宽度、图像高度 -->
<img src="path" alt="text" title="text" width="x" height="y" />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<img src="../resources/image/jk.jpg" alt="JungKook" title="是柾国呀" width="500" height="300">

</body>
</html>

4. 超链接标签及其应用

链接标签

<!-- a标签
href: 必填，表示要跳转到哪个页面
target: 表示新窗口在哪里打开
    _blank  在新标签页中打开
    _self   在当前标签页中打开
-->
<a href="path" target="目标窗口位置">链接文本或图像</a>

文本超链接
图像超链接

超链接：

页面间链接：从一个页面链接到另一个页面
锚链接：需要一个锚标记，跳转到标记
功能性链接

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

<!-- 使用name作为锚标记 -->
<a name="top">顶部</a><br/>

<!-- 页面间链接 -->
<a href="1-MyFirstWebPage.html" target="_blank">Click me to HelloWord!</a><br/>
<a href="https://www.baidu.com" target="_self">Click me to Baidu!</a><br/>
<a href="1-MyFirstWebPage.html">
    <img src="../resources/image/jk.jpg" alt="JungKook" title="是柾国呀" width="500" height="300">
</a><br/>

<!-- 锚链接
页面内：href="#top"
页面间：href="*.html#top"
-->
<a href="#top">回到顶部</a><br/>
    
<!-- 功能性链接
邮件链接：mailto:
QQ链接：搜索QQ推广
-->
<a href="mailto:24736743@qq.com">点击QQ邮箱联系我</a><br/>
<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>
</html>

块元素和行内元素

块元素：无论内容多少，该元素独占一行，如p, h1-h6……
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，如a, strong, em……

5. 列表标签

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获取相应地信息。

有序列表
无序列表
自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>language</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
</dl>
</body>
</html>

6. 表格标签

表格优点：简单通用、结构稳定

基本结构：单元格、行、列、跨行、跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!--跨行-->
        <td rowspan="2">田柾国</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

7. 媒体元素

视频元素：video
音频元素：audio

<!--音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="path to the mp4" controls autoplay></video>
<audio src="path to the mp3" controls autoplay></audio>

8. 页面结构分析

元素名	描述
header	标记头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

9. iframe内联框架

<!--引用页面地址、框架标识名-->
<iframe src="path" name="mainFrame"></iframe>
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<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>
</body>
</html>

10. 表单（重点）

post和get提交

表单语法

<!--表单
action: 表单数据提交位置，网站/一个请求处理地址
method: post/get提交方式
    get方式提交：可以在url中看见提交的信息，不安全，但高效；
    post方式提交：比较安全，可以传输大文件
-->
<form method="post" action="result.html">
    <p> 名字：<input type="name" type="text"> </p>
    <p> 密码：<input type="pass" type="password"> </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重置"/>
    </p>
</form>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1-MyFirstWebPage.html" method="post">
    <!--文本输入框-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码框-->
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

表单元素格式

属性	说明
type	指定元素的类型。 text, password, checkbox, radio, submit, reset, file, hidden, image和button, 默认为text
name（必填）	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位；对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框和单选框

<!--文本输入框-->
<p>名字：<input type="text" name="username" value="JungKook" maxlength="8" size="30"> </p>
<!--密码框-->
<p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
type: radio
value: 单选框的值
name: 组
-->
<p>性别：
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

按钮和多选框

<!--多选框标签-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="vocal" name="hobby" checked>声乐
    <input type="checkbox" value="dance" name="hobby">舞蹈
    <input type="checkbox" value="rap" name="hobby">说唱
</p>
<!--按钮-->
    <p>按钮：
        <!--普通按钮-->
        <input type="button" name="btn1" value="click me">
        <!--图片按钮-->
        <input type="image" src="../resources/image/jk.jpg">
    </p>
    <p>
        <!--提交按钮-->
        <input type="submit">
        <!--重置按钮-->
        <input type="reset">
    </p>

列表框、文本域和文件域

<!--下拉框/列表框-->
<p>国家：
    <select name="Country">
        <option value="China" selected>中国</option>
        <option value="America">美国</option>
        <option value="Korea">韩国</option>
        <option value="Japan">日本</option>
    </select>
</p>
<!--文本域-->
<p>反馈：
    <textarea name="textarea" cols="30" rows="10">text content</textarea>
</p>
<!--文件域-->
<p>
    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
</p>

搜索框、滑块和简单验证

<!--邮件验证-->
<p>邮箱：
    <input type="email" name="email">
</p>
<!--URL验证-->
<p>URL：
    <input type="url" name="url">
</p>
<!--数字验证-->
<p>数字：
    <input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>滑块：
    <input type="range" name="voice" min="0" max="100" step="1">
</p>
<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

表单应用

只读：readonly
禁用：disabled
隐藏域：hidden

<!--增强鼠标可用性，点击label，鼠标聚焦于文本域-->
<p>
    <label for="mark">click</label>
    <input type="text" name="text" id="mark">
</p>

表单初级验证

常用方式：

placeholder：提示信息，应用于文本框

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

required：非空判断，表示元素不能为空，应用于所有的文本框
```
<p>密码：<input type="password" name="pwd" required></p>
```

pattern：正则表达式

<p>自定义邮箱：
    <input type="text" name="defineMail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

附：狂神b站视频链接

posted @ 2021-03-23 23:14 甜了酒了果阅读(40) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

甜了酒了果