七分钟学会 HTML 网页制作
什么是HTML
- Hyper Text Markup Language（超文本标记语言）
- 标签控制排版
- 体积小，方便传输
编写HTLML
推荐使用：VS Code
<!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>末晨曦吖</title>
</head>
<body>
<div id="app">
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</div>
</body>
<style scoped>
body{
padding: 0;
margin: 0;
}
</style>
</html>
HTML文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<title>末晨曦吖</title>
</head>
<body></body>
</html>
- 起始行
<!DOCTYPE html>告诉浏览器这是一个HTML文档 - 开始标签
<html> - 结束标签
</html>
html根标签，标签都是成对出现的，标签中可以嵌套文本或其他标签
<head>中定义文档的描述信息<title>定义title，它会显示在浏览器上
HTML常用标签
标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
效果：
段落标签
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
效果：
文本样式标签
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup><br><br>
<del>我是带删除线的文本</del>
效果：
列表标签
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
效果：
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ol start="50">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
效果：
超链接标签
<a href="https://www.bilibili.com/" target="_blank">跳转到 B 站</a>
效果：
多媒体标签
图片标签
<img src="./smiley.gif">
视频标签
<video src="./video .mp4" controls></video>
音频标签
<audio src="./audio .mp3" controls></audio>
div标签
块级元素，并没具体的实际意义，主要作用是调整布局样式；
<div>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</div>
布局标签
<headet> |
头部信息 |
|---|---|
<nav> |
导航栏 |
<aside> |
侧边栏 |
<main> |
内容区域 |
<footer> |
底部信息 |
<article> |
文章详情 |
<section> |
页面分区 |
更多资料参考
七分钟学会 HTML 网页制作的更多相关文章
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- 转载：手机网页制作的认识（有关meta标签）
下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- （旧）子数涵数·DW——网页制作的流程
PS:这是我很早以前的一个废掉的项目. 当时用的还是table排版,现在基本都是div了吧. 这个项目前段时间,我还抢救过一次,后来还是放弃了. 先行.网页制作的流程分为哪些呢? 一.网站策划(当时, ...
- 离线网页制作器（beta1.0）
package hhuarongdao; /* *使用方法: 先选择保存路径,然后输入相应的网址, *然后会得到那个网页的离线版的 内容 * */ import java.awt.BorderLayo ...
- 8、网页制作Dreamweaver（jQuery基础:安装、语法）
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- 7、网页制作Dreamweaver（悬浮动态分层导航）
悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...
- HTML5网页制作教程:HTML5块级链接
网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...
- 网页制作之html基础学习1-简介
学习网页制作主要分为三大块 1.HTML 超文本标记语言( 全称:Hyper Text Markup Language) 专门编辑静态网页 2.CSS 网页美化:是HTML控制的样式 ...
随机推荐
- 2021.03.13【NOIP提高A&B组】模拟 总结
T1 题目大意:从原点开始循环执行命令,问最后的位置 好吧这就是一道幼儿园的周期问题,模拟即可 #include<bits/stdc++.h> using namespace std; c ...
- Django 学习记录（AcWing）
Django 2.1 搭建文件结构 前面的都是配置基本步骤,不需要理解,其他Django项目同样步骤操作: 接下来用Django-admin新建一个Django项目: django-admin sta ...
- 【Spring】事务的执行原理（二）
前置知识 事务的执行步骤如下: 获取事务管理器 创建事务 执行目标方法 捕捉异常,如果出现异常进行回滚 提交事务 public abstract class TransactionAspectSupp ...
- springboot2.7.x 集成log4j2配置写入日志到mysql自定义表格
在阅读之前请先查看[springboot集成log4j2] 本文暂不考虑抽象等实现方式,只限于展示如何自定义配置log4j2并写入mysql数据库(自定义结构) 先看下log4j2的配置 <?x ...
- BUUCTF-九连环
九连环 这题还是稍微有点难度的 使用16进制打开发现压缩包,用binwalk分离看看 分离得到的压缩包同样16进制看看 可以发现多个压缩包,这种情况应该是伪加密的方式,但是直接使用修复压缩包的方式没法 ...
- openGauss内核：SQL解析过程分析
摘要:在传统数据库中SQL引擎一般指对用户输入的SQL语句进行解析.优化的软件模块.SQL的解析过程主要分为:词法.语法和语义分析. 本文分享自华为云社区< openGauss内核分析(三):S ...
- python：**也不过如此嘛，这不也被我采集下来啦~
前言 嗨喽!大家好呀,这里是小熊猫 知识点: 基本流程 fiddler抓包 开发环境: python 3.8 运行代码 pycharm 2021.2 辅助敲代码 requests 第三方模块 如果安装 ...
- Training a classifier
你已经学习了如何定义神经网络,计算损失和执行网络权重的更新. 现在你或许在思考. What about data? 通常当你需要处理图像,文本,音频,视频数据,你能够使用标准的python包将数据加载 ...
- Whats On Tap | Tapdata Cloud 如何助力大型家居连锁商城推进数字化经营？
Tapdata Cloud 的操作有多便捷,上手试一下就能充分了解了.--Tapdata Cloud 用户 | 报表实施 @某大型家居服务平台 一边是监管政策趋严,推动房地产回归本源,存量竞争时代开启 ...
- final关键字概念与四种用法和final关键字用于修饰类和成员方法
fifinal关键字 概述 学习了继承后,我们知道,子类可以在父类的基础上改写父类内容,比如,方法重写.那么我们能不能随意的继承 API中提供的类,改写其内容呢?显然这是不合适的.为了避免这种随意改写 ...