七分钟学会 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控制的样式 ...
随机推荐
- R数据分析：如何简洁高效地展示统计结果
之前给大家写过一篇数据清洗的文章,解决的问题是你拿到原始数据后如何快速地对数据进行处理,处理到你基本上可以拿来分析的地步,其中介绍了如何选变量如何筛选个案,变量重新编码,如何去重,如何替换缺失值,如何 ...
- go程序添加远程调用tcpdump功能
最近开发的telemetry采集系统上线了.听起来高大上,简单来说就是一个grpc/udp服务端,用户的机器(路由器.交换机)将它们的各种统计数据上报采集.整理后交后端的各类AI分析系统分析.目前华为 ...
- SAP PP- OPK8生产订单打印 配置Smart form.
OPK8 正常情况下是不可以配置Smart form 的 OPK8进入工单打印配置界面,选择Forms, 你会发现只有Script form 和PDF form(Adobe form)可选的,没有配置 ...
- SAP Web Dynpro-消息
在ABAP Workbench中,您还可以创建和显示包含Dynpro应用程序最终用户信息的消息. 这些消息显示在屏幕上. 这些是用户交互消息,显示有关Web Dynpro应用程序的重要信息. 为了向用 ...
- JQuery select与radio的取值与赋值
radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...
- 正在运行中的docker容器设置自动重启
# demo : 你的容器名称 docker update –-restart=always demo
- ArrayList分析1-循环、扩容、版本
ArrayList分析1-循环.扩容.版本 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16407733.html 前段时间抽空看了下ArrayList的源码 ...
- 方法引用(Method References)
* 方法引用的使用 * * 1.使用情境:当要传递给Lambda体的操作,已经有实现的方法了,可以使用方法引用! * * 2.方法引用,本质上就是Lambda表达式,而Lambda表达式作为函数式接口 ...
- Tomcat 安装及配置，创建动态的web工程
Tomcat可以认为是对Servlet标准的实现,是一个具体的Servlet容器. 1) 将Tomcat的安装包解压到磁盘的任意位(非中文无空格) 2) Tomcat服务的 ...
- 常用类-LocalDate、LocalTime、LocalDateTime
详情解释请看下方代码区 点击查看代码 @Test public void test1(){ //实例化:now()获取当前日期.时间.日期 + 时间 LocalDate localDate = Loc ...