HTML5基础入门相关知识

最新推荐文章于 2022-01-18 11:31:42 发布

你佳哥

最新推荐文章于 2022-01-18 11:31:42 发布

阅读量111

点赞数

分类专栏： web前端文章标签： html html5 web

本文链接：https://blog.csdn.net/weixin_44215363/article/details/111057298

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基于【狂神说Java】HTML5完整教学通俗易懂

1 介绍

Hyper Text Markup Language（HTML）超文本标记语言；超文本的意思：文字、图片、音频、视频、动画等。
W3C（World Wide Web Consortium万维网联盟）标准包括：

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

2 第一个HTML文件

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

<!DOCTYPE html>:告诉浏览器使用什么规范；
<html>：html的总标签，里面写代码；
<head>：网页头部；
<meta>：描述性标签，描述网站的一些信息，一般用来做SEO的；
<title>：网页的标题；
<body>：网页体；

3 网页基本标签

3.1 标题标签

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

一共六级。

3.2 段落标签

<p>打开冰箱门</p>
<p>把大象装进冰箱</p>
<p>关闭冰箱门</p>

3.3 换行标签（单标签）

打开冰箱门 <br>
把大象装进冰箱 <br>
关闭冰箱门 <br>

3.4 水平线

<p>线上面</p>
<hr>
<p>线下面</p>

3.5 特殊符号

空格： 
大于：>
小于：<
版权符号©：©

等等；

4 图像标签

<img src="../resources/images/img.jpg" alt="找不到显示字" title="鼠标悬停文字" width="100" height="100">

5 链接(a)标签

<a href="https://www.baidu.com" target="_blank">
    <img src="../resources/images/img.jpg" alt="找不到显示字" title="鼠标悬停文字" width="100" height="100">
</a>

target的值：_blank在新页面打开、_self覆盖自己打开。
锚链接：可以跳转到标签处：<a href="#here">到这里</a>其中here为某标签的name属性值。
邮件链接：<a href="mailto:cqllwj@qq.com">联系我</a>

6 列表标签

6.1 有序列表order list

<ol>
    <li>小明</li>
    <li>小红</li>
    <li>小刚</li>
</ol>

6.2 无序列表

<ul>
    <li>小明</li>
    <li>小红</li>
    <li>小刚</li>
</ul>

6.3 自定义列表

<dl>
    <dt>班级学生</dt>
    <dd>小明</dd>
    <dd>小红</dd>
    <dd>小刚</dd>
</dl>

7 表格标签

<table border="1px">
    <tr>
        <td colspan="3">学生</td>
    </tr>
    <tr>
        <td rowspan="3">学生的信息</td>
        <td>姓名</td>
        <td>学号</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>1</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>2</td>
    </tr>
</table>

8 媒体标签

<video src="../resources/videos/v1.mp4" controls autoplay></video>
<audio src="music.mp3" controls autoplay></audio>

9 网页体一般结构

header：标记头部区域内容（用于页面或页面中的一块区域）；
footer：标记脚部区域的内容；
section：web页面中的一块独立区域；
article：独立的文章内容；
aside：相关内容或应用；
nav：导航类辅助内容；

10 iframe内联框架

<iframe src="https://www.baidu.com" frameborder="0" height="400" width="800"></iframe>

可以在网页中嵌套其他网页；

11 表单语法（用户上传信息）

<h1>用户注册</h1>
<form action="server.html" method="get">
    <p>姓名：<input type="text" name="name" placeholder="请输入用户名"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>邮箱：<input type="email" name="email"></p>
    <p>已邀请用户数：<input type="number" name="invatedUsers"></p>
    <p>年龄：
        <input type="range" min="0" max="100" name="age">
    </p>
    <p>性别
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="basketball" name="bobby">篮球
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>
    <p>省份:
        <select name="province">
            <option value="sichuan">四川</option>
            <option value="chongqing" selected>重庆</option>
            <option value="gansu">甘肃</option>
        </select>
    </p>
    <p>个人签名
        <textarea name="sign" id="" cols="30" rows="10"></textarea>
    </p>
    <p>上传头像 <input type="file" name="headImg"></p>
    <p><input type="submit"> <input type="reset"></p>
</form>

在这里插入图片描述

你佳哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础入门相关知识

基于【狂神说Java】HTML5完整教学通俗易懂目录1 介绍2 第一个HTML文件3 网页基本标签3.1 标题标签3.2 段落标签3.3 换行标签（单标签）3.4 水平线3.5 特殊符号4 图像标签5 链接(a)标签6 列表标签6.1 有序列表order list6.2 无序列表6.3 自定义列表7 表格标签1 介绍Hyper Text Markup Language（HTML）超文本标记语言；超文本的意思：文字、图片、音频、视频、动画等。W3C（World Wide Web Consortium万
复制链接

扫一扫

专栏目录