1. Toy模板网首页
  2. > Toy博客

前端-01Html5基本知识

7月前 作者：:Concerto 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了前端-01Html5基本知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 基本

1.1 第一个前端程序

  1. 内容
<html>
    <head>
        <title>我的网页</title>
    </head>
    <body>
        Hello,我的第一个网页
    </body>
</html>

使用浏览器打开

前端-01Html5基本知识

1.2 工具安装

  1. 浏览器

谷歌浏览器

前端-01Html5基本知识

前端-01Html5基本知识

清缓存

ctrl+shift+delete

前端-01Html5基本知识

  1. vscode
  • 生成浏览器文件.html的快捷方式

!+回车

前端-01Html5基本知识

前端-01Html5基本知识

  • 常用快捷键

前端-01Html5基本知识

  • 快速打开浏览器

插件open in browser 安装，就会多出两个选项来

前端-01Html5基本知识

2 Html5

2.1 介绍

  1. 概念

是一种用来描述网页的一种语言，被称为超文本标记语言，本质是标记语言，标记语言是一套标记标签，一般用

  1. DOCTYPE声明

DOCTYPE是document type(文档类型)的缩写。

<!DOCTYPE html>
是H5的声明位于文档的最前面，甚至在<html>之前

作用是网页必备的组成部分，避免浏览器的怪异模式

前端-01Html5基本知识

  1. html5的基本骨架

  • html标签

  • head标签

    • 必须包含title标签
    • meta标签：一般是限定utf-8编码格式，注意是一个单标签

  • body标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我的第一个网页
</body>
</html>

2.2 标签之标题

  1. 标题介绍

从h1到h6从大到小，双标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 案例
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="UTF-8">
​
    <title>Document</title>
</head>
​
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
​
</html>

前端-01Html5基本知识

快捷键

h$*6+回车

  • 网页案例

https://www.mi.com/shop

前端-01Html5基本知识

  1. 标题标签位置摆放
align="left center | right"
默认为左的，可以设置属性变成右边

前端-01Html5基本知识

2.3 标签之段落、换行、水平线

  1. 概念

段落§：通过段落去承载文本

换行(br)

水平线(hr)

  1. 段落
  • 运用
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <p>我是一个段落标签</p>
</body>
​
</html>

前端-01Html5基本知识

  • 网页案例

前端-01Html5基本知识
3. 换行

  • 运用

注意是单标签

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <p>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
</body>
​
</html>

前端-01Html5基本知识

  1. 水平线
  • 运用

前端-01Html5基本知识

  • 案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
    <hr color="red" width="300px" size ="10px" align = "left">
</body>

</html>

前端-01Html5基本知识

2.4 标签的图片

  1. 概念

使用标签定义HTML页面中的图像

<img scr="" alt="" title="" width="" height="">
  1. 运用
  • 用法

前端-01Html5基本知识

  • scr

图片必须和代码在同一个文件夹下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="1683454588303.jpg" >
</body>
</html>

效果

前端-01Html5基本知识

  • alt
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像">
</body>

当图片获取不到的时候，会显示alt的名字，即代替文本

前端-01Html5基本知识

  • width
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px">
</body>
  • height
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px" height="300px">
</body>
  • title

鼠标边边会出现文字提示

前端-01Html5基本知识

  1. 关于scr的补充
  • 绝对路径
  • 相对路径

子级关系/

前端-01Html5基本知识

父级关系…/

前端-01Html5基本知识

同级关系./

2.5 超文本链接

  1. 概念

使用来设置超文本链接，其中href属性来描述链接的地址

<a href="url">链接文本</a>
  1. 运用
<body>
    <a href="https://www.baidu.com">百度</a>
</body>

记得写全https://

图片也可以当作跳转的中介

<body>
    <a href="https://www.baidu.com">
        <img src="1683454588303.jpg" alt="qq头像" width="300px">
    </a>
</body>

2.6 文本标签

  1. 基本使用

前端-01Html5基本知识

<body>
    <em>月月</em>
    <b>月月</b>
    <i>月月</i>
    <strong>月月</strong>
    <del>月月</del>
    <span>月月</span>
</body>

前端-01Html5基本知识

  1. 嵌套
<body>
	<p>我喜欢吃<em>em白菜</em></p>
</body>

前端-01Html5基本知识

2.7 列表标签之有序列表

  1. 有序列表
  • 基本使用
<body>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>
</body>

前端-01Html5基本知识

  • ol属性

前端-01Html5基本知识

<body>
    <ol type ="1">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type ="a">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>
</body>

前端-01Html5基本知识

  • 嵌套

也可以嵌套，li中再套一组ol

<body>    
	<ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>油菜</li>
            </ol>
        </li>
    </ol>
</body>

前端-01Html5基本知识

2.8 无序列表

  1. 概念
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>
</body>

前端-01Html5基本知识

  1. ul属性

前端-01Html5基本知识

<body>
<ul type ="disc">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type ="circle">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "squre">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "none">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

</body>

前端-01Html5基本知识

  • 嵌套

也可以嵌套的

  1. 实际运用
  • 百度新闻
  • 小米

前端-01Html5基本知识

辅助以css

  1. 快捷键

ul>li*2

2.9 标签之表格

  1. 概念

表格：

行：，有几行就几个tr

单元格(列)：，有几列就在tr中写几列，中间可以写文本的

  1. 运用

三行三列的单元格

<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

前端-01Html5基本知识

  1. 快捷键

table <tr*2>td{单元格}

    table>tr*3>td*3{哦哦}

回车成这样
    <table>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
    </table>
  1. 属性
  • 基本属性

前端-01Html5基本知识

以后用css调整的多

  • 运用
<table border="1">
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
</table>
  • 效果

前端-01Html5基本知识

宽高也可以设置，也可以后css调整

  1. 单元格合并
  • 水平合并colspan
<body>
    <p>合并单元格</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td>yes3</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
            <td>yes6</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>
  • 垂直合并rowspan
<body>
    <p>水平合并单元格3,4以及垂直合并单元格3，6</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td rowspan="2">yes3 yes6</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>

效果

前端-01Html5基本知识

如果合并四个，先水平合并，后垂直合并

2.10 表单

  1. 引入

前端-01Html5基本知识

  1. 属性

表单一般包括容器和控件，控件包含输入框和按钮

<form action="url" method ="get|post" name="myform"></form>

action服务器地址，method请求类型，name表单名字

  1. 组成

表单标签，表单域(输入框)，表单按钮

<form>
    <input type ="text">
    <input type = "submit">
</form>

前端-01Html5基本知识

  1. 补充表单元素
  • 文本框
    <form>
        用户名：<input type ="text">
    </form>

前端-01Html5基本知识

  • 密码框
    <form>
        Password：<input type ="password" name = "pwd">
    </form>

前端-01Html5基本知识

密码是小黑圆点

  • 提交按钮
   <form>
        <input type = "submit" value = "Submit">
    </form>

前端-01Html5基本知识文章来源地址https://www.toymoban.com/news/detail-439726.html

到了这里，关于前端-01Html5基本知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(七)——JSX 的基本语法

    JSX 是一种 JS 的语法扩展（extension），也可以称之为 JavaScript XML，因为看起来就是一段 XML 语法 它用于描述我们的 UI 界面，并且其可以和 JS 融合在一起使用 它不同于 Vue 中的模块语法，不需要专门学习模块语法中的指令 React 认为 渲染逻辑 本质上与 其他UI逻辑 存在内在耦合

    2024年02月10日
    浏览(41)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件。 Router包括两个API： BrowserRouter使用history模式 HashRouter使用hash模式（路径后面带有#号） 尝试在项目中使用HashRouter： 安装Router 在 index.js 中引入并使用HashRouter Routes：包裹所有的Route，在其中匹配一个路由（

    2024年02月14日
    浏览(40)

  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation） HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(63)
  • 前端酷炫合集--炫酷Html5 Canvas做一个雾状扩散火焰动画

    前端酷炫合集--炫酷Html5 Canvas做一个雾状扩散火焰动画

    2024年01月23日
    浏览(39)
  • 【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    文章目录: 1. 准备开发环境 1.1 vs Code基本使用 2.HTML文本标签 2.1 标签语法 2.2 HTML基本骨架 2.3 标签的关系 2.4 注释 2.5 标题标签 2.6 段落标签 2.7 换行与水平线标签 2.8 文本格式化标签 VSCode与谷歌浏览器离线版,安装包评论区自提. VSCode默认安装位置:C:UsershpAppDataLocalProgramsMic

    2024年01月25日
    浏览(39)
  • 前端超好玩的小游戏合集来啦--周末两天用html5做一个3D飞行兔子萝卜小游戏

    前端超好玩的小游戏合集来啦--周末两天用html5做一个3D飞行兔子萝卜小游戏

    2024年02月03日
    浏览(79)

  • Web数据库基本知识,SQL基本语法

    当我们谈论整个技术栈时，实际上涉及了一系列步骤，而在Web开发中，这些步骤可以被具体化为以下几个阶段： DBMS-GUI-翻译器-查询语言 在web中具体如下: postgreSQL-Hasura-Apollo+ts-GraphQL 具体解释 DBMS（数据库管理系统）： 作用： 数据库管理系统允许我们直接使用SQL语言来操作数

    2024年02月03日
    浏览(30)
  • 光耦基本知识

    光耦基本知识

     1、光耦的种类          高速光耦、低速光耦；                 高速：6N137，HCPL-2601                 低速：PC817          线性光耦、非线性光耦；         以6N136与6N137为例         6N136是1Mbps的高速光耦，但是输出端采用的是 晶体管 ，所以输出电流的大小

    2024年02月02日
    浏览(64)
  • 数学向量基本知识

    数学向量基本知识

    1.向量相关定义 2.向量的线性运算 3.向量积与数量积    向量积与数量积的区别 名称 标积/内积/数量积/点积 矢积/外积/向量积/叉积 运算式（a，b和c粗体字，表示向量） a·b=|a||b|·cosθ a×b=c，其中|c|=|a||b|·sinθ，c的方向遵守右手定则 几何意义 向量a在向量b方向上的投影与向

    2023年04月08日
    浏览(65)

  • Linux 基本知识

    FHS（Filesystem Hierarchy Standard）—— 文件系统层次化标准 。 Filesystem Hierarchy Standard（文件系统层次化标准）的缩写，多数Linux版本采用这种文件组织形式，类似于Windows操作系统中c盘的文件目录，FHS采用树形结构组织文件。FHS定义了系统中每个区域的用途、所需要的最小构成的

    2024年02月16日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包