HTML语法基础

置顶 已于 2024-03-16 20:07:17 修改
阅读量1.1k 收藏 23
点赞数 22
分类专栏： python与HTML的网站之歌 文章标签： html 前端 python css css3 node.js vue.js
于 2024-03-16 20:06:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yq823120/article/details/136627278
版权

1.HTML是什么

HTML是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

2.HTML的基本语法

注：后端请参见Python网站的搭建和html基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/yq823120/article/details/136591364?spm=1001.2014.3001.5501

(1)标题

我们可以通过标题来调整字体的大小。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>

</body>
</html>

效果如下图：

(2)段落

我们要在网页中呈现文字的时候，有时会发现，全部打上去的字都垒在一块了。于是，段落出现了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>段落 1</p>
<p>段落 2</p>

</body>
</html>

那么，效果如下图：

(3)链接

为了方便访问者访问、使用我们的网站，我们可以在网页中插入链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<a href="https://www4.bing.com">这是一个链接</a>

</body>
</html>

效果如下：

(4)图像

为了美化我们的网页，可以在里面适当添加图片。当然，不一定必须是本地地址，也可以来自网络。

本地图片版：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img src="/images/picture.jpg" width="258" height="39" />

</body>
</html>

线上版：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img src="https://..." width="258" height="39" />

</body>
</html>

图片链接：https://tse1-mm.cn.bing.net/th/id/OIP-C.WuHLDWHLagk2At3FDcBxeQHaEK?rs=1&pid=ImgDetMainicon-default.png?t=N7T8https://tse1-mm.cn.bing.net/th/id/OIP-C.WuHLDWHLagk2At3FDcBxeQHaEK?rs=1&pid=ImgDetMain

声明：这里引用了一张图片，不涉及商业用途。 

效果：

3.HTML的高级语法

虽然说是高级语法，但是并不难，只是相对于前面几个语法和参数就相对难一些。

这里面涉及到css和javascript的相关知识，初学者可以先不用管，日后编者会具体来讲。

(1)插入背景图片

 上文我们讲述了插入图片，但是我们还需要一个好看的背景。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://...');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

</body>
</html>

当我们想让壁纸覆盖整个屏幕，background-size的参数就设置为cover。（英文中cover是覆盖的意思）

效果如下（最好选一张比较清楚的图片）：

(2)按钮设置 

为了让访问者从我们的网站跳转到其他网站，但是超链接又不好看，按钮就发挥了它的价值。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">按钮</button>

</body>
</html>

效果如下图：

(3)时钟

为了让访问者能够轻松看到时间，这时候就出现了js版时钟。

<!DOCTYPE html>
<html>
<head>


 <script>
        (function(){

            var canvas=null;

            var ctx=null;

            var cw=0;
            var ch=0;
            window.addEventListener("load",function(){
                canvas=document.getElementById("sample");
                ctx=canvas.getContext("2d");
                cw=parseInt(canvas.width);
                ch=parseInt(canvas.height);

                ctx.translate(cw/2, ch/2);


                draw_watch();
            },false);
            function draw_watch(){
                ctx.clearRect(-cw/2,-ch/2,cw,ch);
                var len=Math.min(cw, ch)/2;
                var tlen=len*0.85;
                ctx.font="14px 'Arial'";
                ctx.fillStyle="black";
                ctx.textAlign="center";
                ctx.textBaseLine="middle";

                for(var i=1; i<=12; i++){
                    var tag1=Math.PI*2*(3-i)/12;
                    var tx=tlen * Math.cos(tag1);
                    var ty=-tlen * Math.sin(tag1);
                    ctx.fillText(i,tx,ty);
                }
                var d=new Date();
                var h=d.getHours();
                var m=d.getMinutes();
                var s=d.getSeconds();
                if(h >12 ){
                    h=h-12;
                }
                var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
                var length1=len * 0.5;
                var width1=5;
                var color1="#000000";
                drawhand(angle1,length1,width1,color1);
                var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
                var length2=len * 0.7;
                var width2=3;
                var color2="#555555";
                drawhand(angle2,length2,width2,color2);
                var angle3 = Math.PI * 2 *(15 - s)/60;
                var length3=len * 0.8;
                var width3=1;
                var color3="#aa0000";
                drawhand(angle3,length3,width3,color3);
                setTimeout(draw_watch,1000);
            }
            function drawhand(angle,len,width,color){
                var x=len*Math.cos(angle);
                var y=-len * Math.sin(angle);
                ctx.strokeStyle=color;
                ctx.lineWidth=width;
                ctx.lineCap="round";
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(x,y);
                ctx.stroke();

            }
        })();
    </script>
</head>
<body>

<canvas id="sample" width="150" height="150"></canvas>

</body>
</html>

效果：

4.总结

编者特的将本文涉及的知识点汇集成了一个完整代码，如下：

<!DOCTYPE html>
<html>
<head>
<style>
    body {
  background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.WuHLDWHLagk2At3FDcBxeQHaEK?rs=1&pid=ImgDetMain');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}
</style>
 <script>
        (function(){

            var canvas=null;

            var ctx=null;

            var cw=0;
            var ch=0;
            window.addEventListener("load",function(){
                canvas=document.getElementById("sample");
                ctx=canvas.getContext("2d");
                cw=parseInt(canvas.width);
                ch=parseInt(canvas.height);

                ctx.translate(cw/2, ch/2);


                draw_watch();
            },false);
            function draw_watch(){
                ctx.clearRect(-cw/2,-ch/2,cw,ch);
                var len=Math.min(cw, ch)/2;
                var tlen=len*0.85;
                ctx.font="14px 'Arial'";
                ctx.fillStyle="black";
                ctx.textAlign="center";
                ctx.textBaseLine="middle";

                for(var i=1; i<=12; i++){
                    var tag1=Math.PI*2*(3-i)/12;
                    var tx=tlen * Math.cos(tag1);
                    var ty=-tlen * Math.sin(tag1);
                    ctx.fillText(i,tx,ty);
                }
                var d=new Date();
                var h=d.getHours();
                var m=d.getMinutes();
                var s=d.getSeconds();
                if(h >12 ){
                    h=h-12;
                }
                var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
                var length1=len * 0.5;
                var width1=5;
                var color1="#000000";
                drawhand(angle1,length1,width1,color1);
                var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
                var length2=len * 0.7;
                var width2=3;
                var color2="#555555";
                drawhand(angle2,length2,width2,color2);
                var angle3 = Math.PI * 2 *(15 - s)/60;
                var length3=len * 0.8;
                var width3=1;
                var color3="#aa0000";
                drawhand(angle3,length3,width3,color3);
                setTimeout(draw_watch,1000);
            }
            function drawhand(angle,len,width,color){
                var x=len*Math.cos(angle);
                var y=-len * Math.sin(angle);
                ctx.strokeStyle=color;
                ctx.lineWidth=width;
                ctx.lineCap="round";
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(x,y);
                ctx.stroke();

            }
        })();
    </script>
</head>
<body>
<a href="https://www.csdn.net/" class="button button1">按钮</a>
<h1>欢迎来到我的网站</h1>
<canvas id="sample" width="150" height="150"></canvas>
</body>
</html>

效果如下图：

完结撒花φ(゜▽゜*)♪！

127wangruopu
关注
  • 22
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础语法
cc
01-27 6946
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。
HTML的基础语法
qq_45726327的博客
05-03 3310
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。HTML使用标记(markup)来描述网页的结构和内容。你可以理解成是人类的基本框架.
HTML基本语法学习
qq_54500361的博客
02-10 4058
一、HTML简介 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言 最新的版本是HTML5，H5中新增了对音视频的支持。HTML是一个弱语言(对语法的要求不严格)。 www简称w3c，称为万维网联盟，该机构是制定web技术规范 . 二、HTML基本结构 1、网页基本结构 <!DOCTYPE>: <!DOCTYPE> 位于文档的第一行，用于向浏览器说明当前文档使用的是哪种 HTML 规范。 <!DOCTYPE html&
HTML 语法基础
10-10
以上只是HTML语法基础的冰山一角，深入学习还包括表格、列表、框架、多媒体支持、表单验证、响应式设计等多个方面。对于初学者来说，熟练掌握这些基本概念是构建网页和理解网页工作原理的关键。通过不断实践和学习，...
html语法基础
10-04
html语法基础，帮助初学者尽快入门，并能够快速记忆和方便使用
html基础语法
02-25
HTML 基础语法 HTML 文档结构是指 HTML 文档的基本骨架，包括 HTML头、body、标题、段落、列表、表格、表单等部分。HTML 基础语法是指 HTML 文档的基本语法规则，包括标签、属性、值、实体、注释、特殊符号等。 ...
HTML知识基础语法篇(5)
01-08
HTML基础知识 第五篇 主体内部标签 7∼16 空格——  一般情况下，在网页中输入文本，在段落开头添加空格再使用浏览器的时候会看不到空格，主要因为在HTML文件 中浏览器本身会把两个句子之间的所有半角空白仅当作一...
HTML的文档类型与字符集＜!DOCTYPE html＞
m0_65696193的博客
07-15 239
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
html 关闭信息窗口
cuisidong1997的博客
07-14 207
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML 学习指南：从入门到精通
英英的博客
07-09 459
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1043
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
什么是HTML？
m0_65696193的博客
07-15 451
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js。- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。- 重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)。
[计网初识2]web的3个核心标准html，url，http
qq_43235540的博客
07-15 564
web的3个核心标准-->HTML,URL,HTTP的构成，
HTML结构详解
最新发布
m0_65696193的博客
07-15 98
doctype html> -----> 用来告诉浏览器文档类型, 该标签最好不要去掉.如果将该标签去掉之后,浏览器会出现一只怪异模式[浏览器不确定到底按照哪种渲染方式去渲染显示网页]。<head></head> ----- 设置网页中基本的配置内容(网页的标题,网页中的样式,网页中的js代码效果....)。<body></body> ---> 代表的是网页主体[在网页中除去地址栏看到的任何信息都要放到body标签中]。<html></html> -----> 根标签。
前端开发体系+html文件详解
m0_63432840的博客
07-14 229
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
初识HTML
Dxito_的博客
07-09 985
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
推选HTML语法-HyperText-Markup-LanguagePPT资料.ppt
10-26
【推选】HTML语法-HyperText-Markup-LanguagePPT资料.ppt

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值