前端技术（1）— HTML5 实战详解

最新推荐文章于 2023-04-14 15:47:10 发布

USTC_SC

最新推荐文章于 2023-04-14 15:47:10 发布

阅读量471

点赞数

分类专栏：前端技术篇文章标签： html 网页设计 web html5 java

本文链接：https://blog.csdn.net/USTC_SC/article/details/108967657

版权

前端技术篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.基本概念

HTML：Hyper Text Markup Language（超文本标记语言）

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

2.网页基本标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!-- 标题标签-->
<h1>断章</h1>
<h4>卞之琳</h4>

<!--段落标签-->
<!--快捷键:p+ tab-->
<p>你站在桥上看风景，</p>
<p>看风景人在楼上看你。</p>
<p>明月装饰了你的窗子，</p>
<p>你装饰了别人的梦</p>

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


<h1>回答</h1>

<!--换行标签-->
卑鄙是卑鄙者的通行证，<br/>
高尚是高尚者的墓志铭，<br/>

<hr/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you </strong>
斜体：<em>i love you </em>
<br/>
<!--特殊符号:开头:&  结尾:;-->
空   格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于：&gt;<br/>
小于：&lt;<br/>
版权符号:&copy;suc<br/>


</body>
</html>

在这里插入图片描述

3.图像标签

常见图像格式：JPG、GIF、PNG、BMP

< 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>
<img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293">
</body>
</html>

在这里插入图片描述

4.链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href:链接路径（必填）
target：链接在哪个窗口打开。
- _ blank :在新标签中打开
- _ self：在自己网页中打开
锚链接：页面间跳转
功能性链接：邮件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>

<a href="2.基本标签.html" target="_blank">点击跳转到网页1</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a><br/>
<a href="https://baike.baidu.com/item/%E6%B3%B0%E5%8B%92%C2%B7%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9/8472307?fromtitle=%E6%B3%B0%E5%8B%92%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9&fromid=23688107&fr=aladdin">
    <img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293">
</a><br/>


<!--锚链接-->
<a href="#top">回到顶部</a><br/>
<a name="down">down</a><br>

<!--功能性链接
邮件链接：mailto
QQ链接
-->

<a href="mailto:suc@mail.ustc.edu.cn">邮件</a><br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1938950036&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1938950036:53" alt="点击我" title="点击我"/></a></body>
</html>

在这里插入图片描述

5.行内元素和块元素

块元素：无论内容多少，该元素独占一行

行元素：内容撑开宽度，左右都是行内元素的可以排在一行

6.列表

列表就是信息资源的一种展示形式，他可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。列表主要分为有序列表、无序列表、自定义列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>


<!--有序列表-->
<ol>
    <li>Python</li>
    <li>Java</li>
    <li>C/C++</li>
    <li>GO</li>
</ol>

<hr>
<!--无序列表-->
<ul>
    <li>Python</li>
    <li>Java</li>
    <li>C/C++</li>
    <li>GO</li>
</ul>

<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表名称
-->
<dl>
    <dt>语言</dt>

    <dd>Python</dd>
    <dd>Java</dd>
    <dd>C++</dd>

    <dt>城市</dt>

    <dd>上海</dd>
    <dd>苏州</dd>
    <dd>杭州</dd>
</dl>
</body>
</html>

在这里插入图片描述

7.表格

优点：简单通用，结构稳定

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <!-- colspan:跨列 -->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!-- rowspan:跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

8.视频和音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频与视频
src:路径
controls:控制条
autoplay:自动播放
-->
<video src="../resources/video/暴走大事件.mp4" controls height="300"></video>
<audio src="../resources/audio/一生所爱.mp3" controls></audio>
</body>
</html>

在这里插入图片描述

9.页面结构分析

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

<!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>

10.iframe内联框架

<iframe src = "path" name= "mainFrame"></iframe>

src:引用页面地址
name：框架标识名

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

<iframe src="https:www.baidu.com" name="百度" frameborder="0" height="800" width="1000"></iframe>

<a href="2.基本标签.html" target="百度">点击跳转</a>
</body>
</html>

在这里插入图片描述

11.表单语法

在这里插入图片描述

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
- get:方式提交：我们可以在url中看到我们提交的信息，不安全，高效
- post:比较安全，传输大文件

在这里插入图片描述

表单的应用

隐藏域：hidden

只读：readonly

禁用：disabled

表单的初级验证

placeholder ：提示信息
required：非空判断
pattern：正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

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

<!-- 单选框标签
input type="radio"
value:单选框的值
name:表示组
-->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--多选框
input type="checkbox"
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby" checked>游戏
    </p>

<!--按钮
input type="button"：普通按钮
input type="image":  图像按钮
input type="submit": 提交
input type="reset":  重置
-->
    <p>
        <input type="button" name="btn1" value="确定">
    </p>
    <p>
        <input type="image" src="../resources/image/02.jpg" width="200">
    </p>


    <!--下拉框-->
    <p>国家:
        <select name="列表名称" >
            <option value="China">中国</option>
            <option value="USA" selected>美国</option>
            <option value="UK">英国</option>
            <option value="Japan">日本</option>
        </select>
    </p>


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

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

<!--数字-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

<!--滑块-->
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>


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


<!--增强鼠标可用性-->
    <p>
        <label for="mark">增强:</label>
        <input type="text" id="mark">
    </p>

<!--文本域-->
    <p>反馈：
        <textarea name="textarea"  cols="25" rows="5">文本内容</textarea>

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

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


</form>

</body>
</html>

在这里插入图片描述

USTC_SC

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端技术（1）— HTML5 实战详解

文章目录1.基本概念2.网页基本标签3.图像标签4.链接标签5.行内元素和块元素6.列表7.表格8.视频和音频9.页面结构分析10.iframe内联框架11.表单语法1.基本概念HTML：Hyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等2.网页基本标签标题标签段落标签换行标签水平线标签字体样式标签注释和特殊符号<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫