七分钟学会 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控制的样式 ...
随机推荐
- SQL年龄计算方法
第一种方法: 用DATEDIFF函数,DATEDIFF(YEAR,beginDate,endDate). 测试语句: 1 DECLARE @birthdayDate DATE 2 DECLARE @e ...
- 测试软件稳定性、健壮性之Monkey工具--简洁与深入
搭建环境这章节没做详细说明,因为我是前期做APP自动化是已经将 SDK 以及JDK给安装配置好了,这次是直接上来演示monkey的功能点以及运用 一.什么是稳定性测试? 通过随机点击屏幕一段时间,看看 ...
- CentOS8安装mysql8.0具体步骤
操作系统:CentOS Linux release 8.0及以上 Mysql版本:Mysql 8.0.22 x86_64 (MySQL Community Server - GPL) Mysql8下载 ...
- Spring框架系列(6) - Spring IOC实现原理详解之IOC体系结构设计
在对IoC有了初步的认知后,我们开始对IOC的实现原理进行深入理解.本文将帮助你站在设计者的角度去看IOC最顶层的结构设计.@pdai Spring框架系列(6) - Spring IOC实现原理详解 ...
- JQuery select与radio的取值与赋值
radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...
- 数学工具类Math
概述 java.lang.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数.类似这样的工具 类,其所有方法均为静态方法,并且不会创建对象,调用起来非常简单 基本运算的方法 ...
- SpringMVC-02
一.SSM整合[重点] 1 SSM整合配置 问题导入 请描述"SSM整合流程"中各个配置类的作用? 1.1 SSM整合流程 创建工程 SSM整合 Spring SpringConf ...
- 'cross-env' 不是内部或外部命令
yarn start yarn run v1.22.10$ cross-env APP_TYPE=site umi dev'cross-env' 不是内部或外部命令,也不是可运行的程序或批处理文件.e ...
- java------注释、关键字、字面量
注释(对代码的一种解释说明) 单行注释 // 多行注释 /* */ 文档注释 /** */ 注释使用细节: 注释内容不参与编译和运行,所以只在java文件中存在 不管是单行注释还是多行注释 ...
- Border Theory
持续更新中!!!更个屁,无线停更! 前言: KMP 学傻了,看 skyh 说啥 border 树,跑来学 border 理论 洛谷云剪切板:https://www.luogu.com.cn/paste ...